Freigeben über

Neue Funktionen in ASP.NET MVC 4

  • Artikel

Nach Web Camps Team

Download Web Camps Training Kit

ASP.NET MVC 4 ist ein Framework zum Erstellen skalierbarer, standardsbasierter Webanwendungen mit bewährten Entwurfsmustern und der Leistungsfähigkeit der ASP.NET und des .NET Frameworks. Diese neue, vierte Version des Frameworks konzentriert sich auf die Vereinfachung der Entwicklung mobiler Webanwendungen.

Wenn Sie zunächst ein neues ASP.NET MVC 4-Projekt erstellen, gibt es jetzt eine Projektvorlage für mobile Anwendungen, mit der Sie eine eigenständige App speziell für mobile Geräte erstellen können. Darüber hinaus ist ASP.NET MVC 4 in jQuery Mobile über ein jQuery.Mobile.MVC NuGet-Paket integriert. jQuery Mobile ist ein HTML5-basiertes Framework für die Entwicklung von Web-Apps, die mit allen gängigen mobilen Geräteplattformen kompatibel sind, einschließlich Windows Phone, iPhone, Android usw. Wenn Sie jedoch Spezialisierung benötigen, können Sie ASP.NET MVC 4 auch verschiedene Ansichten für verschiedene Geräte bereitstellen und gerätespezifische Optimierungen bereitstellen.

In dieser praktischen Übung beginnen Sie mit der ASP.NET MVC 4 "Internet Application"-Projektvorlage, um eine Fotogalerieanwendung zu erstellen. Sie werden die App schrittweise mit jQuery Mobile und ASP.NET MVC 4 neuen Features verbessern, um sie mit verschiedenen mobilen Geräten und Desktopwebbrowsern kompatibel zu machen. Außerdem erfahren Sie mehr über neue Coderezepte für die Codegenerierung und wie ASP.NET MVC 4 ihnen das Schreiben asynchroner Aktionsmethoden erleichtert, indem Sie Rückgabetypen von Task<ActionResult> unterstützen.

Hinweis

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, verfügbar unter Microsoft-Web/WebCampTrainingKit Releases. Das für dieses Lab spezifische Projekt ist unter What's New in Web Forms in ASP.NET 4.5 verfügbar.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

  • Nutzen Sie die Verbesserungen der ASP.NET MVC-Projektvorlagen, einschließlich der neuen Projektvorlage für mobile Anwendungen
  • Verwenden des HTML5-Viewport-Attributs und CSS-Medienabfragen zur Verbesserung der Anzeige auf mobilen Geräten
  • Verwenden von jQuery Mobile für progressive Verbesserungen und zum Erstellen von touchoptimierten Web-UI
  • Erstellen mobiler spezifischer Ansichten
  • Verwenden der Ansichtsschalterkomponente zum Umschalten zwischen mobilen und Desktopansichten in der Anwendung
  • Erstellen asynchroner Controller mithilfe der Aufgabenunterstützung

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um diese Übung abzuschließen:

Setup

Im gesamten Lab-Dokument werden Sie angewiesen, Codeblöcke einzufügen. Aus Gründen der Einfachheit wird der großteil dieses Codes als Visual Studio CodeAusschnitte bereitgestellt, die Sie in Visual Studio verwenden können, um zu vermeiden, dass Sie ihn manuell hinzufügen müssen.

So installieren Sie die Codeausschnitte:

  1. Öffnen Sie ein Windows Explorer-Fenster, und navigieren Sie zum Ordner "Source\Setup" des Labors.
  2. Doppelklicken Sie in diesem Ordner auf die datei Setup.cmd , um die Codeausschnitte von Visual Studio zu installieren.

Wenn Sie mit den Visual Studio Code Snippets nicht vertraut sind und erfahren möchten, wie sie verwendet werden können, finden Sie in diesem Dokument den Anhang "Anhang A: Verwenden von Codeausschnitten".

Übungen

Dieses praktische Labor umfasst die folgenden Übungen:

  1. Neue ASP.NET MVC 4-Projektvorlagen
  2. Erstellen der Fotogalerie-Webanwendung
  3. Hinzufügen der Unterstützung für mobile Geräte
  4. Verwenden asynchroner Controller

Hinweis

Jede Übung wird von einem Endordner begleitet, der die resultierende Lösung enthält, die Sie nach Abschluss der Übungen erhalten sollten. Sie können diese Lösung als Leitfaden verwenden, wenn Sie zusätzliche Hilfe beim Durcharbeiten der Übungen benötigen.

Geschätzte Zeit zum Abschließen dieser Übung: 60 Minuten.

Übung 1: Neue ASP.NET MVC 4-Projektvorlagen

In dieser Übung werden Sie die Verbesserungen in den ASP.NET MVC 4-Projektvorlagen erkunden. Zusätzlich zur Internetanwendungsvorlage, die bereits in MVC 3 vorhanden ist, enthält diese Version jetzt eine separate Vorlage für mobile Anwendungen. Zunächst sehen Sie sich einige relevante Features der einzelnen Vorlagen an. Anschließend arbeiten Sie daran, Ihre Seite auf den verschiedenen Plattformen ordnungsgemäß zu rendern, indem Sie den richtigen Ansatz verwenden.

Aufgabe 1 – Erkunden der Internetanwendungsvorlage

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie die Datei | Neu | Befehl 'Projektmenü '. Wählen Sie im Dialogfeld "Neues Projekt " das Visual C# | Webvorlage in der linken Bereichsstruktur, und wählen Sie ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt PhotoGallery, wählen Sie einen Speicherort aus (oder lassen Sie den Standardwert) aus, und klicken Sie auf "OK".

    Hinweis

    Später passen Sie die PhotoGallery-ASP.NET MVC 4-Lösung an, die Sie jetzt erstellen.

    Erstellen eines neuen Projekts

    Erstellen eines neuen Projekts

  3. Wählen Sie im Dialogfeld "Neues ASP.NET MVC 4-Projekt " die Projektvorlage "Internetanwendung " aus, und klicken Sie auf " OK". Stellen Sie sicher, dass Sie Razor als Ansichtsmodul ausgewählt haben.

    Erstellen einer neuen ASP.NET MVC 4-Internetanwendung

    Erstellen einer neuen ASP.NET MVC 4-Internetanwendung

    Hinweis

    Razor-Syntax wurde in ASP.NET MVC 3 eingeführt. Das Ziel ist es, die Anzahl der zeichen- und Tastaturanschläge zu minimieren, die in einer Datei erforderlich sind, um einen schnellen und dynamischen Codierungsworkflow zu ermöglichen. Razor nutzt vorhandene C#/VB-Kenntnisse (oder andere) Sprachkenntnisse und bietet eine Vorlagenmarkupsyntax, die einen fantastischen HTML-Konstruktionsworkflow ermöglicht.

  4. Drücken Sie F5 , um die Lösung auszuführen und die erneuerten Vorlagen anzuzeigen. Sie können die folgenden Features auschecken:

    Vorlagen im modernen Stil

    Die Vorlagen wurden erneuert und bieten modernere Stile.

    ASP.NET MVC 4 restylierte Vorlagen

    ASP.NET MVC 4 restylierte Vorlagen

    Neue Kontaktseite

    Neue Kontaktseite

    Adaptives Rendering

    Sehen Sie sich die Größenänderung des Browserfensters an, und beachten Sie, wie sich das Seitenlayout dynamisch an die neue Fenstergröße anpasst. Diese Vorlagen verwenden die adaptive Renderingtechnik, um sowohl auf Desktop- als auch auf mobilen Plattformen ohne Anpassung ordnungsgemäß zu rendern.

    ASP.NET MVC 4-Projektvorlage in verschiedenen Browsergrößen

    ASP.NET MVC 4-Projektvorlage in verschiedenen Browsergrößen

    Umfangreichere UI mit JavaScript

    Eine weitere Erweiterung der Standardprojektvorlagen ist die Verwendung von JavaScript, um ein interaktives JavaScript bereitzustellen. Die in der Vorlage verwendeten Verknüpfungen "Anmelden" und "Registrieren" veranzeugen, wie sie die jQuery Validations verwenden, um die Eingabefelder von clientseitiger Seite zu überprüfen.

    jQuery Validation

    jQuery Validation

    Hinweis

    Beachten Sie die beiden Anmeldeabschnitte, im ersten Abschnitt können Sie sich mit einem registrierten Konto von der Website anmelden und im zweiten Abschnitt können Sie sich alternativ mit einem anderen Authentifizierungsdienst wie Google anmelden (standardmäßig deaktiviert).

  5. Schließen Sie den Browser, um den Debugger zu beenden und zu Visual Studio zurückzukehren.

  6. Öffnen Sie die Datei , AuthConfig.cs sich unter dem Ordner App_Start befindet.

  7. Entfernen Sie den Kommentar aus der letzten Zeile, um den Google-Client für die OAuth-Authentifizierung zu registrieren.

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Hinweis

    Beachten Sie, dass Sie die Authentifizierung ganz einfach mit jedem OpenID- oder OAuth-Dienst wie Facebook, Twitter, Microsoft usw. aktivieren können.

  8. Drücken Sie F5 , um die Lösung auszuführen und zur Anmeldeseite zu navigieren.

  9. Wählen Sie den Google-Dienst aus, um sich anzumelden.

    Auswählen des Anmeldediensts

    Auswählen des Anmeldediensts

  10. Melden Sie sich mit Ihrem Google-Konto an.

  11. Erlauben Sie der Website (localhost), Informationen aus dem Google-Konto abzurufen.

  12. Schließlich müssen Sie sich auf der Website registrieren, um das Google-Konto zuzuordnen.

