Fitur ASP.NET MVC 4 Mobile

oleh Rick Anderson

Sekarang ada versi MVC 5 dari tutorial ini dengan sampel kode di Menyebarkan Aplikasi Web Seluler MVC 5 ASP.NET di Situs Web Azure.

Tutorial ini akan mengajari Anda dasar-dasar cara bekerja dengan fitur seluler dalam aplikasi Web ASP.NET MVC 4. Untuk tutorial ini, Anda dapat menggunakan Visual Studio Express 2012 atau Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer atau VWD"). Anda dapat menggunakan versi profesional Visual Studio jika Anda sudah memilikinya.

Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini.

• Visual Studio Express 2012 (disarankan) atau Visual Studio Web Developer Express SP1. Visual Studio 2012 berisi ASP.NET MVC 4. Jika Anda menggunakan Visual Web Developer 2010, Anda harus menginstal ASP.NET MVC 4.

Anda juga akan memerlukan emulator browser seluler. Salah satu hal berikut ini akan berfungsi:

• Emulator Telepon Windows 7. (Ini adalah emulator yang digunakan di sebagian besar cuplikan layar dalam tutorial ini.)
• Ubah string agen pengguna untuk meniru iPhone. Lihat entri blog ini .
• Opera Mobile Emulator
• Apple Safari dengan agen pengguna diatur ke iPhone. Untuk petunjuk tentang cara mengatur agen pengguna di Safari ke "iPhone", lihat Cara membiarkan Safari berpura-pura IE di blog David Alison.

Proyek Visual Studio dengan kode sumber C# tersedia untuk menyertai topik ini:

• Unduhan proyek pemula
• Pengunduhan proyek yang telah selesai

Apa yang akan Anda Bangun

Untuk tutorial ini, Anda akan menambahkan fitur seluler ke aplikasi daftar konferensi sederhana yang disediakan dalam proyek pemula. Cuplikan layar berikut menunjukkan halaman tag aplikasi yang telah selesai seperti yang terlihat di Windows 7 Phone Emulator. Lihat Pemetaan Keyboard untuk emulator Windows Phone untuk menyederhanakan input keyboard.

Anda dapat menggunakan Internet Explorer versi 9 atau 10, FireFox atau Chrome untuk mengembangkan aplikasi seluler Anda dengan mengatur string agen pengguna. Gambar berikut menunjukkan tutorial yang telah selesai menggunakan Internet Explorer yang meniru iPhone. Anda dapat menggunakan alat pengembang Internet Explorer F-12 dan alat Fiddler untuk membantu men-debug aplikasi Anda.

Keterampilan yang akan Anda Pelajari

Inilah yang akan Anda pelajari:

• Bagaimana templat ASP.NET MVC 4 menggunakan atribut HTML5 viewport dan penyajian adaptif untuk meningkatkan tampilan pada perangkat seluler.
• Cara membuat tampilan khusus seluler.
• Cara membuat pengalih tampilan yang memungkinkan pengguna beralih antara tampilan seluler dan tampilan desktop aplikasi.

Memulai

Unduh aplikasi daftar konferensi untuk proyek pemula menggunakan tautan berikut: Unduh. Kemudian di Windows Explorer, klik kanan file MvcMobile.zip dan pilih Properti. Dalam kotak dialog propertiMvcMobile.zip , pilih tombol Buka Blokir . (Membuka blokir mencegah peringatan keamanan yang terjadi ketika Anda mencoba menggunakan file .zip yang telah Anda unduh dari web.)

Klik kanan file MvcMobile.zip dan pilih Ekstrak Semua untuk membuka zip file. Di Visual Studio, buka file MvcMobile.sln .

Tekan CTRL+F5 untuk menjalankan aplikasi, yang akan menampilkannya di browser desktop Anda. Mulai emulator browser seluler Anda, salin URL untuk aplikasi konferensi ke emulator, lalu klik tautan Telusuri menurut tag . Jika Anda menggunakan Emulator Windows Phone, klik di bilah URL dan tekan tombol Jeda untuk mendapatkan akses keyboard. Gambar di bawah ini menunjukkan tampilan AllTags (dari memilih Telusuri menurut tag).

