Bagikan melalui

Merender Situs Halaman Web (Razor) ASP.NET untuk Perangkat Seluler

oleh Tom FitzMacken

Artikel ini menjelaskan cara membuat halaman di situs ASP.NET Web Pages (Razor) yang akan dirender dengan tepat di perangkat seluler.

Yang akan Anda pelajari:

  • Cara menggunakan konvensi penamaan untuk menentukan bahwa halaman dirancang khusus untuk perangkat seluler.

Versi perangkat lunak yang digunakan dalam tutorial

  • ASP.NET Web Pages (Razor) 3

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2.

ASP.NET Halaman Web memungkinkan Anda membuat tampilan kustom untuk merender konten di perangkat seluler atau perangkat lain.

Cara paling sederhana untuk membuat halaman khusus perangkat di situs Halaman Web ASP.NET adalah dengan menggunakan pola penamaan file seperti ini: FileName.Mobile.cshtml. Anda dapat membuat dua versi halaman (misalnya, satu bernama MyFile.cshtml dan satu bernama MyFile.Mobile.cshtml). Pada durasi, ketika perangkat seluler meminta MyFile.cshtml, ASP.NET merender konten dari MyFile.Mobile.cshtml. Jika tidak, MyFile.cshtml dirender.

Contoh berikut menunjukkan cara mengaktifkan penyajian seluler dengan menambahkan halaman konten untuk perangkat seluler. Page1.cshtml berisi konten ditambah bilah sisi navigasi. Page1.Mobile.cshtml berisi konten yang sama, tetapi menghilangkan bilah sisi.

  1. Di situs halaman web ASP.NET, buat file bernama Page1.cshtml dan ganti isi saat ini dengan markup berikut.

    <!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. Buat file bernama Page1.Mobile.cshtml dan ganti konten yang sudah ada dengan markup berikut. Perhatikan bahwa versi seluler halaman menghilangkan bagian navigasi untuk penyajian yang lebih baik di layar yang lebih kecil.

    <!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. Jalankan browser desktop dan telusuri ke Page1.cshtml. mobilesites-1

  4. Jalankan browser seluler (atau emulator perangkat seluler) dan telusuri Page1.cshtml. (Perhatikan bahwa Anda tidak menyertakan .mobile. sebagai bagian dari URL.) Meskipun permintaannya adalah ke Page1.cshtml, ASP.NET merender Page1.Mobile.cshtml.

    mobilesites-2

Catatan

Untuk menguji halaman seluler, Anda dapat menggunakan simulator perangkat seluler yang berjalan di komputer desktop. Alat ini memungkinkan Anda menguji halaman web seperti yang akan terlihat di perangkat seluler (biasanya dengan area tampilan yang jauh lebih kecil). Salah satu contoh simulator adalah add-on User Agent Switcher untuk Mozilla Firefox, yang memungkinkan Anda meniru berbagai browser seluler dari Firefox versi desktop.

Sumber Daya Tambahan

Windows Phone Emulator

  • Last updated on