Zuordnen Ihres Google-Kontos

Zuordnen Ihres Google-Kontos 13. Schließen Sie den Browser, um den Debugger zu beenden und zu Visual Studio zurückzukehren. 14. Erkunden Sie nun die Lösung, um einige andere neue Features auszuprobieren, die von ASP.NET MVC 4 in der Projektvorlage eingeführt wurden.

Die ASP.NET MVC 4 Internet Application Project Template

Die ASP.NET MVC 4 Internet Application Project Template

  • HTML 5-Markup

    Durchsuchen Sie Vorlagenansichten, um das neue Designmarkup zu ermitteln.

    Neue Vorlage mit Razor- und HTML5-Markup

    Neue Vorlage mit Razor- und HTML5-Markup (About.cshtml).

  • Aktualisierte JavaScript-Bibliotheken

    Die ASP.NET MVC 4-Standardvorlage enthält jetzt KnockoutJS, ein JavaScript MVVM-Framework, mit dem Sie umfangreiche und hochgradig reaktionsfähige Webanwendungen mit JavaScript und HTML erstellen können. Wie in MVC3 sind jQuery- und jQuery UI-Bibliotheken auch in ASP.NET MVC 4 enthalten.

    Hinweis

    Weitere Informationen zur KnockOutJS-Bibliothek finden Sie unter diesem Link: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). Darüber hinaus erfahren Sie mehr über jQuery und jQuery UI in [http://docs.jquery.com/](http://docs.jquery.com/).

Aufgabe 2 – Erkunden der Vorlage für mobile Anwendungen

ASP.NET MVC 4 erleichtert die Entwicklung von Websites für mobile und Tablet-Browser. Diese Vorlage weist die gleiche Anwendungsstruktur wie die Internetanwendungsvorlage auf (beachten Sie, dass der Controllercode praktisch identisch ist), aber die Formatvorlage wurde geändert, um auf mobilen Geräten mit Toucheingabe ordnungsgemäß zu rendern.

  1. Wählen Sie die Datei | Neu | Befehl 'Projektmenü '. Wählen Sie im Dialogfeld "Neues Projekt " das Visual C# | Webvorlage in der linken Bereichsstruktur, und wählen Sie die ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt PhotoGallery.Mobile, wählen Sie einen Speicherort aus (oder lassen Sie die Standardeinstellung), wählen Sie "Zur Lösung hinzufügen" aus, und klicken Sie auf "OK".

  2. Wählen Sie im Dialogfeld "Neues ASP.NET MVC 4-Projekt " die Projektvorlage "Mobile Anwendung " aus, und klicken Sie auf " OK". Stellen Sie sicher, dass Sie Razor als Ansichtsmodul ausgewählt haben.

    Erstellen einer neuen ASP.NET MVC 4 Mobile-Anwendung

    Erstellen einer neuen ASP.NET MVC 4 Mobile-Anwendung

  3. Jetzt können Sie die Lösung erkunden und einige der neuen Features auschecken, die von der ASP.NET MVC 4-Lösungsvorlage für Mobile eingeführt wurden:

    • jQuery Mobile Library

      Die Projektvorlage "Mobile Anwendung" enthält die jQuery Mobile-Bibliothek, bei der es sich um eine Open Source-Bibliothek für die Kompatibilität mobiler Browser handelt. jQuery Mobile wendet progressive Verbesserungen 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 es nur den leistungsstärksten Browsern ermöglicht, die umfangreichen Inhalte anzuzeigen. Die javaScript- und CSS-Dateien, die im jQuery Mobile-Stil enthalten sind, helfen mobilen Browsern, den Inhalt auf dem Bildschirm anzupassen, ohne änderungen am Seitenmarkup vorzunehmen.

      jQuery-mobile-library-included-in-the-template

      in der Vorlage enthaltene mobile jQuery-Bibliothek

    • HTML5-basiertes Markup

      Mobile-application-template-using-HTML5-markup

      Mobile Anwendungsvorlage mit HTML5-Markup, (Login.cshtml und index.cshtml)

  4. Drücken Sie F5 , um die Lösung auszuführen.

  5. Öffnen Sie den Windows Phone 7-Emulator.

  6. Öffnen Sie im Startbildschirm des Telefons Internet Explorer. Sehen Sie sich die URL an, unter der die Desktopanwendung gestartet wurde, und navigieren Sie vom Telefon zu dieser URL (z. B. http://localhost:[PortNumber]/).

  7. Jetzt können Sie die Anmeldeseite eingeben oder die Infoseite auschecken. Beachten Sie, dass der Stil der Website auf der neuen Metro-App für Mobile basiert. Die ASP.NET MVC 4-Projektvorlage wird auf mobilen Geräten korrekt angezeigt, um sicherzustellen, dass alle Elemente der Seite sichtbar und aktiviert sind. Beachten Sie, dass die Links in der Kopfzeile groß genug sind, um darauf zu klicken oder zu tippen.

    Projektvorlagenseiten auf einem mobilen Gerät

    Projektvorlagenseiten auf einem mobilen Gerät

  8. Die neue Vorlage verwendet auch das Viewport-Metatag. Die meisten mobilen Browser definieren eine Breite für ein virtuelles Browserfenster oder "Viewport", die größer als die tatsächliche Breite des mobilen Geräts ist. Auf diese Weise können mobile Browser die gesamte Webseite innerhalb der virtuellen Anzeige anzeigen. Mit dem Viewport-Metatag können Webentwickler die Breite, Höhe und Skalierung des Browserbereichs auf mobilen Geräten festlegen. Die ASP.NET MVC 4-Vorlage für mobile Anwendungen legt den Viewport auf die Gerätebreite ("width=device-width") in der Layoutvorlage (Views\Shared_Layout.cshtml) fest, sodass alle Seiten ihren Viewport auf die Bildschirmbreite des Geräts festgelegt haben. Beachten Sie, dass das Viewport-Metatag die Standardbrowseransicht nicht ändert.

  9. Öffnen Sie _Layout.cshtml, befindet sich in den Ansichten | Freigegebener Ordner und Kommentieren des Viewport-Metatags. Führen Sie die Anwendung aus, wenn sie noch nicht geöffnet ist, und sehen Sie sich die Unterschiede an.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Die Website nach dem Kommentieren des Viewport-Metatags

Die Website nach dem Kommentieren des Viewport-Metatags 10. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden. 11. Heben Sie die Kommentarkommentierung des Viewport-Metatags auf.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Aufgabe 3 – Verwenden des adaptiven Renderings

In dieser Aufgabe lernen Sie eine weitere Methode zum ordnungsgemäßen Rendern einer Webseite auf mobilen Geräten und Webbrowsern gleichzeitig ohne Anpassung kennen. Sie haben bereits Viewport-Metatag mit einem ähnlichen Zweck verwendet. Jetzt treffen Sie eine weitere leistungsstarke Methode: adaptives Rendering.

Adaptives Rendering ist eine Technik, die CSS3-Medienabfragen verwendet, um die auf eine Seite angewendete Formatvorlage anzupassen. Medienabfragen definieren Bedingungen innerhalb eines Stylesheets, gruppieren CSS-Formatvorlagen unter einer bestimmten Bedingung. Nur wenn die Bedingung wahr ist, wird die Formatvorlage auf die deklarierten Objekte angewendet.

Die Flexibilität der adaptiven Renderingtechnik ermöglicht jede Anpassung für die Anzeige der Website auf verschiedenen Geräten. Sie können beliebig viele Formatvorlagen auf einem einzigen Stylesheet definieren, ohne Logikcode zum Auswählen der Formatvorlage zu schreiben. Daher ist es eine sehr übersichtliche Methode zum Anpassen von Seitenformatvorlagen, da dadurch die Menge an dupliziertem Code und der Logik für Renderingzwecke reduziert wird. Andererseits würde der Bandbreitenverbrauch steigen, da die Größe Ihrer CSS-Dateien geringfügig wachsen könnte.

Durch die Verwendung der methode für adaptives Rendering wird Ihre Website unabhängig vom Browser ordnungsgemäß angezeigt. Sie sollten jedoch berücksichtigen, ob die zusätzliche Bandbreitenlast ein Problem darstellt.

Hinweis

Das grundlegende Format einer Medienabfrage lautet: @media [Bereich: alle | Handheld | Drucken | Projektion | Bildschirm] ([Eigenschaft:Wert] und ... [property:value])

Beispiele für Medienabfragen: >@media alle und (max. Breite: 1000px) und (min-width: 700px) {}: Für alle Auflösungen zwischen 700px und 1000px.

@media Bildschirm und (min-width: 400px) und (Max-Width: 700px) { ... }: Nur für Bildschirme. Die Auflösung muss zwischen 400 und 700px sein.

@media Handheld und (Min-Width: 20em), Bildschirm und (min-width: 20em) { ... }: Für Handhelds(Mobile und Geräte) und Bildschirme. Die Mindestbreite muss größer als 20em sein.

Weitere Informationen hierzu finden Sie auf der W3C-Website.

Sie werden nun untersuchen, wie das adaptive Rendering funktioniert und die Lesbarkeit der ASP.NET MVC 4-Standardwebsitevorlage verbessert.

  1. Öffnen Sie die PhotoGallery.sln Projektmappe, die Sie unter Task 1 erstellt haben, und wählen Sie das PhotoGallery-Projekt aus. Drücken Sie F5 , um die Lösung auszuführen.

  2. Ändern Sie die Breite des Browsers, und legen Sie die Fenster auf die Hälfte oder auf weniger als ein Viertel ihrer Ursprünglichen Größe fest. Beachten Sie, was mit den Elementen in der Kopfzeile passiert: Einige Elemente werden nicht im sichtbaren Bereich der Kopfzeile angezeigt.

  3. Öffnen Sie Site.css Datei im Visual Studio-Projektmappen-Explorer, die sich im Ordner "Inhaltsprojekt " befindet. Drücken Sie STRG+F , um die integrierte Visual Studio-Suche zu öffnen, und schreiben @media Sie, um die CSS-Medienabfrage zu suchen.

    Die in dieser Vorlage definierte Medienabfragebedingung funktioniert auf diese Weise: Wenn die Fenstergröße des Browsers unter 850 px liegt, sind die angewendeten CSS-Regeln die in diesem Medienblock definierten.

    Suchen der Medienabfrage

    Suchen der Medienabfrage

  4. Ersetzen Sie den attributwert für die maximale Breite in 850 px durch 10px, um das adaptive Rendering zu deaktivieren, und drücken Sie STRG+S , um die Änderungen zu speichern. Kehren Sie zum Browser zurück, und drücken Sie STRG+F5 , um die Seite mit den von Ihnen vorgenommenen Änderungen zu aktualisieren. Beachten Sie die Unterschiede auf beiden Seiten beim Anpassen der Breite des Fensters.

    Die Seite wendet die klasse <span= an.@media Formatvorlage auf der linken und rechten Seite wird "title="In the left, the page is applying the @media style, in the right, the style is omitted" />

    Auf der linken Seite wird die @media Formatvorlage rechts auf die Formatvorlage angewendet.

    Sehen wir uns nun an, was auf mobilen Geräten passiert:

    Auf der linken Seite wird die klasse <span=@media Formatvorlage rechts wird die Formatvorlage ausgelassen" title="In the left, the page is applying the @media style, in the right, the style is omitted" />

    Auf der linken Seite wird die @media Formatvorlage rechts auf die Formatvorlage angewendet.

    Obwohl Sie feststellen, dass die Änderungen, wenn die Seite in einem Webbrowser gerendert wird, nicht sehr wichtig sind, wenn Sie ein mobiles Gerät verwenden, werden die Unterschiede offensichtlicher. Auf der linken Seite des Bilds können wir sehen, dass die benutzerdefinierte Formatvorlage die Lesbarkeit verbessert hat.

    Adaptives Rendering kann in vielen weiteren Szenarien verwendet werden, sodass es einfacher ist, bedingte Formatierungen auf eine Website anzuwenden und häufige Stilprobleme mit einem ordentlichen Ansatz zu lösen.

    Das Viewport-Metatag und CSS-Medienabfragen sind nicht spezifisch für ASP.NET MVC 4, sodass Sie diese Features in jeder Webanwendung nutzen können.

  5. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden.

In dieser Übung arbeiten Sie an einer Fotogalerie-Anwendung, um Fotos anzuzeigen. Sie beginnen mit der ASP.NET MVC 4-Projektvorlage, und dann fügen Sie ein Feature hinzu, um Fotos von einem Dienst abzurufen und auf der Startseite anzuzeigen.

In der folgenden Übung aktualisieren Sie diese Lösung, um die Anzeige auf mobilen Geräten zu verbessern.

Aufgabe 1 – Erstellen eines simulierten Fotodiensts

In dieser Aufgabe erstellen Sie ein Modell des Fotodiensts, um den Inhalt abzurufen, der im Katalog angezeigt wird. Dazu fügen Sie einen neuen Controller hinzu, der einfach eine JSON-Datei mit den Daten jedes Fotos zurückgibt.

  1. Öffnen Sie Visual Studio , wenn sie noch nicht geöffnet wurde.

  2. Wählen Sie die Datei | Neu | Befehl 'Projektmenü '. Wählen Sie im Dialogfeld "Neues Projekt " das Visual C# | Webvorlage in der linken Bereichsstruktur, und wählen Sie ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt PhotoGallery, wählen Sie einen Speicherort aus (oder lassen Sie den Standardwert) aus, und klicken Sie auf "OK". Alternativ können Sie von Ihrer vorhandenen ASP.NET MVC 4-Internetanwendungslösung aus Übung 1 weiterarbeiten und den nächsten Schritt überspringen.

  3. Wählen Sie im Dialogfeld "Neues ASP.NET MVC 4-Projekt " die Projektvorlage "Internetanwendung " aus, und klicken Sie auf " OK". Stellen Sie sicher, dass Razor als Ansichtsmodul ausgewählt ist.

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den App_Data Ordner Ihres Projekts, und wählen Sie "Hinzufügen" | aus. Vorhandenes Element. Navigieren Sie zum Ordner "Source\Assets\App_Data " dieser Übung, und fügen Sie die Photos.json Datei hinzu.

  5. Erstellen Sie einen neuen Controller mit dem Namen PhotoController. Klicken Sie dazu mit der rechten Maustaste auf den Ordner "Controller", und wählen Sie "Controller hinzufügen" aus. Schließen Sie den Controllernamen ab, lassen Sie die Vorlage "Leeren MVC-Controller" aus, und klicken Sie auf "Hinzufügen".

    Hinzufügen des PhotoControllers

    Hinzufügen des PhotoControllers

  6. Ersetzen Sie die Index-Methode durch die folgende Gallery-Aktion , und geben Sie den Inhalt aus der JSON-Datei zurück, die Sie dem Projekt kürzlich hinzugefügt haben.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex02 - Gallery Action)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. Drücken Sie F5 , um die Lösung auszuführen, und navigieren Sie dann zur folgenden URL, um den simulierten Fotodienst zu testen: http://localhost:[port]/photo/gallery (der [Port]-Wert hängt vom aktuellen Port ab, an dem die Anwendung gestartet wurde). Die Anforderung an diese URL sollte den Inhalt der Photos.json Datei abrufen.

    Testen des simulierten Fotodiensts

    Testen des simulierten Fotodiensts

In einer echten Implementierung könnten Sie ASP.NET-Web-API verwenden, um den Fotogaleriedienst zu implementieren. ASP.NET Web API ist ein Framework, das das Erstellen von HTTP-Diensten erleichtert, die eine Vielzahl verschiedener Clients bedienen können, einschließlich Browsern und mobilen Geräten. Die ASP.NET-Web-API ist eine ideale Plattform zum Erstellen von RESTful-Anwendungen in .NET Framework.

Aufgabe 2 – Anzeigen der Fotogalerie

In dieser Aufgabe aktualisieren Sie die Startseite so, dass die Fotogalerie mithilfe des simulierten Diensts angezeigt wird, den Sie in der ersten Aufgabe dieser Übung erstellt haben. Sie fügen Modelldateien hinzu und aktualisieren die Katalogansichten.

  1. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden.

  2. Erstellen Sie die Fotoklasse im Ordner "Models ". Klicken Sie dazu mit der rechten Maustaste auf den Ordner "Modelle", wählen Sie "Hinzufügen" aus, und klicken Sie auf "Klasse". Legen Sie dann den Namen auf Photo.cs fest, und klicken Sie auf "Hinzufügen".

  3. Fügen Sie der Photo-Klasse die folgenden Mitglieder hinzu.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex02 - Fotomodell)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Öffnen Sie im Ordner Controller die Datei HomeController.cs.

  5. Fügen Sie die folgenden using-Anweisungen hinzu.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex02 - HomeController Usings)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. Aktualisieren Sie die Indexaktion so, dass httpClient zum Abrufen der Katalogdaten verwendet wird, und verwenden Sie dann den JavaScriptSerializer , um sie für das Ansichtsmodell deserialisieren.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex02 - Index-Aktion)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Öffnen Sie die Datei Index.cshtml , die sich unter dem Ordner "Views\Home " befindet, und ersetzen Sie den gesamten Inhalt durch den folgenden Code.

    Dieser Code durchläuft alle Fotos, die aus dem Dienst abgerufen wurden, und zeigt sie in einer nicht angeordneten Liste an.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex02 - Fotoliste)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Inhaltsordner Ihres Projekts, und wählen Sie "Hinzufügen" | aus. Vorhandenes Element. Navigieren Sie zum Ordner "Source\Assets\Content " dieser Übung, und fügen Sie die Site.css Datei hinzu. Sie müssen den Ersatz bestätigen. Wenn die Site.css Datei geöffnet ist, müssen Sie auch bestätigen, dass die Datei neu geladen wird.

  9. Öffnen Sie Explorer, und kopieren Sie den gesamten Ordner "Fotos", der sich im Ordner "Source\Assets" dieses Labors befindet, in den Stammordner Ihres Projekts in Projektmappen-Explorer.

  10. Führen Sie die Anwendung aus. Nun sollte die Startseite mit den Fotos im Katalog angezeigt werden.

    Fotogalerie

    Fotogalerie

  11. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden.