Tampilannya sangat mudah dibaca di perangkat seluler. Pilih tautan ASP.NET.

Tampilan tag ASP.NET sangat berantakan. Misalnya, kolom Tanggal sangat sulit dibaca. Nantinya dalam tutorial Anda akan membuat versi tampilan AllTags yang khusus untuk browser seluler dan yang akan membuat tampilan dapat dibaca.

Catatan: Saat ini bug ada di mesin penembolokan seluler. Untuk aplikasi produksi, Anda harus menginstal paket nugget DisplayModes Tetap . Lihat ASP.NET MVC 4 Mobile Caching Bug Diperbaiki untuk detail tentang perbaikan.

Kueri Media CSS

Kueri media CSS adalah ekstensi untuk CSS untuk jenis media. Mereka memungkinkan Anda membuat aturan yang mengambil alih aturan CSS default untuk browser tertentu (agen pengguna). Aturan umum untuk CSS yang menargetkan browser seluler adalah menentukan ukuran layar maksimum. File Content\Site.css yang dibuat saat Anda membuat proyek Internet ASP.NET MVC 4 baru berisi kueri media berikut:

@media only screen and (max-width: 850px) {

Jika jendela browser lebarnya 850 piksel atau kurang, jendela tersebut akan menggunakan aturan CSS di dalam blok media ini. Anda dapat menggunakan kueri media CSS seperti ini untuk memberikan tampilan konten HTML yang lebih baik pada browser kecil (seperti browser seluler) daripada aturan CSS default yang dirancang untuk tampilan browser desktop yang lebih luas.

The Viewport Meta Tag

Sebagian besar browser seluler menentukan lebar jendela browser virtual ( viewport) yang jauh lebih besar dari lebar perangkat seluler yang sebenarnya. Ini memungkinkan browser seluler untuk menyesuaikan seluruh halaman web di dalam tampilan virtual. Pengguna kemudian dapat memperbesar pada konten yang menarik. Namun, jika Anda mengatur lebar viewport ke lebar perangkat aktual, tidak ada pembesaran tampilan yang diperlukan, karena konten cocok di browser seluler.

Tag viewport <meta> dalam file tata letak ASP.NET MVC 4 mengatur viewport ke lebar perangkat. Baris berikut menunjukkan tag viewport <meta> dalam file tata letak ASP.NET MVC 4.

<meta name="viewport" content="width=device-width">

Memeriksa Efek Kueri Media CSS dan Tag Meta Viewport

Buka file Views\Shared\_Layout.cshtml di editor dan komentari tag viewport <meta> . Markup berikut menunjukkan baris yang dikomentari.

@*<meta name="viewport" content="width=device-width">*@

Buka file MvcMobile\Content\Site.css di editor dan ubah lebar maksimum dalam kueri media menjadi nol piksel. Ini akan mencegah aturan CSS digunakan di browser seluler. Baris berikut ini memperlihatkan kueri media yang dimodifikasi:

@media only screen and (max-width: 0px) { ...

Simpan perubahan Anda dan telusuri ke aplikasi Konferensi di emulator browser seluler. Teks kecil dalam gambar berikut adalah hasil dari menghapus tag viewport <meta> . Tanpa tag viewport <meta> , browser memperkecil ke lebar viewport default (850 piksel atau lebih lebar untuk sebagian besar browser seluler.)

Batalkan perubahan Anda — batalkan komentar tag viewport <meta> di file tata letak dan pulihkan kueri media menjadi 850 piksel dalam file Site.css . Simpan perubahan Anda dan refresh browser seluler untuk memverifikasi bahwa tampilan ramah seluler telah dipulihkan.

Tag viewport <meta> dan kueri media CSS tidak spesifik untuk ASP.NET MVC 4, dan Anda dapat memanfaatkan fitur-fitur ini di aplikasi web apa pun. Tetapi mereka sekarang dibangun ke dalam file yang dihasilkan ketika Anda membuat proyek ASP.NET MVC 4 baru.

Untuk informasi selengkapnya tentang tag viewport <meta> , lihat Kisah dua viewport — bagian dua.

Di bagian berikutnya Anda akan melihat cara memberikan tampilan spesifik browser seluler.

Mengesampingkan Tampilan, Tata Letak, dan Tampilan Parsial

Fitur baru yang signifikan dalam ASP.NET MVC 4 adalah mekanisme sederhana yang memungkinkan Anda mengambil alih tampilan apa pun (termasuk tata letak dan tampilan parsial) untuk browser seluler secara umum, untuk browser seluler individual, atau untuk browser tertentu. Untuk menyediakan tampilan khusus seluler, Anda dapat menyalin file tampilan dan menambahkan . Seluler ke nama file. Misalnya, untuk membuat tampilan Indeks seluler, salin Views\Home\Index.cshtml ke Views\Home\Index.Mobile.cshtml.

Di bagian ini, Anda akan membuat file tata letak khusus seluler.

Untuk memulai, salin Views\Shared\_Layout.cshtml ke Views\Shared\_Layout.Mobile.cshtml. Buka _Layout.Mobile.cshtml dan ubah judul dari Konferensi MVC4 menjadi Konferensi (Seluler).

Di setiap Html.ActionLink panggilan, hapus "Telusuri menurut" di setiap tautan ActionLink. Kode berikut menunjukkan bagian isi yang telah selesai dari file tata letak seluler.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="title">
        <h1> Conference (Mobile)</h1>
    </div>
    <div id="menucontainer">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Date", "AllDates", "Home")</li>
            <li>@Html.ActionLink("Speaker", "AllSpeakers", "Home")</li>
            <li>@Html.ActionLink("Tag", "AllTags", "Home")</li>
        </ul>
    </div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Salin file Views\Home\AllTags.cshtml ke Views\Home\AllTags.Mobile.cshtml. Buka file baru dan ubah <h2> elemen dari "Tag" menjadi "Tag (M)":

<h2>Tags (M)</h2>

Telusuri ke halaman tag menggunakan browser desktop dan gunakan emulator browser seluler. Emulator browser seluler menunjukkan dua perubahan yang Anda buat.

Sebaliknya, tampilan desktop tidak berubah.

Tampilan Browser-Specific

Selain tampilan khusus seluler dan khusus desktop, Anda dapat membuat tampilan untuk browser individual. Misalnya, Anda dapat membuat tampilan yang khusus untuk browser iPhone. Di bagian ini, Anda akan membuat tata letak untuk browser iPhone dan tampilan AllTags versi iPhone.

Buka file Global.asax dan tambahkan kode berikut ke Application_Start metode .

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
    ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
        ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

Kode ini mendefinisikan mode tampilan baru bernama "iPhone" yang akan dicocokkan dengan setiap permintaan masuk. Jika permintaan masuk cocok dengan kondisi yang Anda tentukan (yaitu, jika agen pengguna berisi string "iPhone"), ASP.NET MVC akan mencari tampilan yang namanya berisi akhiran "iPhone".

Dalam kode, klik DefaultDisplayModekanan , pilih Atasi, lalu pilih using System.Web.WebPages;. Ini menambahkan referensi ke System.Web.WebPages namespace, yang merupakan tempat DisplayModes dan DefaultDisplayMode jenis ditentukan.

Atau, Anda dapat menambahkan baris berikut secara manual ke bagian using file.

using System.Web.WebPages;

Isi lengkap file Global.asax ditunjukkan di bawah ini.

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Simpan perubahan. Salin file MvcMobile\Views\Shared\_Layout.Mobile.cshtml ke MvcMobile\Views\Shared\_Layout.iPhone.cshtml. Buka file baru lalu ubah h1 judul dari Conference (Mobile) ke Conference (iPhone).

Salin file MvcMobile\Views\Home\AllTags.Mobile.cshtml ke MvcMobile\Views\Home\AllTags.iPhone.cshtml. Di file baru, ubah <h2> elemen dari "Tag (M)" menjadi "Tag (iPhone)".

Jalankan aplikasi. Jalankan emulator browser seluler, pastikan agen penggunanya diatur ke "iPhone", dan telusuri ke tampilan AllTags . Cuplikan layar berikut menunjukkan tampilan AllTags yang dirender di browser Safari . Anda dapat mengunduh Safari untuk Windows.

Di bagian ini kita telah melihat cara membuat tata letak dan tampilan seluler serta cara membuat tata letak dan tampilan untuk perangkat tertentu seperti iPhone. Di bagian berikutnya Anda akan melihat cara memanfaatkan jQuery Mobile untuk tampilan seluler yang lebih menarik.

Menggunakan jQuery Mobile

Pustaka jQuery Mobile menyediakan kerangka kerja antarmuka pengguna yang berfungsi di semua browser seluler utama. jQuery Mobile menerapkan peningkatan progresif untuk browser seluler yang mendukung CSS dan JavaScript. Peningkatan progresif memungkinkan semua browser untuk menampilkan konten dasar halaman web, sambil memungkinkan browser dan perangkat yang lebih kuat untuk memiliki tampilan yang lebih kaya. File JavaScript dan CSS yang disertakan dengan jQuery Mobile menata banyak elemen agar sesuai dengan browser seluler tanpa membuat perubahan markup apa pun.

Di bagian ini Anda akan menginstal paket jQuery.Mobile.MVC NuGet, yang menginstal jQuery Mobile dan widget view-switcher.

Untuk memulai, hapus file Shared\_Layout.Mobile.cshtml dan Shared\_Layout.iPhone.cshtml yang Anda buat sebelumnya.

Ganti nama file Views\Home\AllTags.Mobile.cshtml dan Views\Home\AllTags.iPhone.cshtml menjadi Views\Home\AllTags.iPhone.cshtml.hide dan Views\Home\AllTags.Mobile.cshtml.hide. Karena file tidak lagi memiliki ekstensi .cshtml , file tidak akan digunakan oleh runtime MVC ASP.NET untuk merender tampilan AllTags .

Instal paket jQuery.Mobile.MVC NuGet dengan melakukan ini:

1. Dari menu Alat , pilih Manajer Paket NuGet, lalu pilih Konsol Manajer Paket.

   

2. Di Konsol Manajer Paket, masukkan Install-Package jQuery.Mobile.MVC -version 1.0.0

Gambar berikut menunjukkan file yang ditambahkan dan diubah ke proyek MvcMobile oleh paket NuGet jQuery.Mobile.MVC. File yang ditambahkan telah [tambahkan] ditambahkan setelah nama file. Gambar tidak menampilkan file GIF dan PNG yang ditambahkan ke folder Content\images .

Paket NuGet jQuery.Mobile.MVC menginstal yang berikut:

• File App_Start\BundleMobileConfig.cs , yang diperlukan untuk mereferensikan file jQuery JavaScript dan CSS yang ditambahkan. Anda harus mengikuti petunjuk di bawah ini dan mereferensikan bundel seluler yang ditentukan dalam file ini.
• file CSS jQuery Mobile.
• Widget ViewSwitcher pengontrol (Pengontrol\ViewSwitcherController.cs).
• file JavaScript jQuery Mobile.
• File tata letak gaya jQuery Mobile (Views\Shared\_Layout.Mobile.cshtml).
• Tampilan parsial pengalih tampilan (MvcMobile\Views\Shared\_ViewSwitcher.cshtml) yang menyediakan tautan di bagian atas setiap halaman untuk beralih dari tampilan desktop ke tampilan seluler dan sebaliknya.
• Beberapa file gambar.png dan .gif di folder Content\images .

Buka file Global.asax dan tambahkan kode berikut sebagai baris Application_Start terakhir metode.

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

Kode berikut menunjukkan file Global.asax lengkap.

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Catatan

Jika Anda menggunakan Internet Explorer 9 dan tidak melihat BundleMobileConfig garis di atas dalam sorotan kuning, klik tombol Tampilan Kompatibilitas di IE untuk membuat perubahan ikon dari kerangka  ke warna solid . Atau Anda dapat melihat tutorial ini di FireFox atau Chrome.

Buka file MvcMobile\Views\Shared\_Layout.Mobile.cshtml dan tambahkan markup berikut langsung setelah Html.Partial panggilan:

<div data-role="header" align="center">
    @Html.ActionLink("Home", "Index", "Home")
    @Html.ActionLink("Date", "AllDates")
    @Html.ActionLink("Speaker", "AllSpeakers")
    @Html.ActionLink("Tag", "AllTags")
</div>

File MvcMobile\Views\Shared\_Layout.Mobile.cshtml lengkap ditunjukkan di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
</head>
<body>

    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
        <div data-role="header" align="center">
            @Html.ActionLink("Home", "Index", "Home")
            @Html.ActionLink("Date", "AllDates")
            @Html.ActionLink("Speaker", "AllSpeakers")
            @Html.ActionLink("Tag", "AllTags")
        </div>
        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()
        </div>

    </div>

</body>
</html>

Bangun aplikasi, dan di emulator browser seluler Anda telusuri ke tampilan AllTags . Anda lihat yang berikut ini:

Catatan

Anda dapat men-debug kode khusus seluler dengan mengatur string agen pengguna untuk IE atau Chrome ke iPhone lalu menggunakan alat pengembang F-12. Jika browser seluler Anda tidak menampilkan tautan Beranda, Pembicara, Tag, dan Tanggal sebagai tombol, referensi ke skrip jQuery Mobile dan file CSS mungkin tidak benar.

Selain perubahan gaya, Anda melihat Menampilkan tampilan seluler dan tautan yang memungkinkan Anda beralih dari tampilan seluler ke tampilan desktop. Pilih tautan tampilan Desktop , dan tampilan desktop ditampilkan.

Tampilan desktop tidak menyediakan cara untuk langsung menavigasi kembali ke tampilan seluler. Anda akan memperbaikinya sekarang. Buka file Views\Shared\_Layout.cshtml . Tepat di bawah elemen halaman body , tambahkan kode berikut, yang merender widget view-switcher:

@Html.Partial("_ViewSwitcher")

Refresh tampilan AllTags di browser seluler. Anda sekarang dapat menavigasi antara tampilan desktop dan seluler.

Catatan

Catatan debug: Anda dapat menambahkan kode berikut ke akhir Views\Shared\_ViewSwitcher.cshtml untuk membantu men-debug tampilan saat menggunakan browser yang diatur string agen pengguna ke perangkat seluler.

else
{
     @:Not Mobile/Get
}

dan menambahkan judul berikut ke file Views\Shared\_Layout.cshtml .

<h1> Non Mobile Layout MVC4 Conference </h1>

Telusuri ke halaman AllTags di browser desktop. Widget pengalih tampilan tidak ditampilkan di browser desktop karena hanya ditambahkan ke halaman tata letak seluler. Nanti dalam tutorial Anda akan melihat bagaimana Anda dapat menambahkan widget view-switcher ke tampilan desktop.

Meningkatkan Daftar Pembicara

Di browser seluler, pilih tautan Speaker . Karena tidak ada tampilan seluler (AllSpeakers.Mobile.cshtml), tampilan speaker default (AllSpeakers.cshtml) dirender menggunakan tampilan tata letak seluler (_Layout.Mobile.cshtml).

Anda dapat menonaktifkan tampilan default (non-seluler) secara global dari penyajian di dalam tata letak seluler dengan mengatur RequireConsistentDisplayMode ke true dalam file Views\_ViewStart.cshtml , seperti ini:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}

Ketika RequireConsistentDisplayMode diatur ke true, tata letak seluler (_Layout.Mobile.cshtml) hanya digunakan untuk tampilan seluler. (Artinya, file tampilan adalah dari formulir **ViewName. Mobile.cshtml.) Anda mungkin ingin mengatur RequireConsistentDisplayMode ke true jika tata letak seluler Anda tidak berfungsi dengan baik dengan tampilan non-seluler Anda. Cuplikan layar di bawah ini menunjukkan bagaimana halaman Pembicara merender saat RequireConsistentDisplayMode diatur ke true.

Anda dapat menonaktifkan mode tampilan yang konsisten dalam tampilan dengan mengatur RequireConsistentDisplayMode ke false dalam file tampilan. Markup berikut dalam kumpulan RequireConsistentDisplayMode file Views\Home\AllSpeakers.cshtml ke false:

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = false;
}

