Sites de pages Web ASP.NET de rendu (Razor) pour les appareils mobiles

  • Article

par Tom FitzMacken

Cet article explique comment créer des pages dans un site pages Web ASP.NET (Razor) qui seront affichées de manière appropriée sur les appareils mobiles.

Ce que vous allez apprendre :

  • Comment utiliser une convention de nommage pour spécifier qu’une page est conçue spécifiquement pour les appareils mobiles.

Versions logicielles utilisées dans le tutoriel

  • pages Web ASP.NET (Razor) 3

Ce tutoriel fonctionne également avec pages Web ASP.NET 2.

pages Web ASP.NET vous permet de créer des affichages personnalisés pour le rendu du contenu sur des appareils mobiles ou d’autres appareils.

Le moyen le plus simple de créer une page spécifique à un appareil dans un site pages Web ASP.NET consiste à utiliser un modèle de nommage de fichier comme celui-ci : FileName.Mobile.cshtml. Vous pouvez créer deux versions d’une page (par exemple, l’une nommée MyFile.cshtml et l’autre nommée MyFile.Mobile.cshtml). Au moment de l’exécution, lorsqu’un appareil mobile demande MyFile.cshtml, ASP.NET affiche le contenu à partir de MyFile.Mobile.cshtml. Sinon, MyFile.cshtml est rendu.

L’exemple suivant montre comment activer le rendu mobile en ajoutant une page de contenu pour les appareils mobiles. Page1.cshtml contient du contenu ainsi qu’une barre latérale de navigation. Page1.Mobile.cshtml contient le même contenu, mais omet la barre latérale.

  1. Dans un site pages Web ASP.NET, créez un fichier nommé Page1.cshtml et remplacez le contenu actuel par le balisage suivant.

    <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #navigation {
                position: absolute;
                top: 0;
                left: 0;
                width: 10em;
            }
            #content {
            margin-left: 13em;
                margin-right: 10em;
            } 
        </style>
    </head>
    <body>
        <div id="navigation"> 
            <h3>Related Sites</h3>
            <ul>
                <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
                <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
                <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
            </ul>
        </div> 
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

  2. Créez un fichier nommé Page1.Mobile.cshtml et remplacez le contenu existant par le balisage suivant. Notez que la version mobile de la page omet la section de navigation pour un meilleur rendu sur un écran plus petit.

    <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #content {
            margin-left: 2em;
                margin-right: 5em;
            } 
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

  3. Exécutez un navigateur de bureau et accédez à Page1.cshtml. mobilesites-1

  4. Exécutez un navigateur mobile (ou un émulateur d’appareil mobile) et accédez à Page1.cshtml. (Notez que vous n’incluez pas .mobile. dans l’URL.) Même si la requête concerne Page1.cshtml, ASP.NET restitue Page1.Mobile.cshtml.

    mobilesites-2

Notes

Pour tester les pages mobiles, vous pouvez utiliser un simulateur d’appareil mobile qui s’exécute sur un ordinateur de bureau. Cet outil vous permet de tester les pages web telles qu’elles se présentent sur les appareils mobiles (c’est-à-dire, généralement avec une zone d’affichage beaucoup plus petite). Un exemple de simulateur est le module complémentaire User Agent Switcher pour Mozilla Firefox, qui vous permet d’émuler différents navigateurs mobiles à partir d’une version de bureau de Firefox.

Ressources supplémentaires

Émulateur Windows Phone