ASP.NET MVC 4 Mobil Özellikler

tarafından Rick Anderson

Azure Web Sitelerinde ASP.NET MVC 5 Mobil Web Uygulaması Dağıtma sayfasında kod örnekleri içeren bu öğreticinin MVC 5 sürümü artık vardır.

Bu öğreticide, bir ASP.NET MVC 4 Web uygulamasında mobil özelliklerle çalışma hakkında temel bilgiler öğretilecektir. Bu öğretici için Visual Studio Express 2012 veya Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer veya VWD") kullanabilirsiniz. Zaten varsa Visual Studio'nun profesyonel sürümünü kullanabilirsiniz.

Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun.

• Visual Studio Express 2012 (önerilir) veya Visual Studio Web Developer Express SP1. Visual Studio 2012 ASP.NET MVC 4 içerir. Visual Web Developer 2010 kullanıyorsanız ASP.NET MVC 4'ü yüklemeniz gerekir.

Ayrıca bir mobil tarayıcı öykünücüsü gerekir. Aşağıdakilerden herhangi biri çalışır:

• Windows 7 Telefon Öykünücüsü. (Bu, bu öğreticideki ekran görüntülerinin çoğunda kullanılan öykünücüdür.)
• iPhone'a öykünmek için kullanıcı aracısı dizesini değiştirin. Bu blog girişlerine bakın.
• Opera Mobile Öykünücüsü
• Kullanıcı aracısının iPhone olarak ayarlandığı Apple Safari. Safari'deki kullanıcı aracısını "iPhone" olarak ayarlama hakkında yönergeler için, David Alison'ın blogunda Safari'nin IE gibi davranmasına izin verme konusuna bakın.

C# kaynak koduna sahip Visual Studio projeleri şu konuya eşlik edebilir:

• Başlangıç projesi indirme
• Tamamlanan proje indirme

Oluşturacakların

Bu öğretici için başlangıç projesinde sağlanan basit konferans listeleme uygulamasına mobil özellikler ekleyeceksiniz. Aşağıdaki ekran görüntüsünde , Windows 7 Phone Öykünücüsü'nde görüldüğü gibi tamamlanmış uygulamanın etiketler sayfası gösterilmektedir. Klavye girişini basitleştirmek için bkz. Windows Phone Öykünücüsü için Klavye Eşleme.

Kullanıcı aracısı dizesini ayarlayarak mobil uygulamanızı geliştirmek için Internet Explorer sürüm 9 veya 10, FireFox veya Chrome'u kullanabilirsiniz. Aşağıdaki görüntüde, iPhone'a öykünen Internet Explorer'ın kullanıldığı tamamlanmış öğretici gösterilmektedir. Uygulamanızda hata ayıklamaya yardımcı olması için Internet Explorer F-12 geliştirici araçlarını ve Fiddler aracını kullanabilirsiniz.

Öğreneceğiniz Beceriler

Şunları öğreneceksiniz:

• ASP.NET MVC 4 şablonlarının mobil cihazlarda görüntüyü geliştirmek için HTML5 viewport özniteliğini ve uyarlamalı işlemeyi kullanma şekli.
• Mobil cihazlara özgü görünümler oluşturma.
• Kullanıcıların mobil görünüm ile uygulamanın masaüstü görünümü arasında geçiş yapmasını sağlayan bir görünüm değiştirici oluşturma.

Başlarken