Membuat Tampilan Speaker Seluler

Seperti yang baru saja Anda lihat, tampilan Speaker dapat dibaca, tetapi tautannya kecil dan sulit untuk mengetuk perangkat seluler. Di bagian ini, Anda akan membuat tampilan Speaker khusus seluler yang terlihat seperti aplikasi seluler modern — menampilkan tautan besar yang mudah di-tap dan berisi kotak pencarian untuk menemukan speaker dengan cepat.

Salin AllSpeakers.cshtml ke AllSpeakers.Mobile.cshtml. Buka file AllSpeakers.Mobile.cshtml dan hapus <h2> elemen judul.

<ul> Dalam tag , tambahkan data-role atribut dan atur nilainya ke listview. Seperti atribut lainnyadata-*, data-role="listview" membuat item daftar besar lebih mudah diketam. Seperti inilah markup yang telah selesai:

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
}
<ul data-role="listview">
    @foreach(var speaker in Model) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

Refresh browser seluler. Tampilan yang diperbarui terlihat seperti ini:

Meskipun tampilan seluler telah meningkat, sulit untuk menavigasi daftar panjang pembicara. Untuk memperbaikinya, dalam <ul> tag , tambahkan data-filter atribut dan atur ke true. Kode di bawah ini menunjukkan ul markup.

