ASP.NET MVC 4
Neuigkeiten für die Entwicklung von Mobilanwendungen in ASP.NET MVC 4
Seit langem suchen Entwickler nach dem heiligen Gral der Tools, der es ermöglicht, alle Plattformen über eine einzige Codebasis zu bedienen. Dies ist heute wichtiger als je zuvor. Aufgrund der zunehmenden Verbreitung und Vielzahl von mobilen Smartphones und Tablets weltweit ist es von wesentlicher Bedeutung, dass Ihre Website über eine ansprechende und benutzerfreundliche Oberfläche für Mobilgeräte verfügt. Sie könnten sich natürlich für die Entwicklung systemeigener Anwendungen entscheiden und Anwendungen speziell für iOS, Android, Windows Phone, BlackBerry usw. entwickeln. Leider erfordern systemeigene Anwendungen jedoch plattformspezifische Kenntnisse und einen Code, der speziell für die jeweilige Plattform entwickelt wird.
Mit HTML5 und CSS3 scheint es nun glücklicherweise Tools zu geben, mit denen Sie den Traum "Einmal schreiben, überall ausführen" wirklich wahr werden lassen können. Obwohl die Spezifikationen noch nicht abgeschlossen sind, entwickeln sich HTML5 und CSS3 schnell zu Branchenstandards für browserbasierte Websites für verschiedene Plattformen. Die meisten Funktionen werden bereits von den wichtigen Browsern unterstützt. Der große Vorteil der Kombination aus HTML5/CSS3 besteht darin, dass es sich um einfaches HTML-Markup handelt, das jedes HTML-basierte Tool nutzen kann, von PHP bis zu ASP.NET MVC.
In diesem Artikel werden die neuen Funktionen von ASP.NET MVC 4 behandelt. Viele von diesen nutzen die browserunabhängigen Funktionen von HTML5 und CSS3, um sowohl die Entwicklung von Websites speziell für mobile Browser als auch von Websites für mobile und Desktopbrowser zu vereinfachen.
Wenn Sie ASP.NET MVC 4 noch nicht installiert haben und Visual Studio 2010 ausführen, können Sie die Umgebung vom Webplattform-Installer oder direkt von der ASP.NET MVC-Website herunterladen (asp.net/mvc/mvc4). Visual Studio 11 enthält ASP.NET MVC 4.
Adaptives Rendering
Adaptives Rendering ist der Prozess, bei dem eine Website abhängig von den Funktionen des Zielgeräts und Zielbrowsers verschieden angezeigt wird. In ASP.NET MVC 4 sind zahlreiche Techniken für adaptives Rendering enthalten.
Viewportmetatag Standardmäßig gehen Browser, auch wenn sie auf Mobilgeräten und Tablets installiert sind, davon aus, dass sie Seiten auf einem Desktop rendern und zeigen die Inhalte verkleinert mit einer Breite von 980 Pixeln an. Abbildung 1 zeigt eine Website, die mit der Standardvorlage für Websites aus ASP.NET MVC 3 erstellt wurde. Beachten Sie, dass der Browser annimmt, dass er die Website für einen Desktop rendert, obwohl die Website in einem mobilen Browser angezeigt wird. Obwohl die Website verwendet werden kann, wenn sie auf diese Art gerendert wird, ist dies sicherlich nicht ideal.
.jpg)
Abbildung 1 Auf der Basis von ASP.NET MVC 3 erstellte Standardanzeige
Stattdessen können Sie das Viewportmetatag verwenden, um dem Browser die Breite, Höhe und Skalierung für das Rendering der Inhalte explizit anzugeben. Sie können den Viewportmetatag auch für das Rendering auf der Basis der Möglichkeiten des Geräts konfigurieren:
<meta name="viewport" content="width=device-width" />
Abbildung 2 zeigt die Seite, nachdem der Viewportmetatag zu _Layout.cshtml hinzugefügt wurde. Die Website ist nun an die Breite des Gerätedisplays angepasst. Wenn Sie mit einer der Projektvorlagen (außer der Web-API-Vorlage) ein neues ASP.NET MVC 4-Projekt erstellen, können Sie die Datei "_Layout.cshtml" öffnen. Ihnen wird im Headerabschnitt das Viewportmetatag angezeigt.
.jpg)
Abbildung 2 Anpassung an das Gerät mit ASP.NET MVC 4
CSS-Medienabfragen Wenn Sie eine Website für verschiedene Plattformen entwickeln, möchten Sie für Benutzer von Mobilgeräten im Allgemeinen eine Anzeige bereitstellen, die sich von der Anzeige für Desktopbenutzer unterscheidet. In der Regel ist die Funktionalität beinahe gleich, Stil und Layout des Inhalts jedoch nicht. Mit CSS-Medienabfragen können Sie bedingungsabhängig spezifische CSS-Formate anwenden, basierend auf den Funktionen des Browsers, der Ihrer Website die Anforderung sendet:
@media only screen and (max-width: 850px) {
header{
float: none;
}
}
Diese Medienabfrage wendet die enthaltenen Formate nur an, wenn das Medium ein Bildschirm und nicht ein Ausdruck ist. Die Breite des Bereichs, in dem die Website gerendert wird, beträgt maximal 850 Pixel. Mit dieser Technik können Sie das Format Ihrer Inhalte auf jede erdenkliche Weise ändern, basierend auf den Möglichkeiten des Browsers.
Bei mobilen Browsern müssen Sie stets die Bandbreite berücksichtigen. Wenn Sie ein Mobilgerät verwenden, sind Sie im Allgemeinen nicht mit einem Wi-Fi- oder einem anderen Hochgeschwindigkeitsnetzwerk verbunden. Wenn Sie Ihre Website für Mobilgeräte bereitstellen, sollten Sie dies auf eine möglichst effiziente Weise tun. Wenn z. B. Bilder für die Funktionalität Ihrer Website nicht erforderlich sind, sollten Sie für die Anzeige auf Mobilgeräten keine Bilder verwenden. Wenn Sie Bilder benötigen, stellen Sie sicher, dass die Bilder die korrekte Größe haben. Das bedeutet, dass die Bilder angepasst an die Abmessungen gesendet werden, mit denen sie angezeigt werden. Genau so, wie Sie ein Bild mittels CSS spezifizieren können, können Sie mit CSS-Medienabfragen verschiedene Bilder spezifizieren, je nach dem Möglichkeiten des Geräts und des Browsers.
Alle Standardvorlagen in ASP.NET MVC 4 (außer der Web-API-Vorlage) enthalten einige Beispiele für CSS-Medienabfragen. Um sich dies vor Augen zu führen, erstellen Sie mittels der Projektvorlage "Internet Application" ein neues ASP.NET MVC 4-Projekt und führen dies aus. Maximieren Sie den Browser, und beginnen Sie anschließend, die Größe des Fensters langsam zu reduzieren. Wenn die Fensterbreite 850 Pixel oder weniger beträgt, werden Sie zahlreiche Änderungen für die Anzeige der Standardseite feststellen. Um mehr über die einzelnen Details der Änderungen zu erfahren, betrachten Sie die Datei "Site.css" ab Zeile 466.
Wenn CSS nicht ausreicht
Manchmal reicht es nicht, die Formate zu ändern, damit Ihre Website auf alle Geräten gerendert wird und verwendet werden kann. In diesen Fällen besteht die einzige Möglichkeiten darin, Anzeigen zu erstellen, die an die Browsertypen und Geräte angepasst sind, auf denen Ihre Website angezeigt werden soll.
Bereitstellen spezifischer Anzeigen Das Konzept, abhängig vom Browser, der die Anforderung sendet, spezifische Seiten anzuzeigen, ist nicht neu. Entwickler verwenden seit langem die Browserermittlung. In früheren Versionen von ASP.NET MVC konnten Sie eine angepasste Anzeigemodulimplementierung erstellen, die entweder von den Webformularen oder den Razor-Anzeigemodulen erbt, anschließend die FindView-Methode überschreiben, die Browserermittlung hinzufügen und eine für den anfordernden Browser spezifische Anzeige zurückgeben. In ASP.NET MVC 4 gibt es zwei neue Funktionen, mit denen Sie dies auf unterschiedlichen Ebenen und mit wesentlich geringerem Aufwand durchführen können.
Mit den neuen Funktionen in ASP.NET MVC 4 können Sie mittels Konventionen (und nicht Konfigurationen) Anzeigen für Mobilgeräte global überschreiben. Wenn ASP.NET MVC 4 auf die Anforderung eines mobilen Browsers reagiert und die Anzeige ermittelt, die bereitgestellt werden soll, sucht es zunächst nach Anzeigen mit der Namenskonvention [view].mobile.cshtml. Wenn eine Anzeige gefunden wird, die der Namenskonvention entspricht, stellt ASP.NET MVC diese bereit. Andernfalls wird die Standardanzeige bereitgestellt.
Wie Sie in Abbildung 3 sehen können, habe ich eine Kopie von _Layout.cshtml erstellt und diese Datei entsprechend dieser Konvention zu _Layout.mobile.cshtml umbenannt. Ich habe die HTML-Zeile hervorgehoben, die hinzugefügt wurde, um deutlich zu machen, welche Datei "_Layout.cshtml" für das Rendering der Seite verwendet wird. Wenn die Website im Desktopbrowser gerendert wird, gibt es keine Änderungen. Wenn ich die Website jedoch im mobilen Browser rendere, wie in Abbildung 4 gezeigt, sehen Sie, dass die mobile Version von _Layout.cshtml verwendet wird.
.jpg)
Abbildung 3 Mobilgerätversion von _Layout.cshtml
.jpg)
Abbildung 4 Mobilgerät-spezifische Anzeige
Bereitstellen von Browser-spezifischen Anzeigen In dem meisten Fällen ist es nicht mehr erforderlich, Browser-spezifische Anzeigen oder Inhalte auf Desktops bereitzustellen. Wenn Sie bereits seit längerem Websites entwickeln, besteht jedoch die Möglichkeit, dass Sie Code oder CSS geschrieben haben, die eine bestimmte Funktionalität in einem oder zwei bestimmten Browsern ermöglichen. Dies ist zurzeit der Stand der Dinge, was Browser für Mobilgeräte angeht. Die Lage ist jedoch aufgrund der riesigen Zahl mobiler Plattformen, die alle einen eigenen Browser haben, kompliziert. Und als wenn das noch nicht genug wäre, gibt es jetzt das Konzept der "systemeigenen" Websites. Es genügt nicht mehr, dass Ihre Website gut in Browsern für Mobilgeräte gerendert wird. Um wirklich an der Spitze der Entwicklung zu stehen, muss Ihre Website das Aussehen und Verhalten von systemeigenen Anwendungen aufweisen, die auf dem Gerät ausgeführt werden. Dies bedeutet, dass spezifische Anzeigen nicht nur allgemein für mobile Browser bereitgestellt werden, sondern für spezifische mobile Browser, und dass ihr Layout an die Plattform angepasst sein muss.
Um dies zu erreichen, hat ASP.NET MVC 4 Anzeigemodi eingeführt. Mit dieser neuen Funktion können Sie die Vorteile von Konventionen (im Vergleich zu Konfigurationen) mit der Zuverlässigkeit der Browserermittlung kombinieren, um Browser-spezifische Anzeigen bereitzustellen.
Um Anzeigemodi nutzen zu können, müssen Sie diese zuerst in der Methode Application_Start von Global.asax definieren, wie z. B.:
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});
Dies ist ein Anzeigemodus, der für den iPhone-Browser erstellt wurde. Die erste Instanz von "iPhone" definiert das Suffix der Anzeige, nach dem ASP.NET MVC sucht, wenn es die Anzeige festlegt, die gerendert werden soll. Die zweite Instanz von "iPhone" bezieht sich auf den Benutzeragent, der die Anforderung sendet, und definiert die Bedingung, die von ASP.NET MVC verwendet wird, um der Namenskonvention [view].iPhone.cshtml zu entsprechen. Sie können dies grundsätzlich folgendermaßen verstehen: Wenn ein iPhone-Browser die Anforderung gesendet hat, soll zuerst nach Anzeigen gesucht werden, die dem Suffix "iPhone" entsprechen.
Um Ihnen den Anzeigemodus für den iPhone-Browser zu zeigen, habe ich eine weitere Kopie von _Layout.cshtml erstellt und diese _Layout.iPhone.cshtml genannt, entsprechend der Namenskonvention, die ich bei der Erstellung des Anzeigemodus definiert habe. Anschließend habe ich die Datei modifiziert, um zu zeigen, dass das iPhone-Layout verwendet wird, wenn ich mit einem iPhone auf der Website browse. Wenn ich die Website im Desktopbrowser oder im Windows Phone-Emulator-Browser anzeige, wird mir die Modifizierung nicht angezeigt. Wenn ich die Website jedoch im iPhone-Browser anzeige, wie in Abbildung 5 gezeigt, sehe ich die Modifizierung.
.jpg)
Abbildung 5 iPhone-spezifische Anzeige
Durch die Hinzufügung dieser Funktionen zu ASP.NET MVC 4 können Sie auf einfache Weise Mobilgerät- und Browser-spezifische Anzeigen bereitstellen, ohne dass dies einen großen Aufwand erfordert. Mittels der Anzeigenüberschreibung und der Anzeigemodi in ASP.NET MVC 4 können Sie Mobilgerät- und Browser-spezifische Anzeigen bereitstellen. So können Sie Ihre Website vollständig an das Gerät anpassen, auf dem sie gerendert wird.
jQuery Mobile und jQuery.Mobile.MVC
jQuery Mobile ist eine Open-Source-Bibliothek für die Erstellung von Benutzeroberflächen für Mobilgeräte auf der Basis von jQuery Core. Da es sich bei jQuery Mobile um einen gut dokumentierten Toolsatz handelt und sich die Implementierung von jQuery Mobile in ASP.NET MVC 4 nicht von der Implementierung in anderen Sprachen oder Frameworks unterscheidet, werde ich dies hier nicht behandeln. Ich zeige Ihnen jedoch, wie Sie dies in ASP.NET MVC 4 integrieren.
jQuery Mobile ist standardmäßig nicht in ASP.NET MVC 4-Projektvorlagen enthalten (außer in der Projektvorlage Mobile Application). Es ist jedoch nicht schwierig, es einer ASP.NET MVC 4-Anwendung hinzuzufügen. Sie sollten NuGet für die Installation der Skripts und anderer notwendiger Dateien verwenden und anschließend in _Layout.cshtml das erforderliche Skript und die erforderlichen CSS-Verweise manuell hinzufügen. Alternativ können Sie das jQuery.Mobile.MVC NuGet-Paket installieren. Dieses installiert alle Skripts sowie alle anderen notwendigen Dateien. Anschließend erstellen Sie eine _Layout.Mobile.cshtml-Datei und fügen Verweise zu allen jQuery Mobile-Skript-Dateien und jQuery Mobile-CSS-Dateien hinzu. Das jQuery.Mobile.MVC NuGet-Paket fügt außerdem die Anzeigewechselfunktion hinzu, mit der Benutzer, die die mobile Version der Website anzeigen, zur vollständigen Desktopanzeige wechseln können, wie in Abbildung 6 gezeigt.
.jpg)
Abbildung 6 jQuery Mobile-Anzeige mit Anzeigewechselfunktion
Projektvorlage
Wenn Sie eine unabhängige Website erstellen möchten, die speziell auf mobile Browser ausgerichtet ist, gibt es in ASP.NET MVC 4 eine Projektvorlage, mit der Sie genau dies tun können. Bei der Erstellung eines neuen ASP.NET MVC 4-Projekts können Sie nun die Projektvorlage Mobile Application auswählen.
Erstellen Sie ein Projekt mit der ASP.NET MVC 4-Projektvorlage Mobile Application, und betrachten Sie anschließend die Gesamtstruktur des Projekts. Sie werden feststellen, dass sich im Vergleich zur Standardvorlage für ASP.NET MVC 4-Anwendungen anscheinend nichts geändert hat. Es werden weiterhin die gleichen Modelle, Anzeigen und Controller verwendet. Wenn Sie jedoch die Anwendung ausführen, werden Sie feststellen, dass die Website speziell an mobile Browser angepasst ist.
Wie ich bereits zuvor kurz erwähnt habe, ist jQuery Mobile in der ASP.NET MVC 4-Projekvorlage Mobile Application bereits enthalten. Darüber hinaus wird jQuery Mobile in allen Standardanzeigen implementiert:
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc"
title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
Dieser Code stammt aus Views/Home/Index.cshtml. Wenn Sie mit jQuery Mobile und dessen Implementierung nicht vertraut sind, haben Sie als Erstes wahrscheinlich die data-Attribute ("data dash") bemerkt. Diese Attribute werden von jQuery Mobile zur Konfigurierung der Steuerelemente auf der Seite verwendet.
Die ASP.NET MVC 4-Projektvorlage Mobile Application ist hervorragend für die Erstellung von Websites geeignet, die nur auf mobile Browser ausgerichtet sind. Sie kann auch gut als Referenz verwendet werden, wenn Sie Funktionen implementieren möchten, die für mobile Browser spezifisch sind. In den meisten Fällen werden Sie wahrscheinlich eine Website erstellen, die primär auf Desktopbrowser ausgerichtet ist. Dennoch sollte Ihre Website auf benutzerfreundliche Weise in mobilen Browsern gerendert werden, ohne dass aufwendige mobilspezifische Codemodifizierungen erforderlich werden. In diesen Fällen kann die ASP.NET MVC 4-Projektvorlage Mobile Application verwendet werden. Sie kann für die Einführung mobilspezifischer Funktionen in vorhandene Desktopbrowser-basierte MVC-Anwendungen verwendet werden.
Angesichts der Verbreitung von Mobilgeräten ist es nicht überraschend, dass die Verbesserung der Entwicklungsumgebung für mobile Websites einen solchen Schwerpunkt von ASP.NET MVC 4 bildet. Die Nutzung der neuen Funktionen in ASP.NET MVC 4 stellt sicher, dass Websites sämtliche Zielgruppen erreichen und dies ohne größeren Kodierungsaufwand und Duplizierungen in der Benutzeroberflächenschicht möglich ist.
Keith Burnell ist Senior Software Engineer bei Skyline Technologies. Er entwickelt seit mehr als 10 Jahren Software und ist auf die Entwicklung umfangreicher ASP.NET- und ASP.NET MVC-Websites spezialisiert. Keith Burnell ist ein aktives Mitglied der Entwicklercommunity. Sie finden seinen Blog unterdotnetdevdude.comund sein Twitter-Konto unter twitter.com/keburnell.
Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: John Ptacek und Clark Sell.