Başlangıç projesi için konferans listeleme uygulamasını aşağıdaki bağlantıyı kullanarak indirin: İndir. Ardından Windows Gezgini'nde MvcMobile.zip dosyasına sağ tıklayın ve Özellikler'i seçin. MvcMobile.zip Özellikleri iletişim kutusunda Engeli Kaldır düğmesini seçin. (Engellemeyi kaldırma, web'den indirdiğiniz bir .zip dosyası kullanmaya çalıştığınızda oluşan bir güvenlik uyarısının oluşmasını önler.)

MvcMobile.zip dosyasına sağ tıklayın ve dosyanın sıkıştırmasını açmak için Tümünü Ayıkla'yı seçin. Visual Studio'da MvcMobile.sln dosyasını açın.

Uygulamayı çalıştırmak için CTRL+F5 tuşlarına basın; bu, uygulamayı masaüstü tarayıcınızda görüntüler. Mobil tarayıcı öykünücünüzü başlatın, konferans uygulamasının URL'sini öykünücüye kopyalayın ve ardından Etikete göre gözat bağlantısına tıklayın. Windows Phone Öykünücüsü kullanıyorsanız, URL çubuğuna tıklayın ve klavye erişimi almak için Duraklat tuşuna basın. Aşağıdaki resimde AllTags görünümü gösterilmektedir ( Etikete göre gözat'ı seçerek).

Ekran bir mobil cihazda çok okunabilir. ASP.NET bağlantısını seçin.

ASP.NET etiket görünümü çok karışık. Örneğin , Tarih sütununu okumak çok zordur. Öğreticinin ilerleyen bölümlerinde , AllTags görünümünün özellikle mobil tarayıcılar için olan ve görüntüyü okunabilir hale getiren bir sürümünü oluşturacaksınız.

Not: Şu anda mobil önbelleğe alma altyapısında bir hata var. Üretim uygulamaları için Fixed DisplayModes nugget paketini yüklemeniz gerekir. Düzeltmeyle ilgili ayrıntılar için bkz. ASP.NET MVC 4 Mobile Önbelleğe Alma Hatası Düzeltildi .

CSS Medya Sorguları

CSS medya sorguları, medya türleri için CSS'nin bir uzantısıdır. Belirli tarayıcılar (kullanıcı aracıları) için varsayılan CSS kurallarını geçersiz kılan kurallar oluşturmanıza olanak tanır. CSS için mobil tarayıcıları hedefleyen yaygın bir kural, en büyük ekran boyutunu tanımlamaktır. Yeni bir ASP.NET MVC 4 Internet projesi oluşturduğunuzda oluşturulan Content\Site.css dosyası aşağıdaki medya sorgusunu içerir:

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

Tarayıcı penceresi 850 piksel veya daha küçükse, bu medya bloğunun içindeki CSS kurallarını kullanır. Bunun gibi CSS medya sorgularını, küçük tarayıcılarda (mobil tarayıcılar gibi) HTML içeriğinin masaüstü tarayıcıların daha geniş ekranları için tasarlanmış varsayılan CSS kurallarından daha iyi görüntülenmesini sağlamak için kullanabilirsiniz.

Viewport Meta Etiketi

Çoğu mobil tarayıcı, mobil cihazın gerçek genişliğinden çok daha büyük bir sanal tarayıcı penceresi genişliği ( görünüm penceresi) tanımlar. Bu, mobil tarayıcıların web sayfasının tamamını sanal ekranın içine sığdırmasını sağlar. Kullanıcılar daha sonra ilginç içeriği yakınlaştırabilir. Ancak, görünüm penceresi genişliğini gerçek cihaz genişliğine ayarlarsanız, içerik mobil tarayıcıya sığdığından yakınlaştırma gerekmez.

ASP.NET MVC 4 düzen dosyasındaki görünüm <meta> penceresi etiketi, görünüm penceresi değerini cihaz genişliğine ayarlar. Aşağıdaki satırda, ASP.NET MVC 4 düzen dosyasındaki görünüm penceresi <meta> etiketi gösterilmektedir.

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

CSS Medya Sorgularının ve Viewport Meta Etiketinin Etkisini inceleme

Düzenleyicide Views\Shared\_Layout.cshtml dosyasını açın ve viewport <meta> etiketini açıklama satırı yapın. Aşağıdaki işaretlemede açıklama satırı gösterilir.

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

Düzenleyicide MvcMobile\Content\Site.css dosyasını açın ve medya sorgusundaki en yüksek genişliği sıfır piksel olarak değiştirin. Bu, CSS kurallarının mobil tarayıcılarda kullanılmasını engeller. Aşağıdaki satırda değiştirilmiş medya sorgusu gösterilmektedir:

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