<ul data-role="listview" data-filter="true">

Gambar berikut menunjukkan kotak filter pencarian di bagian atas halaman yang dihasilkan dari data-filter atribut .

Saat Anda mengetik setiap huruf di kotak pencarian, jQuery Mobile memfilter daftar yang ditampilkan seperti yang ditunjukkan pada gambar di bawah ini.

Meningkatkan Daftar Tag

Seperti tampilan Speaker default, tampilan Tag dapat dibaca, tetapi tautannya kecil dan sulit diketuk pada perangkat seluler. Di bagian ini, Anda akan memperbaiki tampilan Tag dengan cara yang sama seperti Anda memperbaiki tampilan Speaker .

Hapus akhiran "sembunyikan" ke file Views\Home\AllTags.Mobile.cshtml.hide sehingga namanya Views \Home\AllTags.Mobile.cshtml. Buka file yang diganti namanya dan hapus <h2> elemen .

data-role Tambahkan atribut dan data-filter ke tag , seperti yang ditunjukkan <ul> di sini:

<ul data-role="listview" data-filter="true">

Gambar di bawah ini menunjukkan pemfilteran halaman tag pada huruf J.

Meningkatkan Daftar Tanggal

Anda dapat meningkatkan tampilan Tanggal seperti meningkatkan tampilan Speaker dan Tag , sehingga lebih mudah digunakan di perangkat seluler.