Übung 3: Hinzufügen von Unterstützung für mobile Geräte

Einer der wichtigsten Updates in ASP.NET MVC 4 ist die Unterstützung für die mobile Entwicklung. In dieser Übung werden Sie ASP.NET MVC 4 neue Features für mobile Anwendungen erkunden, indem Sie die PhotoGallery-Lösung erweitern, die Sie in der vorherigen Übung erstellt haben.

Aufgabe 1 : Installieren von jQuery Mobile in einer ASP.NET MVC 4-Anwendung

  1. Öffnen Sie die Begin-Lösung im Ordner "Source/Ex3-MobileSupport/Begin/ ". Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü "Projekt", und wählen Sie "NuGet-Pakete verwalten" aus.

    2. Klicken Sie im Dialogfeld "NuGet-Pakete verwalten" auf " Wiederherstellen ", um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.

  2. Öffnen Sie die Paket-Manager Konsole, indem Sie auf die Menüoption "Tools>NuGet Paket-Manager> Paket-Manager Konsole klicken.

    Öffnen der NuGet-Paket-Manager-Konsole

    Öffnen der NuGet-Paket-Manager-Konsole

  3. Führen Sie in der Paket-Manager Konsole den folgenden Befehl aus, um das jQuery.Mobile.MVC-Paket zu installieren.

    jQuery Mobile ist eine Open Source-Bibliothek zum Erstellen touchoptimierter Web-UI. Das jQuery.Mobile.MVC NuGet-Paket enthält Hilfsprogramme zur Verwendung von jQuery Mobile mit einer ASP.NET MVC 4-Anwendung.

    Hinweis

    Wenn Sie den folgenden Befehl ausführen, laden Sie die jQuery.Mobile.MVC-Bibliothek von Nuget herunter.

    PM

    Install-Package jQuery.Mobile.MVC

    Dieser Befehl installiert jQuery Mobile und einige Hilfsdateien, einschließlich der folgenden:

    • Views/Shared/_Layout.Mobile.cshtml: ist ein für einen kleineren Bildschirm optimiertes jQuery Mobile-basiertes Layout. Wenn die Website eine Anforderung von einem mobilen Browser erhält, ersetzt sie das ursprüngliche Layout (_Layout.cshtml) durch diese.

    • Eine Ansichtsschalterkomponente: besteht aus der Partielle Ansicht "Views/Shared/_ViewSwitcher.cshtml " und dem ViewSwitcherController.cs-Controller . Diese Komponente zeigt einen Link auf mobilen Browsern an, über den Benutzer zur Desktopversion der Seite wechseln können.
      Fotogalerieprojekt mit mobiler Unterstützung

      Fotogalerieprojekt mit mobiler Unterstützung

  4. Registrieren Sie die Mobilen Bündel. Öffnen Sie dazu die datei Global.asax.cs , und fügen Sie die folgende Zeile hinzu.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex03 - Registrieren mobiler Bündel)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

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

  5. Führen Sie die Anwendung mit einem Desktopwebbrowser aus.

  6. Öffnen sie den Windows Phone 7-Emulator, der sich im Startmenü befindet | Alle Programme | Windows Phone SDK 7.1 | Windows Phone-Emulator.

  7. Öffnen Sie im Startbildschirm des Telefons Internet Explorer. Sehen Sie sich die URL an, unter der die Anwendung gestartet wurde, und navigieren Sie mit dem Telefonbrowser zu dieser URL (z. B. http://localhost:[PortNumber]/).

    Sie werden feststellen, dass Ihre Anwendung im Windows Phone-Emulator anders aussieht, da die jQuery.Mobile.MVC neue Ressourcen in Ihrem Projekt erstellt hat, die Ansichten anzeigen, die für mobile Geräte optimiert sind.

    Beachten Sie die Nachricht am oberen Rand des Telefons mit dem Link, der zur Desktopansicht wechselt. Darüber hinaus enthält das _Layout.Mobile.cshtml-Layout , das vom installierten Paket erstellt wurde, ein anderes Layout in der Anwendung.

    Hinweis

    Bisher gibt es keinen Link, um zur mobilen Ansicht zurückzukehren. Sie wird in späteren Versionen enthalten sein.

    Mobile Ansicht der Homepage der Fotogalerie

    Mobile Ansicht der Homepage der Fotogalerie

  8. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden.

Aufgabe 2 – Erstellen mobiler Ansichten

In dieser Aufgabe erstellen Sie eine mobile Version der Indexansicht mit Inhalten, die für eine bessere Darstellung auf mobilen Geräten angepasst sind.

  1. Kopieren Sie die Ansichten\Home\Index.cshtml-Ansicht , und fügen Sie sie ein, um eine Kopie zu erstellen, benennen Sie die neue Datei in Index.Mobile.cshtml um.

  2. Öffnen Sie die neue erstellte Index.Mobile.cshtml-Ansicht , und ersetzen Sie das vorhandene <UL-Tag> durch diesen Code. Dazu aktualisieren Sie das <UL-Tag> mit jQuery Mobile-Datenanmerkungen, um die mobilen Designs von jQuery zu verwenden.

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

    Hinweis

    Beachten Sie Folgendes:

    • Das auf listview festgelegte Data-Role-Attribut rendert die Liste mit den Listenansichtsformaten.

    • Das auf "true" festgelegte Data-Inset-Attribut zeigt die Liste mit abgerundeten Rahmen und Rand an.

    • Das auf "true" festgelegte Datenfilter-Attribut generiert ein Suchfeld.

    Weitere Informationen zu jQuery Mobile-Konventionen finden Sie in der Projektdokumentation: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

  3. Drücken Sie STRG+S , um die Änderungen zu speichern.

  4. Wechseln Sie zum Windows Phone-Emulator , und aktualisieren Sie die Website. Beachten Sie das neue Erscheinungsbild der Katalogliste sowie das neue Suchfeld oben. Geben Sie dann ein Wort in das Suchfeld ein (z. B . Tulpen), um eine Suche in der Fotogalerie zu starten.

    Katalog mit Listenansichtsformat mit Filterung

    Katalog mit Listenansichtsformat mit Filterung

    Zusammenfassend haben Sie das Rezept "Mobilizer anzeigen" verwendet, um eine Kopie der Indexansicht mit dem Suffix "Mobil" zu erstellen. Dieses Suffix gibt an, ASP.NET MVC 4 zu ASP.NET, dass jede von einem mobilen Gerät generierte Anforderung diese Kopie des Indexes verwendet. Darüber hinaus haben Sie die mobile Version der Indexansicht aktualisiert, um jQuery Mobile zum Verbessern des Aussehens und Verhalten der Website auf mobilen Geräten zu verwenden.

  5. Wechseln Sie zurück zu Visual Studio, und öffnen Sie Site.Mobile.css unter dem Ordner "Inhalt".

  6. Korrigieren Sie die Positionierung des Fototitels, damit er auf der rechten Seite des Bilds angezeigt wird. Fügen Sie hierzu der datei Site.Mobile.css den folgenden Code hinzu.

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Drücken Sie STRG+S , um die Änderungen zu speichern.

  8. Wechseln Sie zurück zum Windows Phone-Emulator , und aktualisieren Sie die Website. Beachten Sie, dass der Fototitel jetzt richtig positioniert ist.

    Titel, positioniert auf der rechten Seite des Bilds

    Titel, positioniert auf der rechten Seite des Bilds

Aufgabe 3 – jQuery Mobile Designs

Jedes Layout und Widget in jQuery Mobile ist auf ein neues objektorientiertes CSS-Framework ausgelegt, das es ermöglicht, ein vollständiges einheitliches visuelles Designdesign auf Websites und Anwendungen anzuwenden.

Das Standarddesign von jQuery Mobile enthält fünf Farbmuster, die buchstaben (a, b, c, d, e) zur Kurzübersicht erhalten.

In dieser Aufgabe aktualisieren Sie das mobile Layout so, dass es ein anderes Design als die Standardeinstellung verwendet.

  1. Wechseln Sie zurück zu Visual Studio.

  2. Öffnen Sie die Datei _Layout.Mobile.cshtml in Views\Shared.

  3. Suchen Sie das div-Element mit dem Datenrollensatz auf "page", und aktualisieren Sie das Datendesign auf "e".

    <div data-role="page" data-theme="e">

  4. Drücken Sie STRG+S , um die Änderungen zu speichern.

  5. Aktualisieren Sie die Website im Windows Phone-Emulator , und beachten Sie das neue Farbschema.

    Mobiles Layout mit einem anderen Farbschema

    Mobiles Layout mit einem anderen Farbschema

Aufgabe 4 – Verwenden der Ansichtswechselkomponente und der Browserüberschreibungsfeatures

Eine Konvention für mobile optimierte Webseiten besteht darin, einen Link hinzuzufügen, dessen Text etwa die Desktopansicht oder der vollständige Websitemodus ist, mit der Benutzer zu einer Desktopversion der Seite wechseln können. Das jQuery.Mobile.MVC-Paket enthält eine Beispiel-Ansichtswechselkomponente für diesen Zweck, die in der _Layout.Mobile.cshtml-Ansicht verwendet wird.

Link zum Wechseln zur Desktopansicht

Link zum Wechseln zur Desktopansicht

Der Ansichtswechsel verwendet ein neues Feature namens "Browserüberschreibung". Mit diesem Feature kann Ihre Anwendung Anforderungen so behandeln, als ob sie von einem anderen Browser (Benutzer-Agent) stammen als dem, von dem sie tatsächlich stammen.

In dieser Aufgabe untersuchen Sie die Beispielimplementierung eines Ansichtsschalters, der von jQuery.Mobile.MVC hinzugefügt wurde, und die neuen Browserüberschreibungsfeatures in ASP.NET MVC 4.

  1. Wechseln Sie zurück zu Visual Studio.

  2. Öffnen Sie die ansicht _Layout.Mobile.cshtml , die sich unter dem Ordner "Views\Shared" befindet, und beachten Sie, dass die Ansichtsschalterkomponente als Teilansicht referenziert wird.

    Mobiles Layout mit View-Switcher-Komponente

    Mobiles Layout mit View-Switcher-Komponente

  3. Öffnen Sie die partielle Ansicht _ViewSwitcher.cshtml .

    Die Teilansicht verwendet die neue Methode ViewContext.HttpContext.GetOverriddenBrowser(), um den Ursprung der Webanforderung zu bestimmen und den entsprechenden Link anzuzeigen, um entweder zur Desktop- oder mobilen Ansicht zu wechseln.

    Die GetOverriddenBrowser-Methode gibt eine HttpBrowserCapabilitiesBase-Instanz zurück, die dem aktuell für die Anforderung festgelegten Benutzer-Agent entspricht (ist oder überschrieben). Sie können diesen Wert verwenden, um Eigenschaften wie IsMobileDevice abzurufen.

    ViewSwitcher-Teilansicht

    ViewSwitcher-Teilansicht

  4. Öffnen Sie die ViewSwitcherController.cs Klasse, die sich im Ordner "Controller" befindet. Sehen Sie sich an, dass die SwitchView-Aktion von der Verknüpfung in der ViewSwitcher-Komponente aufgerufen wird, und beachten Sie die neuen HttpContext-Methoden.

    • Mit der HttpContext.ClearOverriddenBrowser() -Methode werden alle überschriebenen Benutzer-Agent für die aktuelle Anforderung entfernt.

    • Die HttpContext.SetOverriddenBrowser() -Methode überschreibt den tatsächlichen Benutzer-Agent-Wert der Anforderung mithilfe des angegebenen Benutzer-Agents.
      ViewSwitcher-Controller
      ViewSwitcher-Controller

      Browserüberschreibung ist ein Kernfeature von ASP.NET MVC 4, das auch verfügbar ist, wenn Sie das jQuery.Mobile.MVC-Paket nicht installieren. Dieses Feature wirkt sich jedoch nur auf Ansicht, Layout und Teilansicht aus, und es wirkt sich nicht auf alle Features aus, die vom Request.Browser-Objekt abhängen.

Aufgabe 5 – Hinzufügen des Ansichtswechsels in der Desktopansicht

In dieser Aufgabe aktualisieren Sie das Desktoplayout so, dass er den Ansichtsschalter enthält. Dadurch können mobile Benutzer zur mobilen Ansicht zurückkehren, wenn Sie die Desktopansicht durchsuchen.

  1. Aktualisieren Sie die Website im Windows Phone-Emulator.

  2. Klicken Sie oben im Katalog auf den Link "Desktopansicht ". Beachten Sie, dass in der Desktopansicht kein Ansichtswechsel vorhanden ist, damit Sie zur mobilen Ansicht zurückkehren können.

  3. Wechseln Sie zurück zu Visual Studio, und öffnen Sie die ansicht _Layout.cshtml .

  4. Suchen Sie den Anmeldeabschnitt, und fügen Sie einen Aufruf ein, um die _ViewSwitcher Teilansicht unterhalb der _LogOnPartial Teilansicht zu rendern. Drücken Sie dann STRG+S , um die Änderungen zu speichern.

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Drücken Sie STRG+S , um die Änderungen zu speichern.

  6. Aktualisieren Sie die Seite im Windows Phone-Emulator, und doppelklicken Sie auf den Bildschirm, um den Bildschirm zu vergrößern. Beachten Sie, dass auf der Startseite jetzt der Link "Mobile Ansicht " angezeigt wird, der von mobiler zu Desktopansicht wechselt.

    In der Desktopansicht gerenderte Ansichtsoption

    In der Desktopansicht gerenderte Ansichtsoption

  7. Wechseln Sie erneut zur Mobilen Ansicht, und navigieren Sie zur Seite "Info " (http://localhost[Port]/Start/Info). Beachten Sie, dass die Seite "Info" auch dann angezeigt wird, wenn Sie noch keine About.Mobile.cshtml-Ansicht erstellt haben, mithilfe des mobilen Layouts (_Layout.Mobile.cshtml).

    Seite „Info“

    Informationen zur Seite

  8. Öffnen Sie schließlich die Website in einem Desktopwebbrowser. Beachten Sie, dass keine der vorherigen Updates die Desktopansicht beeinflusst hat.

    PhotoGallery-Desktopansicht

    PhotoGallery-Desktopansicht

Aufgabe 6 – Erstellen neuer Anzeigemodi

Mit dem neuen Anzeigemodi-Feature kann eine Anwendung Ansichten je nach Browser auswählen, der die Anforderung generiert. Wenn beispielsweise ein Desktopbrowser die Startseite anfordert, gibt die Anwendung die Vorlage "Views\Home\Index.cshtml " zurück. Wenn ein mobiler Browser die Startseite anfordert, gibt die Anwendung die Vorlage "Views\Home\Index.mobile.cshtml " zurück.

In dieser Aufgabe erstellen Sie ein angepasstes Layout für iPhone-Geräte, und Sie müssen Anforderungen von iPhone-Geräten simulieren. Dazu können Sie entweder einen iPhone-Emulator/Simulator (z . B. Electric Mobile Simulator) oder einen Browser mit Add-Ons verwenden, mit denen der Benutzer-Agent geändert wird. Anweisungen zum Festlegen der Benutzer-Agent-Zeichenfolge in einem Safari-Browser zum Emulieren eines iPhones finden Sie unter How to Let Safari pretend it's IE in David Alisons Blog.

Beachten Sie, dass diese Aufgabe optional ist und Sie im gesamten Labor fortfahren können, ohne sie auszuführen.

  1. Drücken Sie in Visual Studio UMSCHALT + F5 , um das Debuggen der Anwendung zu beenden.

  2. Öffnen Sie Global.asax.cs , und fügen Sie die folgende using-Anweisung hinzu.

    using System.Web.WebPages;

  3. Fügen Sie der Application_Start-Methode den folgenden hervorgehobenen Code hinzu.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex03 - iPhone DisplayMode)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Sie haben einen neuen DefaultDisplayMode namens "iPhone" in der statischen DisplayModeProvider.Instance.Modes-Liste registriert, die mit jeder eingehenden Anforderung abgeglichen wird. Wenn die eingehende Anforderung die Zeichenfolge "iPhone" enthält, findet ASP.NET MVC die Ansichten, deren Name das Suffix "iPhone" enthält. Der Parameter 0 gibt an, wie spezifisch der neue Modus ist; Diese Ansicht ist beispielsweise spezifischer als die allgemeine Regel ".mobile", die Anforderungen von mobilen Geräten entspricht.

Nachdem dieser Code ausgeführt wird, verwendet Ihre Anwendung, wenn ein iPhone-Browser eine Anforderung generiert, das Layout "Views\Shared\_Layout.iPhone.cshtml ", das Sie in den nächsten Schritten erstellen.

Hinweis

Diese Methode zum Testen der Anforderung für iPhone wurde für Demozwecke vereinfacht und funktioniert möglicherweise nicht wie erwartet für jede iPhone-Benutzer-Agent-Zeichenfolge (z. B. test ist die Groß-/Kleinschreibung).

  1. Erstellen Sie eine Kopie der Datei _Layout.Mobile.cshtml im Ordner "Views\Shared ", und benennen Sie die Kopie in "_Layout.iPhone.cshtml" um.
  2. Öffnen Sie _Layout.iPhone.cshtml , die Sie im vorherigen Schritt erstellt haben.
  3. Suchen Sie das div-Element mit dem auf die Seite festgelegten Datenrollen-Attribut, und ändern Sie das Datendesign-Attribut in "a".
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Jetzt haben Sie drei Layouts in Ihrer ASP.NET MVC 4-Anwendung:

  1. _Layout.cshtml: Standardlayout, das für Desktopbrowser verwendet wird.

  2. _Layout.mobile.cshtml: Standardlayout, das für mobile Geräte verwendet wird.

  3. _Layout.iPhone.cshtml: spezifisches Layout für iPhone-Geräte mit einem anderen Farbschema, um von _Layout.mobile.cshtml zu unterscheiden.

  4. Drücken Sie F5 , um die Anwendung auszuführen und die Website im Windows Phone-Emulator zu durchsuchen.

  5. Öffnen Sie einen iPhone-Simulator (anweisungen zum Installieren und Konfigurieren eines iPhone-Simulators finden Sie in Anhang C ), und navigieren Sie zu der Website. Beachten Sie, dass jedes Telefon die spezifische Vorlage verwendet.

    Verwenden unterschiedlicher Ansichten für jedes mobile Gerät2

    Verwenden unterschiedlicher Ansichten für jedes mobile Gerät

Übung 4: Verwenden asynchroner Controller

Microsoft .NET Framework 4.5 führt neue Sprachfeatures in C# und Visual Basic ein, um eine neue Grundlage für Asynchronie in .NET-Programmierung bereitzustellen. Diese neue Grundlage macht die asynchrone Programmierung ähnlich wie - und etwa so einfach wie - synchrone Programmierung. Sie können nun asynchrone Aktionsmethoden in ASP.NET MVC 4 mithilfe der AsyncController-Klasse schreiben. Sie können asynchrone Aktionsmethoden für lange ausgeführte, nicht CPU-gebundene Anforderungen verwenden. Dadurch wird verhindert, dass der Webserver Arbeit ausführt, während die Anforderung verarbeitet wird. Die AsyncController-Klasse wird in der Regel für lange ausgeführte Webdienstaufrufe verwendet.

In dieser Übung werden die Grundlagen des asynchronen Vorgangs in ASP.NET MVC 4 erläutert. Wenn Sie einen tieferen Tauchgang wünschen, können Sie sich den folgenden Artikel ansehen: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Aufgabe 1 – Implementieren eines asynchronen Controllers

  1. Öffnen Sie die Begin-Lösung , die sich im Ordner "Source/Ex4-Async/Begin/ " befindet. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.

    1. Wenn Sie die bereitgestellte Begin-Lösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü "Projekt", und wählen Sie "NuGet-Pakete verwalten" aus.

    2. Klicken Sie im Dialogfeld "NuGet-Pakete verwalten" auf " Wiederherstellen ", um fehlende Pakete herunterzuladen.

    3. Erstellen Sie schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.

  2. Öffnen Sie die HomeController.cs Klasse aus dem Ordner "Controller" .

  3. Fügen Sie die folgende using-Anweisung hinzu.

    using System.Threading.Tasks;

  4. Aktualisieren Sie die HomeController-Klasse , um von AsyncController zu erben. Controller, die von AsyncController abgeleitet werden, ermöglichen ASP.NET, asynchrone Anforderungen zu verarbeiten, und sie können weiterhin synchrone Aktionsmethoden verwenden.

    public class HomeController : AsyncController
{

  5. Fügen Sie das asynchrone Schlüsselwort zur Index-Methode hinzu, und geben Sie den Typ Task ActionResult<> zurück.

    public async Task<ActionResult> Index()
{
    ...

    Hinweis

    Das asynchrone Schlüsselwort ist eines der neuen Schlüsselwörter, die .NET Framework 4.5 bereitstellt. Es teilt dem Compiler mit, dass diese Methode asynchronen Code enthält. Ein Task -Objekt stellt einen asynchronen Vorgang dar, der zu einem bestimmten Zeitpunkt in Zukunft abgeschlossen werden kann.

  6. Ersetzen Sie den Client. GetAsync() call with the full async version using await keyword as shown below.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex04 - GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Hinweis

    In der vorherigen Version haben Sie die Result-Eigenschaft aus dem Task-Objekt verwendet, um den Thread zu blockieren, bis das Ergebnis zurückgegeben wird (Synchronisierungsversion).

    Durch Hinzufügen des Await-Schlüsselworts wird der Compiler aufgefordert, asynchron auf die vom Methodenaufruf zurückgegebene Aufgabe zu warten. Dies bedeutet, dass der Rest des Codes erst nach Abschluss der erwarteten Methode als Rückruf ausgeführt wird. Eine weitere Zusache ist, dass Sie ihren Try-Catch-Block nicht ändern müssen, um dies zu erledigen: Die Ausnahmen, die im Hintergrund oder im Vordergrund auftreten, werden weiterhin ohne zusätzliche Arbeit mithilfe eines vom Framework bereitgestellten Handlers abgefangen.

  7. Ändern Sie den Code so, dass er mit der asynchronen Implementierung fortsetzt, indem Sie die Zeilen durch den neuen Code ersetzen, wie unten dargestellt.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex04 - ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. Führen Sie die Anwendung aus. Sie werden keine wichtigen Änderungen bemerken, aber Ihr Code blockiert keinen Thread aus dem Threadpool, um die Serverressourcen besser zu nutzen und die Leistung zu verbessern.

    Hinweis

    Weitere Informationen zu den neuen asynchronen Programmierfeatures in der Übung "Asynchrone Programmierung in .NET 4.5 mit C# und Visual Basic" finden Sie im Visual Studio Training Kit.

Aufgabe 2 – Behandeln von Timeouts mit Abbruchtoken

Asynchrone Aktionsmethoden, die Aufgabeninstanzen zurückgeben, können auch Timeouts unterstützen. In dieser Aufgabe aktualisieren Sie den Index-Methodencode, um ein Timeoutszenario mithilfe eines Abbruchtokens zu behandeln.

  1. Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5 , um das Debuggen zu beenden.

  2. Fügen Sie der HomeController.cs-Datei die folgende using-Anweisung hinzu.

    using System.Threading;

  3. Aktualisieren Sie die Index-Aktion, um ein CancellationToken-Argument zu erhalten.

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. Aktualisieren Sie den GetAsync-Aufruf , um das Abbruchtoken zu übergeben.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex04 - SendAsync mit CancellationToken)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. Dekorieren Sie die Index-Methode mit einem AsyncTimeout-Attribut , das auf 500 Millisekunden festgelegt ist, und ein HandleError-Attribut , das für die Behandlung von TaskCanceledException konfiguriert ist, indem Sie zu einer TimedOut-Ansicht umleiten.

    (Codeausschnitt - ASP.NET MVC 4 Lab - Ex04 - Attributes)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. Öffnen Sie die PhotoController-Klasse , und aktualisieren Sie die Gallery-Methode , um die Ausführung von 1000 Millisekunden (1 Sekunde) zu verzögern, um eine lange ausgeführte Aufgabe zu simulieren.

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Öffnen Sie die Datei "Web.config ", und aktivieren Sie benutzerdefinierte Fehler, indem Sie das folgende Element hinzufügen.

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Erstellen Sie eine neue Ansicht in Views\Shared named TimedOut , und verwenden Sie das Standardlayout. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Ansichten\Freigegeben", und wählen Sie "Hinzufügen" | aus. Ansicht.

    Verwenden unterschiedlicher Ansichten für jedes mobile Gerät

    Verwenden unterschiedlicher Ansichten für jedes mobile Gerät

  9. Aktualisieren Sie den TimedOut-Ansichtsinhalt wie unten dargestellt.

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. Führen Sie die Anwendung aus, und navigieren Sie zur Stamm-URL. Wenn Sie einen Thread.Sleep von 1000 Millisekunden hinzugefügt haben, erhalten Sie einen Timeoutfehler, der vom AsyncTimeout-Attribut generiert und vom HandleError-Attribut erfasst wird.

    Timeoutausnahme behandelt

    Timeoutausnahme behandelt

Hinweis

Darüber hinaus können Sie diese Anwendung in Windows Azure-Websites im folgenden Anhang D bereitstellen: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy.

Zusammenfassung

In diesem praktischen Labor haben Sie einige der neuen Features beobachtet, die in ASP.NET MVC 4 ansässig sind. Die folgenden Konzepte wurden erörtert:

  • Nutzen Sie die Verbesserungen der ASP.NET MVC-Projektvorlagen, einschließlich der neuen Projektvorlage für mobile Anwendungen
  • Verwenden des HTML5-Viewport-Attributs und CSS-Medienabfragen zur Verbesserung der Anzeige auf mobilen Geräten
  • Verwenden von jQuery Mobile für progressive Verbesserungen und zum Erstellen von touchoptimierten Web-UI
  • Erstellen mobiler spezifischer Ansichten
  • Verwenden der Ansichtsschalterkomponente zum Umschalten zwischen mobilen und Desktopansichten in der Anwendung
  • Erstellen asynchroner Controller mithilfe der Aufgabenunterstützung

Anhang A: Verwenden von Codeausschnitten

Mit Codeausschnitten verfügen Sie über den gesamten Code, den Sie benötigen, jederzeit. Das Lab-Dokument teilt Ihnen genau mit, wann Sie sie verwenden können, wie in der folgenden Abbildung dargestellt.

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

So fügen Sie einen Codeausschnitt mithilfe der Tastatur hinzu (nur C#)

  1. Platzieren Sie den Cursor an der Stelle, an der Sie den Code einfügen möchten.
  2. Beginnen Sie mit der Eingabe des Codeausschnittnamens (ohne Leerzeichen oder Bindestriche).
  3. Sehen Sie sich an, wie IntelliSense übereinstimmende Codeausschnittnamen anzeigt.
  4. Wählen Sie den richtigen Codeausschnitt aus (oder halten Sie die Eingabe, bis der Name des gesamten Codeausschnitts ausgewählt ist).
  5. Drücken Sie zweimal die TAB-TASTE, um den Codeausschnitt an der Cursorposition einzufügen.

Beginnen Sie mit der Eingabe des Codeausschnittnamens.

Beginnen Sie mit der Eingabe des Codeausschnittnamens.

Drücken Sie die TAB-TASTE, um den hervorgehobenen Codeausschnitt auszuwählen.

Drücken Sie die TAB-TASTE, um den hervorgehobenen Codeausschnitt auszuwählen.

Drücken Sie erneut die TAB-TASTE, und der Codeausschnitt wird erweitert.

Drücken Sie erneut die TAB-TASTE, und der Codeausschnitt wird erweitert.

So fügen Sie einen Codeausschnitt mit der Maus hinzu (C#, Visual Basic und XML)

  1. Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten.
  2. Wählen Sie "Codeausschnitt einfügen" gefolgt von "Codeausschnitte" aus.
  3. Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten, und wählen Sie

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten, und wählen Sie "Codeausschnitt einfügen" aus.

Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Anhang B: Installieren von Visual Studio Express 2012 für Web

Sie können Microsoft Visual Studio Express 2012 für Web oder eine andere "Express"-Version mit dem Microsoft-Webplattform Installer installieren. Die folgenden Anweisungen führen Sie durch die Schritte, die zum Installieren von Visual Studio Express 2012 für Web mit Microsoft-Webplattform Installer erforderlich sind.

  1. Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Wenn Sie das Webplattform-Installationsprogramm bereits installiert haben, können Sie es öffnen und nach dem Produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" suchen.

  2. Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.

  3. Klicken Sie nach dem Öffnen des Webplattform-Installers auf "Installieren ", um das Setup zu starten.

    Installieren von Visual Studio Express

    Installieren von Visual Studio Express

  4. Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf "Ich stimme zu", um den Vorgang fortzusetzen.

    Akzeptieren von Lizenzbedingungen

    Akzeptieren der Lizenzbedingungen

  5. Warten Sie, bis der Download- und Installationsprozess abgeschlossen ist.

    Installationsfortschritt

    Installationsfortschritt

  6. Wenn die Installation abgeschlossen ist, klicken Sie auf "Fertig stellen".

    Abgeschlossene Installation

    Installation abgeschlossen

  7. Klicken Sie auf "Beenden ", um den Webplattform-Installer zu schließen.

  8. Um Visual Studio Express für Web zu öffnen, wechseln Sie zum Startbildschirm, und beginnen Sie mit dem Schreiben von "VS Express", und klicken Sie dann auf die VS Express für Webkachel.

    VS Express für Webkachel

    VS Express für Webkachel

Anhang C: Installieren von WebMatrix 2 und iPhone Simulator

Um Ihre Website auf einem simulierten iPhone-Gerät auszuführen, können Sie die WebMatrix-Erweiterung "Electric Mobile Simulator for the iPhone" verwenden. Außerdem können Sie dieselbe Erweiterung so konfigurieren, dass der Simulator von Visual Studio 2012 ausgeführt wird.

Aufgabe 1 – Installieren von WebMatrix 2

  1. Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Alternativ können Sie das Webplattform-Installationsprogramm bereits öffnen und nach dem Produkt "WebMatrix 2" suchen.

  2. Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.

  3. Klicken Sie nach dem Öffnen des Webplattform-Installers auf "Installieren ", um das Setup zu starten.

    Installieren von WebMatrix 2

    Installieren von WebMatrix 2

  4. Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf "Ich stimme zu", um den Vorgang fortzusetzen.

    Akzeptieren der Lizenzbedingungen

    Akzeptieren der Lizenzbedingungen

  5. Warten Sie, bis der Download- und Installationsprozess abgeschlossen ist.

    Installationsfortschritt

    Installationsfortschritt

  6. Wenn die Installation abgeschlossen ist, klicken Sie auf "Fertig stellen".

    Installation abgeschlossen

    Installation abgeschlossen

  7. Klicken Sie auf "Beenden ", um den Webplattform-Installer zu schließen.

Aufgabe 2 – Installieren der iPhone Simulator Erweiterung

  1. Führen Sie WebMatrix aus, und öffnen Sie eine vorhandene Website, oder erstellen Sie eine neue Website.

  2. Klicken Sie im Menüband "Start" auf die Schaltfläche "Ausführen", und wählen Sie "Neu hinzufügen" aus.

    Hinzufügen einer neuen WebMatrix-Erweiterung

    Hinzufügen einer neuen WebMatrix-Erweiterung

  3. Wählen Sie iPhone Simulator aus, und klicken Sie auf "Installieren".

    WebMatrix-Erweiterungen durchsuchen

    WebMatrix-Erweiterungen durchsuchen

  4. Klicken Sie in den Paketdetails auf "Installieren ", um mit der Erweiterungsinstallation fortzufahren.

    iPhone Simulator-Erweiterung

    iPhone Simulator-Erweiterung

  5. Lesen und akzeptieren Sie die Erweiterungs-EULA.

    WebMatrix-Erweiterung EULA

    WebMatrix-Erweiterung EULA

  6. Jetzt können Sie Ihre Website über WebMatrix mit der iPhone Simulator-Option ausführen.

    Ausführen mit iPhone

    Ausführen mit iPhone

Aufgabe 3 : Konfigurieren von Visual Studio 2012 zum Ausführen des iPhone Simulators

  1. Öffnen Sie Visual Studio 2012 , und öffnen Sie eine beliebige Website, oder erstellen Sie ein neues Projekt.

  2. Klicken Sie auf den Abwärtspfeil auf der Schaltfläche "Ausführen", und wählen Sie "Durchsuchen mit" aus.

    Durchsuchen mit

    Durchsuchen mit

  3. Klicken Sie im Dialogfeld "Durchsuchen mit" auf "Hinzufügen".

  4. Verwenden Sie im Dialogfeld "Programm hinzufügen" die folgenden Werte:

    • Programm: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (aktualisieren Sie den Pfad entsprechend).

    • Argumente: "1"

    • Anzeigename: iPhone Simulator

      Programm hinzufügen

      Programm zum Durchsuchen hinzufügen

  5. Klicken Sie auf "OK", und schließen Sie die Dialogfelder.

  6. Jetzt können Sie Ihre Webanwendungen im iPhone-Simulator von Visual Studio 2012 ausführen.

    Durchsuchen mit dem iPhone Simulator

    Durchsuchen mit dem iPhone Simulator

Anhang D: Veröffentlichen einer ASP.NET MVC 4-Anwendung mit Web Deploy

In diesem Anhang wird gezeigt, wie Sie eine neue Website über das Windows Azure-Verwaltungsportal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie die von Windows Azure bereitgestellte Web Deploy-Veröffentlichungsfunktion nutzen.

Aufgabe 1 – Erstellen einer neuen Website über das Windows Azure-Portal

  1. Wechseln Sie zum Windows Azure-Verwaltungsportal , und melden Sie sich mit den Microsoft-Anmeldeinformationen an, die Ihrem Abonnement zugeordnet sind.

    Hinweis

    Mit Windows Azure können Sie 10 ASP.NET Websites kostenlos hosten und dann skalieren, wenn Ihr Datenverkehr wächst. Sie können sich hier registrieren.

    Anmelden bei Windows Azure-Portal

    Anmelden beim Windows Azure-Verwaltungsportal

  2. Klicken Sie auf der Befehlsleiste auf "Neu ".

    Erstellen einer neuen Website

    Erstellen einer neuen Website

  3. Klicken Sie auf "Computewebsite | ". Wählen Sie dann die Option "Schnellerstellung " aus. Geben Sie eine verfügbare URL für die neue Website an, und klicken Sie auf " Website erstellen".

    Hinweis

    Eine Windows Azure-Website ist der Host für eine Webanwendung, die in der Cloud ausgeführt wird, die Sie steuern und verwalten können. Mit der Option "Schnellerstellung" können Sie eine fertige Webanwendung von außerhalb des Portals auf der Windows Azure-Website bereitstellen. Sie enthält keine Schritte zum Einrichten einer Datenbank.

    Erstellen einer neuen Website mithilfe der Schnellerstellung

    Erstellen einer neuen Website mithilfe der Schnellerstellung

  4. Warten Sie, bis die neue Website erstellt wird.

  5. Nachdem die Website erstellt wurde, klicken Sie auf den Link unter der URL-Spalte . Überprüfen Sie, ob die neue Website funktioniert.

    Navigieren zur neuen Website

    Navigieren zur neuen Website

    Website wird ausgeführt

    Website wird ausgeführt

  6. Wechseln Sie zurück zum Portal, und klicken Sie auf den Namen der Website unter der Spalte "Name ", um die Verwaltungsseiten anzuzeigen.

    Öffnen der Websiteverwaltungsseiten

    Öffnen der Websiteverwaltungsseiten

  7. Klicken Sie auf der Seite "Dashboard " im Abschnitt "Schnellblick " auf den Link "Veröffentlichungsprofil herunterladen".

    Hinweis

    Das Veröffentlichungsprofil enthält alle Informationen, die zum Veröffentlichen einer Webanwendung auf einer Windows Azure-Website für jede aktivierte Publikationsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die erforderlich sind, um eine Verbindung mit jedem der Endpunkte herzustellen und zu authentifizieren, für die eine Publikationsmethode aktiviert ist. Microsoft WebMatrix 2, Microsoft Visual Studio Express für Web und Microsoft Visual Studio 2012 unterstützen das Lesen von Veröffentlichungsprofilen, um die Konfiguration dieser Programme zum Veröffentlichen von Webanwendungen auf Windows Azure-Websites zu automatisieren.

    Herunterladen des Veröffentlichungsprofils der Website

    Herunterladen des Veröffentlichungsprofils der Website

  8. Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. In dieser Übung erfahren Sie, wie Sie diese Datei verwenden, um eine Webanwendung in einer Windows Azure-Website aus Visual Studio zu veröffentlichen.

    Speichern der Veröffentlichungsprofildatei

    Speichern der Veröffentlichungsprofildatei

Aufgabe 2 : Konfigurieren des Datenbankservers

Wenn Ihre Anwendung SQL Server-Datenbanken verwendet, müssen Sie einen SQL-Datenbank Server erstellen. Wenn Sie eine einfache Anwendung bereitstellen möchten, die sql Server nicht verwendet, überspringen Sie diese Aufgabe möglicherweise.

  1. Sie benötigen einen SQL-Datenbank Server zum Speichern der Anwendungsdatenbank. Sie können die SQL-Datenbank Server aus Ihrem Abonnement im Windows Azure-Verwaltungsportal im Dashboard von Sql Databases | Servers anzeigen | . Wenn Sie keinen Server erstellt haben, können Sie einen mit der Schaltfläche "Hinzufügen " auf der Befehlsleiste erstellen. Notieren Sie sich den Servernamen und die URL, den Administratoranmeldungsnamen und das Kennwort, wie Sie sie in den nächsten Aufgaben verwenden werden. Erstellen Sie die Datenbank noch nicht, da sie in einer späteren Phase erstellt wird.

    SQL-Datenbank Serverdashboard

    SQL-Datenbank Serverdashboard

  2. In der nächsten Aufgabe testen Sie die Datenbankverbindung von Visual Studio, aus diesem Grund müssen Sie Ihre lokale IP-Adresse in die Liste der zulässigen IP-Adressen des Servers aufnehmen. Klicken Sie dazu auf "Konfigurieren", wählen Sie die IP-Adresse aus der aktuellen Client-IP-Adresse aus, fügen Sie sie in die Textfelder "START-IP-Adresse " und "IP-Adresse beenden" ein, und klicken Sie auf die Add-client-ip-address-ok-button Schaltfläche.

    Hinzufügen der Client-IP-Adresse

    Hinzufügen der Client-IP-Adresse

  3. Nachdem die Client-IP-Adresse der Liste zulässiger IP-Adressen hinzugefügt wurde, klicken Sie auf " Speichern ", um die Änderungen zu bestätigen.

    Änderungen bestätigen

    Änderungen bestätigen

Aufgabe 3 – Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

  1. Wechseln Sie zurück zur ASP.NET MVC 4-Lösung. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Websiteprojekt, und wählen Sie "Veröffentlichen" aus.

    Veröffentlichen der Anwendung

    Veröffentlichen der Website

  2. Importieren Sie das Veröffentlichungsprofil, das Sie in der ersten Aufgabe gespeichert haben.

    Importieren des Veröffentlichungsprofils

    Importieren des Veröffentlichungsprofils

  3. Klicken Sie auf " Verbindung überprüfen". Klicken Sie nach Abschluss der Überprüfung auf Weiter.

    Hinweis

    Die Überprüfung ist abgeschlossen, sobald neben der Schaltfläche "Verbindung überprüfen" ein grünes Häkchen angezeigt wird.

    Überprüfen der Verbindung

    Überprüfen der Verbindung

  4. Klicken Sie auf der Seite "Einstellungen " im Abschnitt "Datenbanken " auf die Schaltfläche neben dem Textfeld ihrer Datenbankverbindung (d. h. DefaultConnection).

    Webbereitstellungskonfiguration

    Webbereitstellungskonfiguration

  5. Konfigurieren Sie die Datenbankverbindung wie folgt:

    • Geben Sie im Servernamen ihre SQL-Datenbank Server-URL mit dem Präfix tcp: ein.

    • Geben Sie unter " Benutzername" den Anmeldenamen des Serveradministrators ein.

    • Geben Sie im Kennwort das Anmeldekennwort ihres Serveradministrators ein.

    • Geben Sie einen neuen Datenbanknamen ein, z. B. MVC4SampleDB.

      Konfigurieren von Ziel-Verbindungszeichenfolge

      Konfigurieren von Ziel-Verbindungszeichenfolge

  6. Klicken Sie dann auf OK. Wenn Sie aufgefordert werden, die Datenbank zu erstellen, klicken Sie auf "Ja".

    Erstellen der Datenbank

    Erstellen der Datenbank

  7. Die Verbindungszeichenfolge, die Sie zum Herstellen einer Verbindung mit SQL-Datenbank in Windows Azure verwenden, wird im Textfeld "Standardverbindung" angezeigt. Klicken Sie dann auf Weiter.

    Verbindungszeichenfolge, die auf SQL-Datenbank zeigt

    Verbindungszeichenfolge, die auf SQL-Datenbank zeigt

  8. Klicken Sie auf der Seite "Vorschau " auf "Veröffentlichen".

    Veröffentlichen der Webanwendung

    Veröffentlichen der Webanwendung

  9. Sobald der Veröffentlichungsprozess abgeschlossen ist, öffnet Ihr Standardbrowser die veröffentlichte Website.

    Anwendung veröffentlicht in Windows Azure

    Anwendung veröffentlicht in Windows Azure