Değişikliklerinizi kaydedin ve mobil tarayıcı öykünücüsunda Konferans uygulamasına göz atın. Aşağıdaki görüntüdeki küçük metin, görünüm penceresi <meta> etiketini kaldırmanın sonucudur. Görünüm penceresi <meta> etiketi olmadan tarayıcı varsayılan görünüm penceresi genişliğine (çoğu mobil tarayıcı için 850 piksel veya daha geniş) uzaklaştırılır.

Değişikliklerinizi geri alın; düzen dosyasındaki görünüm penceresi <meta> etiketini açın ve medya sorgusunu Site.css dosyasındaki 850 piksele geri yükleyin. Mobil uyumlu ekranın geri yüklendiğini doğrulamak için değişikliklerinizi kaydedin ve mobil tarayıcıyı yenileyin.

Viewport <meta> etiketi ve CSS medya sorgusu ASP.NET MVC 4'e özgü değildir ve bu özelliklerden herhangi bir web uygulamasında yararlanabilirsiniz. Ancak artık MVC 4 projesi ASP.NET yeni bir proje oluşturduğunuzda oluşturulan dosyalarda yerleşik olarak bulunurlar.

Görünüm penceresi <meta> etiketi hakkında daha fazla bilgi için bkz. İki görünüm penceresi hikayesi — bölüm iki.

Sonraki bölümde, mobil tarayıcıya özgü görünümleri nasıl sağlayabileceklerini göreceksiniz.

Görünümleri, Düzenleri ve Kısmi Görünümleri Geçersiz Kılma

ASP.NET MVC 4'teki önemli bir yeni özellik, genel olarak mobil tarayıcılar, tek bir mobil tarayıcı veya belirli bir tarayıcı için tüm görünümleri (düzenler ve kısmi görünümler dahil) geçersiz kılmanızı sağlayan basit bir mekanizmadır. Mobil kullanıma özgü bir görünüm sağlamak için, bir görünüm dosyasını kopyalayabilir ve ekleyebilirsiniz . Mobil olarak dosya adına geçin. Örneğin, bir mobil Dizin görünümü oluşturmak için Views\Home\Index.cshtml dosyasını Views\Home\Index.Mobile.cshtml dosyasına kopyalayın.

Bu bölümde, mobil cihazlara özgü bir düzen dosyası oluşturacaksınız.

Başlamak için Views\Shared\_Layout.cshtml dosyasını Views\Shared\_Layout.Mobile.cshtml konumuna kopyalayın. _Layout.Mobile.cshtml dosyasını açın ve MVC4 Konferansı başlığını Konferans (Mobil) olarak değiştirin.

Her Html.ActionLink çağrıda, actionlink bağlantısındaki "Gözatma ölçütü" öğesini kaldırın. Aşağıdaki kod, mobil düzen dosyasının tamamlanmış gövde bölümünü gösterir.

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

Views\Home\AllTags.cshtml dosyasını Views\Home\AllTags.Mobile.cshtml dosyasına kopyalayın. Yeni dosyayı açın ve öğesini "Etiketler" olan "Etiketler (M)" olarak değiştirin <h2> :

<h2>Tags (M)</h2>

Masaüstü tarayıcısı ve mobil tarayıcı öykünücüsü kullanarak etiketler sayfasına göz atın. Mobil tarayıcı öykünücüsü, yaptığınız iki değişikliği gösterir.

Buna karşılık, masaüstü ekranı değişmemiştir.

Browser-Specific Görünümleri

Mobil ve masaüstüne özgü görünümlere ek olarak, tek bir tarayıcı için görünümler oluşturabilirsiniz. Örneğin, özellikle iPhone tarayıcısına yönelik görünümler oluşturabilirsiniz. Bu bölümde, iPhone tarayıcısı için bir düzen ve AllTags görünümünün iPhone sürümünü oluşturacaksınız.

