ASP.NET MVC 4-Funktionen für mobile Geräte
von Rick Anderson
Es gibt jetzt eine MVC 5-Version dieses Tutorials mit Codebeispielen unter Bereitstellen einer ASP.NET mobilen MVC 5-Webanwendung auf Azure-Websites.
In diesem Tutorial erfahren Sie, wie Sie mit mobilen Features in einer ASP.NET MVC 4-Webanwendung arbeiten. In diesem Tutorial können Sie Visual Studio Express 2012 oder Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer oder VWD") verwenden. Sie können die Professional-Version von Visual Studio verwenden, wenn Sie diese bereits besitzen.
Bevor Sie beginnen, stellen Sie sicher, dass Sie die unten aufgeführten Voraussetzungen installiert haben.
- Visual Studio Express 2012 (empfohlen) oder Visual Studio Web Developer Express SP1. Visual Studio 2012 enthält ASP.NET MVC 4. Wenn Sie Visual Web Developer 2010 verwenden, müssen Sie ASP.NET MVC 4 installieren.
Sie werden auch einen Emulator für mobile Browser benötigen. Klicken Sie dazu auf einen der folgenden Links:
- Windows 7 Phone-Emulator. (Dies ist der Emulator, der in den meisten Screenshots in diesem Tutorial verwendet wird.)
- Ändern Sie die Zeichenfolge des Benutzer-Agents, um ein iPhone zu emulieren. Weitere Informationen finden Sie in diesem Blogeintrag.
- Opera Mobile Emulator
- Apple Safari , wobei der Benutzer-Agent auf iPhone festgelegt ist. Anweisungen zum Festlegen des Benutzer-Agents in Safari auf "iPhone" finden Sie im Blog von David Alison unter So lässt Safari vor, dass es sich um IE handelt.
Visual Studio-Projekte mit C#-Quellcode sind zur Ergänzung dieses Themas verfügbar:
Sie lernen Folgendes
Im Laufe dieses Tutorials fügen Sie einer einfachen Anwendung, die über das Starterprojekt bereitgestellt wird, mobile Features zur Auflistung von Konferenzdaten hinzu. Der folgende Screenshot zeigt die Seite "Tags" der abgeschlossenen Anwendung, wie im Windows 7 Phone-Emulator zu sehen. Informationen zur Vereinfachung der Tastatureingabe finden Sie unter Tastaturzuordnung für Windows Phone Emulator.
Sie können Internet Explorer Version 9 oder 10, FireFox oder Chrome verwenden, um Ihre mobile Anwendung zu entwickeln, indem Sie die Benutzer-Agent-Zeichenfolge festlegen. Die folgende Abbildung zeigt das abgeschlossene Tutorial, in dem internet-Explorer ein iPhone emuliert wird. Sie können das Internet Explorer F-12-Entwicklertools und das Fiddler-Tool verwenden, um Ihre Anwendung zu debuggen.
Erlernte Fertigkeiten
Folgendes können Sie lernen:
- Wie die ASP.NET MVC 4-Vorlagen das HTML5-Attribut
viewportund adaptives Rendering verwenden, um die Anzeige auf mobilen Geräten zu verbessern. - Erstellen mobiler Ansichten.
- Erstellen eines Ansichtsumschalters, mit dem Benutzer zwischen einer mobilen Ansicht und einer Desktopansicht der Anwendung wechseln können.
Erste Schritte
Laden Sie die Konferenzliste-Anwendung für das Startprojekt über den folgenden Link herunter: Herunterladen. Klicken Sie dann in Windows Explorer mit der rechten Maustaste auf die dateiMvcMobile.zip, und wählen Sie Eigenschaften aus. Wählen Sie im Dialogfeld MvcMobile.zip Eigenschaften die Schaltfläche Blockierung aufheben aus. (Durch diese Option wird eine Sicherheitswarnung verhindert, die angezeigt wird, wenn Sie versuchen, eine .zip -Datei zu verwenden, die Sie aus dem Internet heruntergeladen haben.)
Klicken Sie mit der rechten Maustaste auf die MvcMobile.zip Datei, und wählen Sie Alle extrahieren aus, um die Datei zu entzippen. Öffnen Sie in Visual Studio die datei MvcMobile.sln .
Drücken Sie STRG+F5, um die Anwendung auszuführen, die sie in Ihrem Desktopbrowser anzeigt. Starten Sie Ihren emulator für mobile Browser, kopieren Sie die URL für die Konferenzanwendung in den Emulator, und klicken Sie dann auf den Link Nach Tag durchsuchen . Wenn Sie den Windows Phone Emulator verwenden, klicken Sie auf die URL-Leiste, und drücken Sie die Anhalten-TASTE, um Tastaturzugriff zu erhalten. Die folgende Abbildung zeigt die Ansicht AllTags (unter Auswahl von Nach Tag durchsuchen).
Die Anzeige ist auf einem mobilen Gerät sehr gut lesbar. Wählen Sie den link ASP.NET aus.
Die ASP.NET-Tagansicht ist sehr unübersichtlich. Beispielsweise ist die Spalte Date sehr schwer zu lesen. Später im Tutorial erstellen Sie eine Version der AllTags-Ansicht , die speziell für mobile Browser geeignet ist und die Anzeige lesbar macht.
Hinweis: Derzeit liegt ein Fehler in der Mobilen Caching-Engine vor. Für Produktionsanwendungen müssen Sie das Fixed DisplayModes-Nuggetpaket installieren. Ausführliche Informationen zur Behebung finden Sie unter ASP.NET MVC 4 Mobile Caching-Fehler behoben .
CSS-Medienabfragen
CSS-Medienabfragen sind eine Erweiterung von CSS für Medientypen. Sie ermöglichen es Ihnen, Regeln zu erstellen, die die CSS-Standardregeln für bestimmte Browser (Benutzer-Agents) außer Kraft setzen. Eine gängige Regel für CSS, die auf mobile Browser abzielt, ist die Definition der maximalen Bildschirmgröße. Die Datei Content\Site.css , die beim Erstellen eines neuen ASP.NET MVC 4 Internet-Projekts erstellt wird, enthält die folgende Medienabfrage:
@media only screen and (max-width: 850px) {
Wenn das Browserfenster maximal 850 Pixel breit ist, werden die CSS-Regeln in diesem Medienblock verwendet. Sie können CSS-Medienabfragen wie diese verwenden, um eine bessere Anzeige von HTML-Inhalten in kleinen Browsern (z. B. mobilen Browsern) zu ermöglichen als die CSS-Standardregeln, die für die breitere Anzeige von Desktopbrowsern konzipiert sind.
Das Viewport-Metatag
Die meisten mobilen Browser definieren eine Breite des virtuellen Browserfensters ( viewport), die viel größer als die tatsächliche Breite des mobilen Geräts ist. Dadurch können mobile Browser die gesamte Webseite in die virtuelle Anzeige einfügen. Benutzer können dann interessante Inhalte vergrößern. Wenn Sie jedoch die Viewportbreite auf die tatsächliche Gerätebreite festlegen, ist kein Zoom erforderlich, da der Inhalt in den mobilen Browser passt.
Das Viewporttag <meta> in der ASP.NET MVC 4-Layoutdatei legt den Viewport auf die Gerätebreite fest. Die folgende Zeile zeigt das Viewporttag <meta> in der ASP.NET MVC 4-Layoutdatei.
<meta name="viewport" content="width=device-width">
Untersuchen der Auswirkung von CSS-Medienabfragen und dem Viewport-Metatag
Öffnen Sie die Datei Views\Shared\_Layout.cshtml im Editor, und kommentieren Sie das Viewport-Tag <meta> aus. Das folgende Markup zeigt die auskommentierte Zeile.
@*<meta name="viewport" content="width=device-width">*@
Öffnen Sie die Datei MvcMobile\Content\Site.css im Editor, und ändern Sie die maximale Breite in der Medienabfrage in null Pixel. Dadurch wird verhindert, dass die CSS-Regeln in mobilen Browsern verwendet werden. Die folgende Zeile zeigt die geänderte Medienabfrage:
@media only screen and (max-width: 0px) { ...
Speichern Sie Ihre Änderungen, und navigieren Sie zur Konferenzanwendung in einem mobilen Browseremulator. Der winzige Text in der folgenden Abbildung ist das Ergebnis des Entfernens des Viewport-Tags <meta> . Ohne Viewporttag <meta> verkleinert sich der Browser auf die Standardansichtsportbreite (850 Pixel oder höher für die meisten mobilen Browser).
Rückgängig machen: Heben Sie die Auskommentierung des Viewporttags <meta> in der Layoutdatei auf, und stellen Sie die Medienabfrage auf 850 Pixel in der Site.css-Datei wieder her. Speichern Sie Ihre Änderungen, und aktualisieren Sie den mobilen Browser, um zu überprüfen, ob die für Mobilgeräte geeignete Anzeige wiederhergestellt wurde.
Das Viewport-Tag <meta> und die CSS-Medienabfrage sind nicht spezifisch für ASP.NET MVC 4, und Sie können diese Features in jeder Webanwendung nutzen. Sie sind jetzt jedoch in die Dateien integriert, die generiert werden, wenn Sie ein neues ASP.NET MVC 4-Projekt erstellen.
Weitere Informationen zum Viewport-Tag <meta> finden Sie unter Eine Geschichte von zwei Viewports – Teil 2.
Im nächsten Abschnitt erfahren Sie, wie Sie Ansichten speziell für mobile Browser bereitstellen.
Überschreiben von Ansichten, Layouts und Teilansichten
Ein wichtiges neues Feature in ASP.NET MVC 4 ist ein einfacher Mechanismus, mit dem Sie jede Ansicht (einschließlich Layouts und Teilansichten) für mobile Browser im Allgemeinen, für einen einzelnen mobilen Browser oder für einen bestimmten Browser überschreiben können. Um eine mobiltaugliche Ansicht zu erstellen, können Sie eine Ansichtsdatei kopieren und .Mobile zum Dateinamen hinzufügen. Um beispielsweise eine mobile Indexansicht zu erstellen, kopieren Sie Views\Home\Index.cshtml in Views\Home\Index.Mobile.cshtml.
In diesem Abschnitt erstellen Sie eine Layoutdatei speziell für mobile Zwecke.
Kopieren Sie zunächst Views\Shared\_Layout.cshtml nach Views\Shared\_Layout.Mobile.cshtml. Öffnen Sie _Layout.Mobile.cshtml, und ändern Sie den Titel von MVC4 Conference in Conference (Mobile).
Entfernen Sie in jedem Html.ActionLink Aufruf "Durchsuchen nach" in jedem Link ActionLink. Der folgende Code zeigt den vollständigen Textabschnitt der Mobilen Layoutdatei.
<!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>
Kopieren Sie die Datei Views\Home\AllTags.cshtml in Views\Home\AllTags.Mobile.cshtml. Öffnen Sie die neue Datei, und ändern Sie das <h2> -Element von "Tags" in "Tags (M)":
<h2>Tags (M)</h2>
Navigieren Sie in einem Desktopbrowser und über einen Emulator für mobile Browser zur Tags-Seite. Der Emulator für mobile Browser zeigt die beiden änderungen an, die Sie vorgenommen haben.
Im Gegensatz dazu hat sich die Desktopanzeige nicht geändert.
Browser-Specific Ansichten
Zusätzlich zu den Ansichten speziell für Mobiltelefone und den Desktop können Sie Ansichten für individuelle Browser erstellen. Beispielsweise können Sie Ansichten erstellen, die speziell für den iPhone-Browser gelten. In diesem Abschnitt erstellen Sie ein Layout für den iPhone-Browser und eine iPhone-Version der AllTags -Ansicht.
Öffnen Sie die Datei Global.asax , und fügen Sie der -Methode den Application_Start folgenden Code hinzu.
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});
Durch diesen Code wird der neue Anzeigemodus "iPhone" definiert, der mit jeder eingehenden Anforderung abgeglichen wird. Wenn die eingehende Anforderung die definierte Bedingung erfüllt (der Benutzer-Agent also die Zeichenfolge "iPhone" enthält), sucht ASP.NET MVC nach Ansichten, die das Suffix "iPhone" im Namen enthalten.
Klicken Sie im Code mit der rechten Maustaste auf DefaultDisplayMode, und wählen Sie Auflösen und dann using System.Web.WebPages; aus. Dadurch wird ein Verweis auf den System.Web.WebPages-Namespace hinzugefügt, in dem die Typen DisplayModes und DefaultDisplayMode definiert sind.
Alternativ können Sie dem Abschnitt using der Datei die folgende Zeile manuell hinzufügen.
using System.Web.WebPages;
Der vollständige Inhalt der Datei Global.asax ist unten dargestellt.
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);
}
}
}
Speichern Sie die Änderungen. Kopieren Sie die Datei MvcMobile\Views\Shared\_Layout.Mobile.cshtml in MvcMobile\Views\Shared\_Layout.iPhone.cshtml. Öffnen Sie die neue Datei, und ändern Sie dann die h1 Überschrift von in Conference (Mobile)Conference (iPhone).
Kopieren Sie die Datei MvcMobile\Views\Home\AllTags.Mobile.cshtml in MvcMobile\Views\Home\AllTags.iPhone.cshtml. Ändern Sie in der neuen Datei das <h2> -Element von "Tags (M)" in "Tags (iPhone)".
Führen Sie die Anwendung aus. Führen Sie einen Emulator für mobile Browser aus, stellen Sie sicher, dass für den zugehörigen Benutzer-Agent die Option "iPhone" festgelegt ist, und navigieren Sie zur Ansicht AllTags . Der folgende Screenshot zeigt die Ansicht "AllTags" , die im Safari-Browser gerendert wird. Sie können Safari für Windows herunterladen.
In diesem Abschnitt haben wir gesehen, wie man mobile Layouts und Ansichten erstellt sowie wie man das für spezifische Geräte wie das iPhone tut. Im nächsten Abschnitt erfahren Sie, wie Sie jQuery Mobile für ansprechendere mobile Ansichten nutzen.
Verwenden von jQuery Mobile
Die jQuery Mobile-Bibliothek stellt ein Benutzeroberflächenframework bereit, das in allen gängigen mobilen Browsern funktioniert. jQuery Mobile wendet eine progressive Erweiterung auf mobile Browser an, die CSS und JavaScript unterstützen. Die progressive Erweiterung ermöglicht es allen Browsern, den grundlegenden Inhalt einer Webseite anzuzeigen, während leistungsfähigeren Browsern und Geräten eine umfangreichere Anzeige ermöglicht wird. Die JavaScript- und CSS-Dateien, die in jQuery Mobile enthalten sind, weisen viele Elemente so auf, dass sie für mobile Browser geeignet sind, ohne Markupänderungen vorzunehmen.
In diesem Abschnitt installieren Sie das NuGet-Paket jQuery.Mobile.MVC , das jQuery Mobile und ein View-Switcher-Widget installiert.
Löschen Sie zunächst die Dateien Shared\_Layout.Mobile.cshtml und Shared\_Layout.iPhone.cshtml , die Sie zuvor erstellt haben.
Benennen Sie Views\Home\AllTags.Mobile.cshtml und Views\Home\AllTags.iPhone.cshtml in Views\Home\AllTags.iPhone.cshtml.hide und Views\Home\AllTags.Mobile.cshtml.hide um. Da die Dateien keine CSHTML-Erweiterung mehr haben, werden sie von der ASP.NET MVC-Runtime nicht zum Rendern der AllTags-Ansicht verwendet.
Installieren Sie das NuGet-Paket jQuery.Mobile.MVC wie folgt:
Wählen Sie im Menü Extras die Option NuGet-Paket-Manager und dann Paket-Manager-Konsole aus.
Geben Sie in der Paket-Manager-Konsole
Install-Package jQuery.Mobile.MVC -version 1.0.0
Die folgende Abbildung zeigt die Dateien, die vom NuGet-Paket jQuery.Mobile.MVC zum Projekt MvcMobile hinzugefügt und geändert wurden. Dateien, die hinzugefügt werden, haben [add] nach dem Dateinamen angefügt. Das Bild zeigt nicht die GIF- und PNG-Dateien, die dem Ordner Content\images hinzugefügt wurden.
Das NuGet-Paket jQuery.Mobile.MVC installiert Folgendes:
- Die Datei App_Start\BundleMobileConfig.cs , die benötigt wird, um auf die hinzugefügten jQuery-JavaScript- und CSS-Dateien zu verweisen. Sie müssen die folgenden Anweisungen befolgen und auf das in dieser Datei definierte Mobile Bundle verweisen.
- jQuery Mobile-CSS-Dateien.
- Ein
ViewSwitcherControllerwidget (Controller\ViewSwitcherController.cs). - jQuery Mobile JavaScript-Dateien.
- Eine Layoutdatei im jQuery Mobile-Format (Views\Shared\_Layout.Mobile.cshtml).
- Eine Ansichtswechsel-Teilansicht (MvcMobile\Views\Shared\_ViewSwitcher.cshtml), die oben auf jeder Seite einen Link bereitstellt, um von der Desktopansicht zur mobilen Ansicht und umgekehrt zu wechseln.
- Mehrere.png und .gif Bilddateien im Ordner Content\images .
Öffnen Sie die Datei Global.asax , und fügen Sie den folgenden Code als letzte Zeile der Application_Start -Methode hinzu.
BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
Der folgende Code zeigt die vollständige Datei Global.asax .
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);
}
}
}
Hinweis
Wenn Sie internet Explorer 9 verwenden und die BundleMobileConfig zeile oben in gelber Hervorhebung nicht angezeigt wird, klicken Sie auf die Schaltfläche Kompatibilitätsansicht in IE, um das Symbol aus einer Gliederung zu ändern  in einer Volltonfarbe . Alternativ können Sie dieses Tutorial auch in FireFox oder Chrome anzeigen.
Öffnen Sie die Datei MvcMobile\Views\Shared\_Layout.Mobile.cshtml , und fügen Sie das folgende Markup direkt nach dem Html.Partial Aufruf hinzu:
<div data-role="header" align="center">
@Html.ActionLink("Home", "Index", "Home")
@Html.ActionLink("Date", "AllDates")
@Html.ActionLink("Speaker", "AllSpeakers")
@Html.ActionLink("Tag", "AllTags")
</div>
Die vollständige Datei MvcMobile\Views\Shared\_Layout.Mobile.cshtml wird unten gezeigt:
<!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>
Erstellen Sie die Anwendung, und navigieren Sie in Ihrem mobilen Browseremulator zur Ansicht AllTags . Sie sehen Folgendes:
Hinweis
Sie können den für mobilgerätespezifischen Code debuggen, indem Sie die Benutzer-Agent-Zeichenfolge für IE oder Chrome auf iPhone festlegen und dann die F-12-Entwicklertools verwenden. Wenn Ihr mobiler Browser die Links "Start", "Sprecher", "Tag" und " Datum " nicht als Schaltflächen anzeigt, sind die Verweise auf jQuery Mobile-Skripts und CSS-Dateien wahrscheinlich nicht korrekt.
Zusätzlich zu den Stiländerungen sehen Sie Anzeige der mobilen Ansicht und einen Link, mit dem Sie von der mobilen Ansicht zur Desktopansicht wechseln können. Wählen Sie den Link Desktopansicht aus, und die Desktopansicht wird angezeigt.
Die Desktopansicht bietet keine Möglichkeit, direkt zurück zur mobilen Ansicht zu navigieren. Sie werden dies jetzt beheben. Öffnen Sie die Datei Views\Shared\_Layout.cshtml . Fügen Sie direkt unter dem Page-Element body den folgenden Code hinzu, der das Ansichtswechsel-Widget rendert:
@Html.Partial("_ViewSwitcher")
Aktualisieren Sie die Ansicht AllTags im mobilen Browser. Sie können jetzt zwischen Desktop- und mobilen Ansichten navigieren.
Hinweis
Debughinweis: Sie können den folgenden Code am Ende von Views\Shared\_ViewSwitcher.cshtml hinzufügen, um Sichten zu debuggen, wenn Sie einen Browser verwenden, der die Benutzer-Agent-Zeichenfolge auf ein mobiles Gerät festgelegt hat.
else
{
@:Not Mobile/Get
}
und fügen Sie der Datei Views\Shared\_Layout.cshtml die folgende Überschrift hinzu.
<h1> Non Mobile Layout MVC4 Conference </h1>
Navigieren Sie in einem Desktopbrowser zur Seite AllTags . Das Ansichtswechselwidget wird in einem Desktopbrowser nicht angezeigt, da es nur der Mobilen Layoutseite hinzugefügt wird. Weiter unten im Tutorial erfahren Sie, wie Sie das Ansichtswechsel-Widget zur Desktopansicht hinzufügen können.
Verbessern der Sprecherliste
Wählen Sie im mobilen Browser den Link Speakers aus. Da es keine mobile Ansicht (AllSpeakers.Mobile.cshtml) gibt, wird die Standardlautsprecheranzeige (AllSpeakers.cshtml) mithilfe der mobilen Layoutansicht (_Layout.Mobile.cshtml) gerendert.
Sie können das Rendern einer (nicht mobilen) Standardansicht innerhalb eines mobilen Layouts global deaktivieren, indem Sie in der Datei Views\_ViewStart.cshtml wie folgt auf festlegen RequireConsistentDisplayModetrue:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}
Wenn RequireConsistentDisplayMode auf truefestgelegt ist, wird das mobile Layout (_Layout.Mobile.cshtml) nur für mobile Ansichten verwendet. (Das heißt, die Ansichtsdatei hat das Format **ViewName. mobile.cshtml.) Sie können auf true festlegenRequireConsistentDisplayMode, wenn Ihr mobiles Layout nicht gut mit Ihren nicht mobilen Ansichten funktioniert. Der folgende Screenshot zeigt, wie die Seite "Lautsprecher " gerendert wird, wenn RequireConsistentDisplayMode auf truefestgelegt ist.
Sie können den konsistenten Anzeigemodus in einer Ansicht deaktivieren, indem Sie in der Ansichtsdatei auf false festlegenRequireConsistentDisplayMode. Das folgende Markup in der Datei Views\Home\AllSpeakers.cshtml wird auf falsefestgelegtRequireConsistentDisplayMode:
@model IEnumerable<string>
@{
ViewBag.Title = "All speakers";
DisplayModeProvider.Instance.RequireConsistentDisplayMode = false;
}
Erstellen einer Ansicht für mobile Lautsprecher
Wie Sie gerade gesehen haben, ist die Ansicht Speakers gut lesbar, aber die Links sind klein und können auf mobilen Geräten schlecht angetippt werden. In diesem Abschnitt erstellen Sie eine für Mobilgeräte spezifische Ansicht "Lautsprecher ", die wie eine moderne mobile Anwendung aussieht. Sie zeigt große, einfach zu tippende Links an und enthält ein Suchfeld zum schnellen Suchen nach Sprechern.
Kopieren Sie AllSpeakers.cshtml nach AllSpeakers.Mobile.cshtml. Öffnen Sie die Datei AllSpeakers.Mobile.cshtml , und entfernen Sie das <h2> heading-Element.
Fügen Sie im <ul> -Tag das data-role -Attribut hinzu, und legen Sie dessen Wert auf fest listview. Erleichtert wie bei anderen data-* Attributendata-role="listview" das Tippen auf große Listenelemente. Das fertige Markup sieht wie folgt aus:
@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>
Aktualisieren Sie den mobilen Browser. Die aktualisierte Ansicht sieht wie folgt aus:
Obwohl sich die mobile Ansicht verbessert hat, ist es schwierig, in der langen Liste der Sprecher zu navigieren. Um dies zu beheben, fügen Sie im <ul> -Tag das data-filter -Attribut hinzu, und legen Sie es auf fest true. Der folgende Code zeigt das ul Markup.
<ul data-role="listview" data-filter="true">
Die folgende Abbildung zeigt das Suchfilterfeld oben auf der Seite, das aus dem data-filter -Attribut resultiert.
Während Sie jeden Buchstaben in das Suchfeld eingeben, filtert jQuery Mobile die angezeigte Liste wie in der folgenden Abbildung dargestellt.
Verbessern der Tagsliste
Wie die Standardansicht "Lautsprecher " ist die Ansicht Tags lesbar, aber die Links sind klein und schwer auf einem mobilen Gerät zu tippen. In diesem Abschnitt korrigieren Sie die Ansicht Tags auf die gleiche Weise wie die Ansicht "Lautsprecher ".
Entfernen Sie das Suffix "hide" in die Datei Views\Home\AllTags.Mobile.cshtml.hide , sodass der Name Views\Home\AllTags.Mobile.cshtml lautet. Öffnen Sie die umbenannte Datei, und entfernen Sie das <h2> Element.
Fügen Sie dem Tag die data-role<ul> Attribute und data-filter hinzu, wie hier gezeigt:
<ul data-role="listview" data-filter="true">
Die folgende Abbildung zeigt die Seite tags, die nach dem Buchstaben Jfiltert.
Verbessern der Datumsliste
Sie können die Datumsansicht wie die Ansichten "Sprecher " und "Tags " verbessern, sodass sie auf einem mobilen Gerät einfacher zu verwenden ist.
Kopieren Sie die Datei Views\Home\AllDates.cshtml in Views\Home\AllDates.Mobile.cshtml. Öffnen Sie die neue Datei, und entfernen Sie das <h2> Element.
Fügen Sie data-role="listview" dem <ul> Tag wie folgt hinzu:
<ul data-role="listview">
Die folgende Abbildung zeigt, wie die Seite "Datum" mit dem data-role -Attribut aussieht.
Ersetzen Sie den Inhalt der Datei Views\Home\AllDates.Mobile.cshtml durch den folgenden Code:
@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>
Dieser Code gruppiert alle Sitzungen nach Tagen. Es erstellt einen Listenteiler für jeden neuen Tag und listet alle Sitzungen für jeden Tag unter einer Trennlinie auf. So sieht es aus, wenn dieser Code ausgeführt wird:
Verbessern der SessionsTable-Ansicht
In diesem Abschnitt erstellen Sie eine für Mobilgeräte spezifische Ansicht von Sitzungen. Die Änderungen, die wir vornehmen, sind umfangreicher als in anderen Ansichten, die wir erstellt haben.
Tippen Sie im mobilen Browser auf die Schaltfläche Lautsprecher , und geben Sie Sc dann in das Suchfeld ein.
Tippen Sie auf den Scott Hanselman-Link .
Wie Sie sehen können, ist die Anzeige in einem mobilen Browser schwer zu lesen. Die Datumsspalte ist schwer zu lesen, und die Spalte tags befindet sich außerhalb der Ansicht. Um dieses Problem zu beheben, kopieren Sie Views\Home\SessionsTable.cshtml in Views\Home\SessionsTable.Mobile.cshtml, und ersetzen Sie dann den Inhalt der Datei durch den folgenden Code:
@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>
Der Code entfernt die Spalten Raum und Tags und formatiert Titel, Sprecher und Datum vertikal, sodass alle diese Informationen in einem mobilen Browser lesbar sind. Das Bild unten zeigt die Codeänderungen.
Verbessern der SessionByCode-Ansicht
Schließlich erstellen Sie eine für Mobilgeräte spezifische Ansicht der SessionByCode-Ansicht . Tippen Sie im mobilen Browser auf die Schaltfläche Lautsprecher , und geben Sie Sc dann in das Suchfeld ein.
Tippen Sie auf den Scott Hanselman-Link . Scott Hanselmans Sitzungen werden angezeigt.
Wählen Sie den Link Eine Übersicht des MS Web Stack of Love aus.
Die Standarddesktopansicht ist in Ordnung, aber Sie können sie verbessern.
Kopieren Sie views\Home\SessionByCode.cshtml in Views\Home\SessionByCode.Mobile.cshtml, und ersetzen Sie den Inhalt der Datei Views\Home\SessionByCode.Mobile.cshtml durch das folgende Markup:
@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>
Das neue Markup verwendet das data-role -Attribut, um das Layout der Ansicht zu verbessern.
Aktualisieren Sie den mobilen Browser. Das folgende Bild zeigt die Codeänderungen, die Sie gerade vorgenommen haben:
Umschließen und Überprüfen
In diesem Tutorial wurden die neuen mobilen Features von ASP.NET MVC 4 Developer Preview vorgestellt. Zu den mobilen Features gehören:
- Die Möglichkeit, Layout, Ansichten und Teilansichten sowohl global als auch für eine einzelne Ansicht außer Kraft zu setzen.
- Steuern des Layouts und der teilweisen Außerkraftsetzung mithilfe der
RequireConsistentDisplayMode-Eigenschaft. - Ein Ansichtswechselwidget für mobile Ansichten als kann auch in Desktopansichten angezeigt werden.
- Unterstützung für die Unterstützung bestimmter Browser, z. B. des iPhone-Browsers.