Salin file Views\Home\AllDates.cshtml ke Views\Home\AllDates.Mobile.cshtml. Buka file baru dan hapus <h2> elemen .

Tambahkan data-role="listview" ke <ul> tag , seperti ini:

<ul data-role="listview">

Gambar di bawah ini menunjukkan seperti apa halaman Tanggal dengan data-role atribut di tempatnya.

Ganti konten file Views\Home\AllDates.Mobile.cshtml dengan kode berikut:

@model IEnumerable<DateTime>
@{
    ViewBag.Title = "All dates";
    DateTime lastDay = default(DateTime);
}
<ul data-role="listview">
    @foreach(var date in Model) {
        if (date.Date != lastDay) {
            lastDay = date.Date;
            <li data-role="list-divider">@date.Date.ToString("ddd, MMM dd")</li>
        }
        <li>@Html.ActionLink(date.ToString("h:mm tt"), "SessionsByDate", new { date })</li>
    }
</ul>

Kode ini mengelompokkan semua sesi menurut hari. Ini membuat pembagi daftar untuk setiap hari baru, dan mencantumkan semua sesi untuk setiap hari di bawah pembagi. Berikut tampilannya ketika kode ini berjalan:

Meningkatkan Tampilan SessionsTable

Di bagian ini, Anda akan membuat tampilan sesi khusus seluler. Perubahan yang kita buat akan lebih luas daripada dalam tampilan lain yang telah kita buat.