Global.asax dosyasını açın ve yöntemine Application_Start aşağıdaki kodu ekleyin.

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

Bu kod, gelen her istekle eşleştirilecek "iPhone" adlı yeni bir görüntüleme modunu tanımlar. Gelen istek tanımladığınız koşulla eşleşiyorsa (yani kullanıcı aracısı "iPhone" dizesini içeriyorsa), ASP.NET MVC adında "iPhone" soneki bulunan görünümleri arar.

Kodda sağ tıklayın DefaultDisplayMode, Çözümle'yi seçin ve ardından öğesini seçin using System.Web.WebPages;. Bu, ve DefaultDisplayMode türlerinin System.Web.WebPages tanımlandığı DisplayModes ad alanına bir başvuru ekler.

Alternatif olarak, aşağıdaki satırı using dosyanın bölümüne el ile de ekleyebilirsiniz.

using System.Web.WebPages;

Global.asax dosyasının tüm içeriği aşağıda gösterilmiştir.

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);
        }
    }
}

Değişiklikleri kaydedin. MvcMobile\Views\Shared\_Layout.Mobile.cshtml dosyasını MvcMobile\Views\Shared\_Layout.iPhone.cshtml dosyasına kopyalayın. Yeni dosyayı açın ve başlığı olarak Conference (Mobile)Conference (iPhone)değiştirinh1.

MvcMobile\Views\Home\AllTags.Mobile.cshtml dosyasını MvcMobile\Views\Home\AllTags.iPhone.cshtml dosyasına kopyalayın. Yeni dosyada öğesini "Tags (M)" yerine "Tags (iPhone)" olarak değiştirin <h2> .

Uygulamayı çalıştırın. Mobil tarayıcı öykünücüsü çalıştırın, kullanıcı aracısının "iPhone" olarak ayarlandığından emin olun ve AllTags görünümüne göz atın. Aşağıdaki ekran görüntüsünde Safari tarayıcısında işlenen AllTags görünümü gösterilmektedir. Windows için Safari'i indirebilirsiniz.

Bu bölümde, mobil düzenlerin ve görünümlerin nasıl oluşturulacağını ve iPhone gibi belirli cihazlar için düzenlerin ve görünümlerin nasıl oluşturulacağını gördük. Sonraki bölümde daha etkileyici mobil görünümler için jQuery Mobile'ın nasıl yararlanabileceğinizi göreceksiniz.

jQuery Mobile kullanma

jQuery Mobile kitaplığı, tüm önemli mobil tarayıcılarda çalışan bir kullanıcı arabirimi çerçevesi sağlar. jQuery Mobile, CSS ve JavaScript'i destekleyen mobil tarayıcılara aşamalı geliştirme uygular. Aşamalı geliştirme, tüm tarayıcıların bir web sayfasının temel içeriğini görüntülemesini sağlarken, daha güçlü tarayıcıların ve cihazların daha zengin bir ekrana sahip olmasını sağlar. jQuery Mobile stiline dahil edilen JavaScript ve CSS dosyaları, işaretleme değişikliği yapmadan mobil tarayıcılara sığacak birçok öğe içerir.

Bu bölümde jQuery Mobile'ı ve bir görünüm değiştirici pencere öğesini yükleyen jQuery.Mobile.MVC NuGet paketini yükleyeceksiniz.

Başlamak için daha önce oluşturduğunuz Shared\_Layout.Mobile.cshtml ve Shared\_Layout.iPhone.cshtml dosyalarını silin.

Views\Home\AllTags.Mobile.cshtml and Views\Home\AllTags.iPhone.cshtml dosyalarını Views\Home\AllTags.iPhone.cshtml.hide ve Views\Home\AllTags.Mobile.cshtml.hide olarak yeniden adlandırın. Dosyalar artık .cshtml uzantısına sahip olmadığından, ASP.NET MVC çalışma zamanı tarafından AllTags görünümünü işlemek için kullanılmazlar.

Bunu yaparak jQuery.Mobile.MVC NuGet paketini yükleyin:

