Renderowanie witryn ASP.NET Web Pages (Razor) dla urządzeń przenośnych

Artykuł
07/13/2023

W tym artykule opisano sposób tworzenia stron w witrynie ASP.NET Web Pages (Razor), która będzie renderowana odpowiednio na urządzeniach przenośnych.

Zawartość:

Sposób używania konwencji nazewnictwa w celu określenia, że strona została zaprojektowana specjalnie dla urządzeń przenośnych.

Wersje oprogramowania używane w samouczku

ASP.NET Web Pages (Razor) 3

Ten samouczek działa również z ASP.NET Web Pages 2.

ASP.NET stron sieci Web umożliwia tworzenie niestandardowych ekranów do renderowania zawartości na urządzeniach przenośnych lub innych urządzeniach.

Najprostszym sposobem tworzenia strony specyficznej dla urządzenia w witrynie ASP.NET Web Pages jest użycie wzorca nazewnictwa plików w następujący sposób: FileName.Mobile.cshtml. Można utworzyć dwie wersje strony (na przykład jedną o nazwie MyFile.cshtml i jedną o nazwie MyFile.Mobile.cshtml). W czasie wykonywania, gdy urządzenie przenośne żąda MyFile.cshtml, ASP.NET renderuje zawartość z pliku MyFile.Mobile.cshtml. W przeciwnym razie plik MyFile.cshtml jest renderowany.

W poniższym przykładzie pokazano, jak włączyć renderowanie urządzeń przenośnych przez dodanie strony zawartości dla urządzeń przenośnych. Page1.cshtml zawiera zawartość oraz pasek boczny nawigacji. Page1.Mobile.cshtml zawiera tę samą zawartość, ale pomija pasek boczny.

W witrynie ASP.NET Web Pages utwórz plik o nazwie Page1.cshtml i zastąp bieżącą zawartość następującym znacznikiem.

<!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>

Utwórz plik o nazwie Page1.Mobile.cshtml i zastąp istniejącą zawartość następującym znacznikiem. Zwróć uwagę, że wersja mobilna strony pomija sekcję nawigacji w celu lepszego renderowania na mniejszym ekranie.

<!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>

Uruchom przeglądarkę klasyczną i przejdź do strony Page1.cshtml.
Uruchom przeglądarkę mobilną (lub emulator urządzenia przenośnego) i przejdź do strony Page1.cshtml. (Zwróć uwagę, że nie dołączasz pliku mobile. jako części adresu URL). Mimo że żądanie dotyczy pliku Page1.cshtml, ASP.NET renderuje plik Page1.Mobile.cshtml.

Uwaga

Aby przetestować strony mobilne, można użyć symulatora urządzenia przenośnego działającego na komputerze stacjonarnym. To narzędzie umożliwia testowanie stron internetowych w taki sposób, jak na urządzeniach przenośnych (zazwyczaj z znacznie mniejszym obszarem wyświetlania). Jednym z przykładów symulatora jest dodatek Switcher agenta użytkownika dla Mozilla Firefox, który umożliwia emulację różnych przeglądarek mobilnych z wersji klasycznej Firefox.

Dodatkowe zasoby

emulator Windows Phone

Udostępnij za pośrednictwem

Renderowanie witryn ASP.NET Web Pages (Razor) dla urządzeń przenośnych

Wersje oprogramowania używane w samouczku

Dodatkowe zasoby

Opinia

Dodatkowe zasoby