Di browser seluler, ketuk tombol Speaker , lalu masukkan Sc di kotak pencarian.

Ketuk tautan Scott Hanselman .

Seperti yang Anda lihat, tampilan sulit dibaca di browser seluler. Kolom tanggal sulit dibaca dan kolom tag berada di luar tampilan. Untuk memperbaikinya, salin Views\Home\SessionsTable.cshtml ke Views\Home\SessionsTable.Mobile.cshtml, lalu ganti konten file dengan kode berikut:

@using MvcMobile.Models
@model IEnumerable<Session>

<ul data-role="listview">
    @foreach(var session in Model) {
        <li>
            <a href="@Url.Action("SessionByCode", new { session.Code })">
                <h3>@session.Title</h3>
                <p><strong>@string.Join(", ", session.Speakers)</strong></p>
                <p>@session.DateText</p>
            </a>
        </li>                                           
    }    
</ul>

Kode menghapus kolom ruangan dan tag, dan memformat judul, pembicara, dan tanggal secara vertikal, sehingga semua informasi ini dapat dibaca di browser seluler. Gambar di bawah ini mencerminkan perubahan kode.

Meningkatkan Tampilan SessionByCode

Terakhir, Anda akan membuat tampilan khusus seluler dari tampilan SessionByCode . Di browser seluler, ketuk tombol Speaker , lalu masukkan Sc di kotak pencarian.