1. Araçlar menüsünde NuGet Paket Yöneticisi'ni ve ardından Paket Yöneticisi Konsolu'nu seçin.

   

2. Paket Yöneticisi Konsolu'naInstall-Package jQuery.Mobile.MVC -version 1.0.0

Aşağıdaki görüntüde, NuGet jQuery.Mobile.MVC paketi tarafından MvcMobile projesine eklenen ve değiştirilen dosyalar gösterilmektedir. Eklenen dosyaların sonuna [add] eklenir. Görüntüde Content\images klasörüne eklenen GIF ve PNG dosyaları gösterilmiyor.

jQuery.Mobile.MVC NuGet paketi aşağıdakileri yükler:

• eklenen jQuery JavaScript ve CSS dosyalarına başvurmak için gereken App_Start\BundleMobileConfig.cs dosyası. Aşağıdaki yönergeleri izlemeniz ve bu dosyada tanımlanan mobil pakete başvurmanız gerekir.
• jQuery Mobile CSS dosyaları.
• Denetleyici ViewSwitcher pencere öğesi (Controllers\ViewSwitcherController.cs).
• jQuery Mobile JavaScript dosyaları.
• jQuery Mobile stili düzen dosyası (Views\Shared\_Layout.Mobile.cshtml).
• Masaüstü görünümünden mobil görünüme geçiş yapmak için her sayfanın en üstünde bir bağlantı sağlayan bir görünüm değiştirici kısmi görünüm (MvcMobile\Views\Shared\_ViewSwitcher.cshtml).
• Content\images klasöründe çeşitli.png ve .gif görüntü dosyaları.

Global.asax dosyasını açın ve yönteminin son satırı Application_Start olarak aşağıdaki kodu ekleyin.

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

Aşağıdaki kod, global.asax dosyasının tamamını gösterir.

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);
        }
    }
}

MvcMobile\Views\Shared\_Layout.Mobile.cshtml dosyasını açın ve aramanın hemen arkasına aşağıdaki işaretlemeyi Html.Partial ekleyin:

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

MvcMobile\Views\Shared\_Layout.Mobile.cshtml dosyasının tamamı aşağıda gösterilmiştir:

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

Uygulamayı derleyin ve mobil tarayıcı öykünücünüzde AllTags görünümüne göz atın. Aşağıdakileri görürsünüz:

Stil değişikliklerine ek olarak, Mobil görünümü görüntüleme'yi ve mobil görünümden masaüstü görünümüne geçmenizi sağlayan bir bağlantı görürsünüz. Masaüstü görünümü bağlantısını seçtiğinizde masaüstü görünümü görüntülenir.

Masaüstü görünümü, doğrudan mobil görünüme geri dönmek için bir yol sağlamaz. Bunu şimdi düzelteceksin. Views\Shared\_Layout.cshtml dosyasını açın. Sayfa body öğesinin hemen altına view-switcher pencere öğesini işleyen aşağıdaki kodu ekleyin:

@Html.Partial("_ViewSwitcher")

Mobil tarayıcıda AllTags görünümünü yenileyin. Artık masaüstü ve mobil görünümler arasında gezinebilirsiniz.

else
{
     @:Not Mobile/Get
}

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

Masaüstü tarayıcısında AllTags sayfasına göz atın. Görünüm değiştirici pencere öğesi, yalnızca mobil düzen sayfasına eklendiğinden masaüstü tarayıcısında görüntülenmez. Öğreticinin ilerleyen bölümlerinde görünüm değiştirici pencere öğesini masaüstü görünümüne nasıl ekleyebileceğinizi göreceksiniz.

Konuşmacı listesini geliştirme

Mobil tarayıcıda Hoparlörler bağlantısını seçin. Mobil görünüm (AllSpeakers.Mobile.cshtml) olmadığından, varsayılan hoparlör ekranı (AllSpeakers.cshtml) mobil düzen görünümü (_Layout.Mobile.cshtml) kullanılarak işlenir.

Views\_ViewStart.cshtml dosyasında şu şekilde ayarlayarak RequireConsistentDisplayMode varsayılan (mobil olmayan) görünümün mobil düzen içinde işlenmesini true genel olarak devre dışı bırakabilirsiniz:

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

RequireConsistentDisplayMode olarak ayarlandığındatrue, mobil düzen (_Layout.Mobile.cshtml) yalnızca mobil görünümler için kullanılır. (Yani, görünüm dosyası **ViewName biçimindedir. Mobile.cshtml.) Mobil düzeniniz mobil olmayan görünümlerinizle düzgün çalışmıyorsa olarak ayarlamak RequireConsistentDisplayModetrue isteyebilirsiniz. Aşağıdaki ekran görüntüsü, Hoparlörler sayfası olarak ayarlandığında truenasıl işleniyor RequireConsistentDisplayMode gösterir.

Görünüm dosyasında olarak ayarlayarak RequireConsistentDisplayModefalse bir görünümde tutarlı görüntüleme modunu devre dışı bırakabilirsiniz. Views\Home\AllSpeakers.cshtml dosyasında aşağıdaki işaretleme olarak falseayarlanmaktadırRequireConsistentDisplayMode:

@model IEnumerable<string>

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

Mobil Hoparlörler Görünümü Oluşturma

Az önce gördüğünüz gibi Hoparlörler görünümü okunabilir, ancak bağlantılar küçük ve bir mobil cihaza dokunmak zordur. Bu bölümde modern bir mobil uygulama gibi görünen, mobil cihazlara özgü hoparlörler görünümü oluşturacaksınız. Bu görünümde büyük, dokunması kolay bağlantılar görüntülenir ve hoparlörleri hızlı bir şekilde bulmak için bir arama kutusu bulunur.

AllSpeakers.cshtml dosyasını AllSpeakers.Mobile.cshtml dosyasına kopyalayın. AllSpeakers.Mobile.cshtml dosyasını açın ve başlık öğesini kaldırın<h2>.

etiketinde <ul> özniteliğini data-role ekleyin ve değerini olarak listviewayarlayın. Diğer data-* öznitelikler gibi, data-role="listview" büyük liste öğelerine dokunmayı kolaylaştırır. Tamamlanmış işaretleme şöyle görünür:

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

Mobil tarayıcıyı yenileyin. Güncelleştirilmiş görünüm şöyle görünür:

Mobil görünüm geliştirilmiş olsa da, uzun hoparlör listesinde gezinmek zordur. Bunu düzeltmek için etiketinde <ul> özniteliğini data-filter ekleyin ve olarak trueayarlayın. Aşağıdaki kod işaretlemeyi ul gösterir.

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

Aşağıdaki görüntüde, sayfanın üst kısmında bulunan ve özniteliğinden kaynaklanan arama filtresi kutusu gösterilmektedir data-filter .

Arama kutusuna her harfi yazdığınızda, jQuery Mobile görüntülenen listeyi aşağıdaki resimde gösterildiği gibi filtreler.

Etiket Listesini Geliştirme

Varsayılan Hoparlörler görünümünde olduğu gibi Etiketler görünümü de okunabilir ancak bağlantılar küçük ve bir mobil cihaza dokunmak zordur. Bu bölümde, Etiketler görünümünü Hoparlörler görünümünü düzeltdiğiniz gibi düzelteceksiniz.

Views\Home\AllTags.Mobile.cshtml.hide dosyasının "gizle" sonekini kaldırın; böylece ad Views\Home\AllTags.Mobile.cshtml olur. Yeniden adlandırılan dosyayı açın ve öğesini kaldırın <h2> .

data-role Burada gösterildiği gibi etiketine <ul> ve data-filter özniteliklerini ekleyin:

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

Aşağıdaki resimde, harfine Jfiltre uygulanmış etiketler sayfası gösterilmektedir.

Tarih listesini geliştirme

Tarihler görünümünü, Hoparlörler ve Etiketler görünümlerini iyileştirdiğiniz gibi geliştirebilirsiniz, böylece mobil cihazda daha kolay kullanılabilir.