Ketuk tautan Scott Hanselman . Sesi Scott Hanselman ditampilkan.

Pilih Gambaran Umum tautan MS Web Stack of Love .

Tampilan desktop default baik-baik saja, tetapi Anda dapat meningkatkannya.

Salin Views\Home\SessionByCode.cshtml ke Views\Home\SessionByCode.Mobile.cshtml dan ganti konten file Views\Home\SessionByCode.Mobile.cshtml dengan markup berikut:

@model MvcMobile.Models.Session

@{
    ViewBag.Title = "Session details";
}
<h2>@Model.Title</h2>
<p>
    <strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Speakers</li>
    @foreach (var speaker in Model.Speakers) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

<p>@Model.Description</p>
<h4>Code: @Model.Code</h4>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Tags</li>
    @foreach (var tag in Model.Tags) {
        <li>@Html.ActionLink(tag, "SessionsByTag", new { tag })</li>
    }
</ul>

Markup baru menggunakan data-role atribut untuk meningkatkan tata letak tampilan.

Refresh browser seluler. Gambar berikut mencerminkan perubahan kode yang baru saja Anda buat:

Pembungkusan dan Tinjauan

Tutorial ini telah memperkenalkan fitur seluler baru ASP.NET Pratinjau Pengembang MVC 4. Fitur seluler meliputi:

• Kemampuan untuk mengganti tata letak, tampilan, dan tampilan parsial, baik secara global maupun untuk tampilan individual.
• Kontrol atas tata letak dan penegakan penimpaan parsial menggunakan RequireConsistentDisplayMode properti .
• Widget pengalih tampilan untuk tampilan seluler daripada juga dapat ditampilkan dalam tampilan desktop.
• Dukungan untuk mendukung browser tertentu, seperti browser iPhone.

Lihat juga

• situs jQuery Mobile .
• Gambaran Umum jQuery Mobile
• Rekomendasi W3C Praktik Terbaik Aplikasi Web Seluler
• Rekomendasi Kandidat W3C untuk kueri media