Views\Home\AllDates.cshtml dosyasını Views\Home\AllDates.Mobile.cshtml dosyasına kopyalayın. Yeni dosyayı açın ve öğesini kaldırın <h2> .

Etikete <ul> şunun gibi ekleyindata-role="listview":

<ul data-role="listview">

Aşağıdaki resimde Date sayfasının özniteliği yerinde olarak nasıl göründüğü data-role gösterilmektedir.

Views\Home\AllDates.Mobile.cshtml dosyasının içeriğini aşağıdaki kodla değiştirin:

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

Bu kod tüm oturumları günlere göre gruplandırıyor. Her yeni gün için bir liste ayırıcı oluşturur ve her gün için tüm oturumları ayırıcı altında listeler. Bu kod çalıştırıldığında aşağıdaki gibi görünür:

SessionsTable Görünümünü Geliştirme

Bu bölümde, oturumların mobil cihazlara özgü bir görünümünü oluşturacaksınız. Yaptığımız değişiklikler oluşturduğumuz diğer görünümlerden daha kapsamlı olacaktır.

Mobil tarayıcıda Hoparlör düğmesine dokunun ve arama kutusuna girin Sc .

Scott Hanselman bağlantısına dokunun.

Gördüğünüz gibi, ekranı bir mobil tarayıcıda okumak zordur. Tarih sütununu okumak zordur ve etiketler sütunu görünümün dışındadır. Bunu düzeltmek için Views\Home\SessionsTable.cshtml dosyasını Views\Home\SessionsTable.Mobile.cshtml dosyasına kopyalayın ve dosyanın içeriğini aşağıdaki kodla değiştirin:

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

Kod, oda ve etiket sütunlarını kaldırır ve başlığı, konuşmacıyı ve tarihi dikey olarak biçimlendirerek tüm bu bilgilerin mobil tarayıcıda okunabilmesini sağlar. Aşağıdaki görüntüde kod değişiklikleri gösterilir.

SessionByCode Görünümünü Geliştirme

Son olarak, SessionByCode görünümünün mobil kullanıma özgü bir görünümünü oluşturacaksınız. Mobil tarayıcıda Hoparlör düğmesine dokunun ve arama kutusuna girin Sc .

Scott Hanselman bağlantısına dokunun. Scott Hanselman'ın oturumları görüntülenir.

MS Web Aşk Yığınına Genel Bakış bağlantısını seçin.

Varsayılan masaüstü görünümü uygundur, ancak bunu geliştirebilirsiniz.

Views\Home\SessionByCode.cshtml dosyasını Views\Home\SessionByCode.Mobile.cshtml dosyasına kopyalayın ve Views\Home\SessionByCode.Mobile.cshtml dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin:

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

Yeni işaretleme, görünümün data-role düzenini geliştirmek için özniteliğini kullanır.

Mobil tarayıcıyı yenileyin. Aşağıdaki görüntü, az önce yaptığınız kod değişikliklerini yansıtır:

Sarmalama ve Gözden Geçirme

Bu öğreticide ASP.NET MVC 4 Developer Preview'ın yeni mobil özellikleri tanıtılmıştır. Mobil özellikler şunlardır:

• Düzeni, görünümleri ve kısmi görünümleri hem genel hem de tek bir görünüm için geçersiz kılma özelliği.
• özelliğini kullanarak düzeni ve kısmi geçersiz kılma zorlamasını RequireConsistentDisplayMode denetleme.
• Mobil görünümler için masaüstü görünümlerinde görüntülenebilen görünüm değiştirici pencere öğesi.
• iPhone tarayıcısı gibi belirli tarayıcıları destekleme desteği.

Ayrıca Bkz.

• jQuery Mobile sitesi.
• jQuery Mobile'a Genel Bakış
• W3C Önerisi Mobil Web Uygulaması En İyi Yöntemleri
• Medya sorguları için W3C Aday Önerisi