Freigeben über


Neue Funktionen in Web Forms in ASP.NET 4.5

von Web Camps Team

Die neue Version von ASP.NET Web Forms führt eine Reihe von Verbesserungen ein, die sich auf die Verbesserung der Benutzererfahrung bei der Arbeit mit Daten konzentrieren.

In früheren Versionen von Web Forms haben Sie bei Verwendung der Datenbindung zum Ausgeben des Werts eines Objektelements die Datenbindungsausdrücke Bind() oder Eval() verwendet. In der neuen Version von ASP.NET können Sie mithilfe einer neuen ItemType-Eigenschaft deklarieren, an welche Art von Daten ein Steuerelement gebunden werden soll. Wenn Sie diese Eigenschaft festlegen, können Sie eine stark typisierte Variable verwenden, um alle Vorteile der Visual Studio-Entwicklungsumgebung wie IntelliSense, Membernavigation und Kompilierzeitüberprüfung zu nutzen.

Mit den datengebundenen Steuerelementen können Sie jetzt auch ihre eigenen benutzerdefinierten Methoden zum Auswählen, Aktualisieren, Löschen und Einfügen von Daten angeben, was die Interaktion zwischen den Seitensteuerelementen und Ihrer Anwendungslogik vereinfacht. Darüber hinaus wurden Modellbindungsfunktionen zu ASP.NET hinzugefügt. Dies bedeutet, dass Sie Daten von der Seite direkt zu Methodentypparametern zuordnen können.

Die Überprüfung von Benutzereingaben sollte auch mit der neuesten Version von Web Forms einfacher sein. Sie können Ihre Modellklassen jetzt mit Validierungsattributen aus dem System.ComponentModel.DataAnnotations-Namespace kommentieren und anfordern, dass alle Ihre Websitesteuerelemente die Benutzereingabe anhand dieser Informationen überprüfen. Die clientseitige Validierung in Web Forms ist jetzt in jQuery integriert und bietet übersichtlicheren clientseitigen Code und unauffällige JavaScript-Features.

Im Bereich der Anforderungsvalidierung wurden Verbesserungen vorgenommen, um das selektive Deaktivieren der Anforderungsüberprüfung für bestimmte Teile Ihrer Anwendungen oder das Lesen ungültiger Anforderungsdaten zu vereinfachen.

Es wurden einige Verbesserungen an Web Forms Serversteuerelementen vorgenommen, um die vorteile der neuen Features von HTML5 zu nutzen:

  • Die TextMode-Eigenschaft des TextBox-Steuerelements wurde aktualisiert, um die neuen HTML5-Eingabetypen wie email, datetime usw. zu unterstützen.
  • Das FileUpload-Steuerelement unterstützt jetzt mehrere Dateiuploads von Browsern, die dieses HTML5-Feature unterstützen.
  • Validierungssteuerelemente unterstützen jetzt das Überprüfen von HTML5-Eingabeelementen.
  • Neue HTML5-Elemente mit Attributen, die eine URL darstellen, unterstützen jetzt runat="server". Daher können Sie ASP.NET Konventionen in URL-Pfaden verwenden, z. B. den ~-Operator, <um den Anwendungsstamm darzustellen (z. B. video runat="server" src="~/myVideo.wmv"></video>).
  • Das UpdatePanel-Steuerelement wurde korrigiert, um das Bereitstellen von HTML5-Eingabefeldern zu unterstützen.

Im offiziellen ASP.NET-Portal finden Sie weitere Beispiele für die neuen Features in ASP.NET WebForms 4.5: Neuerungen in ASP.NET 4.5 und Visual Studio 2012

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten.

Ziele

In diesem praktischen Lab erfahren Sie, wie Sie:

  • Verwenden von stark typisierten Datenbindungsausdrücken
  • Verwenden neuer Modellbindungsfeatures in Web Forms
  • Verwenden von Wertanbietern zum Zuordnen von Seitendaten zu CodeBehind-Methoden
  • Verwenden von Datenanmerkungen für die Überprüfung von Benutzereingaben
  • Nutzen Sie die unaufdringliche clientseitige Validierung mit jQuery in Web Forms
  • Implementieren einer präzisen Anforderungsüberprüfung
  • Implementieren der asynchronen Seitenverarbeitung in Web Forms

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um dieses Lab abzuschließen:

Einrichten

Installieren von Codeausschnitten

Der Einfachheit halber ist ein Großteil des Codes, den Sie in diesem Lab verwalten, als Visual Studio-Codeausschnitte verfügbar. Führen Sie zum Installieren der Codeausschnitte die Datei .\Source\Setup\CodeSnippets.vsi aus.

Wenn Sie mit den Visual Studio Code-Codeausschnitten nicht vertraut sind und erfahren möchten, wie Sie sie verwenden, können Sie den Anhang dieses Dokuments "Anhang C: Verwenden von Codeausschnitten" lesen.

Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

  1. Übung 1: Modellbindung in ASP.NET Web Forms
  2. Übung 2: Datenüberprüfung
  3. Übung 3: Asynchrone Seitenverarbeitung in ASP.NET Web Forms

Hinweis

Jede Übung wird von einem End-Ordner 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 Durchlaufen der Übungen benötigen.

Geschätzte Zeit zum Abschließen dieses Labs: 60 Minuten.

Übung 1: Modellbindung in ASP.NET Web Forms

Die neue Version von ASP.NET Web Forms führt eine Reihe von Verbesserungen ein, die sich auf die Verbesserung der Benutzererfahrung bei der Arbeit mit Daten konzentrieren. In dieser Übung erfahren Sie mehr über stark typisierte Datensteuerelemente und Modellbindungen.

Aufgabe 1: Verwenden von Strongly-Typed Data-Bindings

In dieser Aufgabe entdecken Sie die neuen stark typisierten Bindungen, die in ASP.NET 4.5 verfügbar sind.

  1. Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex1-ModelBinding/Begin/.

    1. Sie müssen 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 Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

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

  2. Öffnen Sie die Seite Customers.aspx . Platzieren Sie eine nicht nummerierte Liste im Standard-Steuerelement, und fügen Sie ein Repeater-Steuerelement ein, um jeden Kunden aufzulisten. Legen Sie den Repeaternamen auf customersRepeater fest, wie im folgenden Code gezeigt.

    In früheren Versionen von Web Forms haben Sie beim Verwenden der Datenbindung zum Ausgeben des Werts eines Members für ein Objekt, an das Sie Daten binden möchten, einen Datenbindungsausdruck zusammen mit einem Aufruf der Eval-Methode verwendet, wobei der Name des Members als Zeichenfolge übergeben wird.

    Zur Laufzeit verwenden diese Aufrufe von Eval Reflektion für das aktuell gebundene Objekt, um den Wert des Members mit dem angegebenen Namen zu lesen und das Ergebnis im HTML-Code anzuzeigen. Dieser Ansatz macht es sehr einfach, Daten an beliebige, unförmige Daten zu binden.

    Leider verlieren Sie viele der großartigen Features für die Entwicklungszeit in Visual Studio, einschließlich IntelliSense für Membernamen, Unterstützung für navigation (z. B. Gehe zu Definition) und Kompilierzeitüberprüfung.

    ...
    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
      <h3>Customers</h3>
      <ul>
        <asp:Repeater ID="customersRepeater" runat="server">
          <ItemTemplate>
                <li>
                    <%# Eval("FirstName") %>
                    <%# Eval("LastName") %>
                </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    
  3. Öffnen Sie die Datei Customers.aspx.cs .

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

    using System.Linq;
    
  5. Fügen Sie in der Page_Load-Methode Code hinzu, um den Repeater mit der Kundenliste aufzufüllen.

    (Codeausschnitt – Web Forms Lab – Ex01 – Binden von Kundendatenquelle)

    protected void Page_Load(object sender, EventArgs e)
    {
        using (var db = new WebFormsLab.Model.ProductsContext())
        {
            this.customersRepeater.DataSource = db.Customers.ToList();
            this.customersRepeater.DataBind();
        }
    }
    

    Die Lösung verwendet EntityFramework zusammen mit CodeFirst, um die Datenbank zu erstellen und darauf zuzugreifen. Im folgenden Code ist customersRepeater an eine materialisierte Abfrage gebunden, die alle Kunden aus der Datenbank zurückgibt.

  6. Drücken Sie F5 , um die Lösung auszuführen, und wechseln Sie zur Seite Kunden , um den Repeater in Aktion zu sehen. Da die Lösung CodeFirst verwendet, wird die Datenbank beim Ausführen der Anwendung in Ihrem lokalen SQL Express-instance erstellt und aufgefüllt.

    Auflisten der Kunden mit einem Repeater

    Auflisten der Kunden mit einem Repeater

    Hinweis

    In Visual Studio 2012 ist IIS Express der Standardwebentwicklungsserver.

  7. Schließen Sie den Browser, und wechseln Sie zurück zu Visual Studio.

  8. Ersetzen Sie nun die -Implementierung, um stark typisierte Bindungen zu verwenden. Öffnen Sie die Seite Customers.aspx , und verwenden Sie das neue ItemType-Attribut im Repeater, um den Kundentyp als Bindungstyp festzulegen.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <ul>
        <asp:Repeater ID="customersRepeater" 
                      ItemType="WebFormsLab.Model.Customer" 
                      runat="server">
          <ItemTemplate>
             ...
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    

    Mit der ItemType-Eigenschaft können Sie deklarieren, an welchen Datentyp das Steuerelement gebunden werden soll, und ermöglicht es Ihnen, eine stark typisierte Bindung innerhalb des datengebundenen Steuerelements zu verwenden.

  9. Ersetzen Sie den ItemTemplate-Inhalt durch den folgenden Code.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      ...
      <ul>
        <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server">
          <ItemTemplate>
            <li>
              <a href="CustomerDetails.aspx?id=<%#: Item.Id %>">
                <%#: Item.FirstName %> <%#: Item.LastName %>
              </a>
            </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
      <a href="CustomerDetails.aspx">Add a New Customer</a>
    </asp:Content>
    

    Ein Nachteil bei den oben genannten Ansätzen ist, dass die Aufrufe von Eval() und Bind() spät gebunden sind, was bedeutet, dass Sie Zeichenfolgen übergeben, um die Eigenschaftennamen darzustellen. Dies bedeutet, dass Sie IntelliSense für die Membernamen, unterstützung für die Codenavigation (z. B. Gehe zu Definition) und keine Unterstützung für die Überprüfung zur Kompilierzeit erhalten.

    Das Festlegen der ItemType-Eigenschaft bewirkt, dass zwei neue typisierte Variablen im Bereich der Datenbindungsausdrücke generiert werden: Item und BindItem. Sie können diese stark typisierten Variablen in den Datenbindungsausdrücken verwenden und alle Vorteile der Visual Studio-Entwicklungsumgebung nutzen.

    Das im Ausdruck verwendete ": " codiert die Ausgabe automatisch in HTML, um Sicherheitsprobleme (z. B. websiteübergreifende Skriptangriffe) zu vermeiden. Diese Notation war seit .NET 4 für das Schreiben von Antworten verfügbar, ist aber jetzt auch in Datenbindungsausdrücken verfügbar.

    Hinweis

    Der Item-Member funktioniert für eine unidirektionale Bindung. Wenn Sie eine bidirektionale Bindung durchführen möchten, verwenden Sie den BindItem-Member .

    IntelliSense-Unterstützung für stark typisierte Bindung

    IntelliSense-Unterstützung für stark typisierte Bindung

  10. Drücken Sie F5 , um die Lösung auszuführen, und wechseln Sie zur Seite Kunden, um sicherzustellen, dass die Änderungen wie erwartet funktionieren.

    Auflisten von Kundendetails

    Auflisten von Kundendetails

  11. Schließen Sie den Browser, und wechseln Sie zurück zu Visual Studio.

Aufgabe 2: Einführung der Modellbindung in Web Forms

In früheren Versionen von ASP.NET Web Forms mussten Sie ein Datenquellenobjekt verwenden, wenn Sie eine bidirektionale Datenbindung durchführen wollten, sowohl beim Abrufen als auch beim Aktualisieren von Daten. Dies kann eine Objektdatenquelle, eine SQL-Datenquelle, eine LINQ-Datenquelle usw. sein. Wenn Ihr Szenario jedoch benutzerdefinierten Code für die Verarbeitung der Daten erforderte, mussten Sie die Objektdatenquelle verwenden, was einige Nachteile mit sich brachte. Beispielsweise mussten Sie komplexe Typen vermeiden und Ausnahmen beim Ausführen der Validierungslogik behandeln.

In der neuen Version von ASP.NET Web Forms unterstützen die datengebundenen Steuerelemente die Modellbindung. Dies bedeutet, dass Sie Select-, Update-, Insert- und Delete-Methoden direkt im datengebundenen Steuerelement angeben können, um Logik aus Ihrer CodeBehind-Datei oder aus einer anderen Klasse aufzurufen.

Um dies zu erfahren, verwenden Sie eine GridView, um die Produktkategorien mithilfe des neuen SelectMethod-Attributs aufzulisten. Mit diesem Attribut können Sie eine Methode zum Abrufen der GridView-Daten angeben.

  1. Öffnen Sie die Seite Products.aspx , und fügen Sie eine GridView ein. Konfigurieren Sie die GridView wie unten gezeigt, um stark typisierte Bindungen zu verwenden und Sortierung und Paging zu aktivieren.

    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
     <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryID">
        <Columns>
          <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
          <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
          <asp:BoundField DataField="Description" HeaderText="Description" />
          <asp:TemplateField HeaderText="# of Products">
            <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
    </asp:Content>
    
  2. Verwenden Sie das neue SelectMethod-Attribut , um GridView so zu konfigurieren, dass eine GetCategories-Methode zum Auswählen der Daten aufgerufen wird.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories">
      <Columns>
        <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
        <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="# of Products">
          <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
    
  3. Öffnen Sie die CodeBehind-Datei Products.aspx.cs , und fügen Sie die folgenden using-Anweisungen hinzu.

    (Codeausschnitt – Web Forms Lab – Ex01 – Namespaces)

    using System.Collections.Generic;
    using System.Data.Entity;
    using System.Data.Entity.Infrastructure;
    using System.Linq;
    using WebFormsLab.Model;
    
  4. Fügen Sie ein privates Element in der Products-Klasse hinzu, und weisen Sie eine neue instance von ProductsContext zu. Diese Eigenschaft speichert den Entity Framework-Datenkontext, mit dem Sie eine Verbindung mit der Datenbank herstellen können.

    public partial class Products : System.Web.UI.Page
    {
        private ProductsContext db = new ProductsContext();
        ...
    
  5. Erstellen Sie eine GetCategories-Methode , um die Liste der Kategorien mithilfe von LINQ abzurufen. Die Abfrage enthält die Products-Eigenschaft , sodass gridView die Anzahl der Produkte für jede Kategorie anzeigen kann. Beachten Sie, dass die -Methode ein unformatiertes IQueryable-Objekt zurückgibt, das die Abfrage darstellt, die später im Seitenlebenszyklus ausgeführt werden soll.

    (Codeausschnitt – Web Forms Lab – Ex01 – GetCategories)

    public IQueryable<Category> GetCategories()
    {
      var query = this.db.Categories
        .Include(c => c.Products);
    
      return query;
    }
    

    Hinweis

    In früheren Versionen von ASP.NET Web Forms das Aktivieren von Sortierung und Paging mithilfe Ihrer eigenen Repositorylogik innerhalb eines Objektdatenquellekontexts erforderlich, um Ihren eigenen benutzerdefinierten Code zu schreiben und alle erforderlichen Parameter zu empfangen. Da nun die Datenbindungsmethoden IQueryable zurückgeben können und dies eine Abfrage darstellt, die noch ausgeführt werden soll, können ASP.NET die Abfrage ändern, um die richtigen Sortierungs- und Pagingparameter hinzuzufügen.

  6. Drücken Sie F5 , um mit dem Debuggen der Website zu beginnen, und wechseln Sie zur Seite Produkte. Sie sollten sehen, dass die GridView mit den Kategorien aufgefüllt wird, die von der GetCategories-Methode zurückgegeben werden.

    Auffüllen einer GridView mithilfe der Modellbindung

    Auffüllen einer GridView mithilfe der Modellbindung

  7. Drücken Sie UMSCHALT+F5 Debuggen beenden.

Aufgabe 3: Wertanbieter in der Modellbindung

Mit der Modellbindung können Sie nicht nur benutzerdefinierte Methoden angeben, um mit Ihren Daten direkt im datengebundenen Steuerelement zu arbeiten, sondern sie können auch Daten von der Seite zu Parametern aus diesen Methoden zuordnen. Im Methodenparameter können Sie Wertanbieterattribute verwenden, um die Datenquelle des Werts anzugeben. Zum Beispiel:

  • Steuerelemente auf der Seite
  • Abfragezeichenfolgenwerte
  • Anzeigen von Daten
  • Sitzungszustand
  • Cookies
  • Gepostete Formulardaten
  • Ansichtsstatus
  • Benutzerdefinierte Wertanbieter werden ebenfalls unterstützt.

Wenn Sie ASP.NET MVC 4 verwendet haben, werden Sie feststellen, dass die Modellbindungsunterstützung ähnlich ist. Tatsächlich wurden diese Features aus ASP.NET MVC übernommen und in die System.Web-Assembly verschoben, um sie auch auf Web Forms verwenden zu können.

In dieser Aufgabe aktualisieren Sie GridView, um die Ergebnisse nach der Anzahl der Produkte für jede Kategorie zu filtern und den Filterparameter mit Modellbindung zu erhalten.

  1. Zurück zur Seite Products.aspx.

  2. Fügen Sie oben in der GridView eine Bezeichnung und ein ComboBox-Element hinzu, um die Anzahl der Produkte für jede Kategorie auszuwählen, wie unten gezeigt.

    <h3>Categories</h3>
    <asp:Label ID="Label1" runat="server" AssociatedControlID="minProductsCount">
         Show categories with at least this number of products:
    </asp:Label>
    <asp:DropDownList runat="server" ID="minProductsCount" AutoPostBack="true">
      <asp:ListItem Value="" Text="-" />
      <asp:ListItem Text="1" />
      <asp:ListItem Text="3" />
      <asp:ListItem Text="5" />
    </asp:DropDownList>
    <br/>
    
  3. Fügen Sie der GridView eine EmptyDataTemplate hinzu, um eine Meldung anzuzeigen, wenn keine Kategorien mit der ausgewählten Anzahl von Produkten vorhanden sind.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories">
      <Columns>
        <asp:BoundField DataField="CategoryId" HeaderText="ID" />
        <asp:BoundField DataField="CategoryName" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="# of Products">
          <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
        </asp:TemplateField>
      </Columns>
      <EmptyDataTemplate>
          No categories found with a product count of <%#: minProductsCount.SelectedValue %>
      </EmptyDataTemplate>
    </asp:GridView>
    
  4. Öffnen Sie den CodeBehind Products.aspx.cs , und fügen Sie die folgende using-Anweisung hinzu.

    using System.Web.ModelBinding;
    
  5. Ändern Sie die GetCategories-Methode , um ein ganzzahliges minProductsCount-Argument zu erhalten, und filtern Sie die zurückgegebenen Ergebnisse. Ersetzen Sie dazu die -Methode durch den folgenden Code.

    (Codeausschnitt – Web Forms Lab – Ex01 – GetCategories 2)

    public IQueryable<Category> GetCategories([Control]int? minProductsCount)
    {
        var query = this.db.Categories
        .Include(c => c.Products);
    
        if (minProductsCount.HasValue)
        {
            query = query.Where(c => c.Products.Count >= minProductsCount);
        }
    
        return query;
    }
    

    Das neue [Control]- Attribut für das minProductsCount-Argument informiert ASP.NET darüber, dass sein Wert mithilfe eines Steuerelements auf der Seite aufgefüllt werden muss. ASP.NET sucht nach einem Beliebigen Steuerelement, das dem Namen des Arguments (minProductsCount) entspricht, und führt die erforderliche Zuordnung und Konvertierung durch, um den Parameter mit dem Steuerelementwert zu füllen.

    Alternativ stellt das Attribut einen überladenen Konstruktor bereit, mit dem Sie das Steuerelement angeben können, von dem der Wert abgerufen werden soll.

    Hinweis

    Ein Ziel der Datenbindungsfeatures besteht darin, die Menge an Code zu reduzieren, die für die Seiteninteraktion geschrieben werden muss. Neben dem [Control]-Wertanbieter können Sie andere Modellbindungsanbieter in Ihren Methodenparametern verwenden. Einige davon sind in der Aufgabeneinführung aufgeführt.

  6. Drücken Sie F5 , um mit dem Debuggen der Website zu beginnen, und wechseln Sie zur Seite Produkte. Wählen Sie eine Reihe von Produkten in der Dropdownliste aus, und beachten Sie, wie gridView jetzt aktualisiert wird.

    Filtern der GridView mit einem Dropdownlistenwert

    Filtern der GridView mit einem Dropdownlistenwert

  7. Beenden des Debuggens.

Aufgabe 4: Verwenden der Modellbindung zum Filtern

In dieser Aufgabe fügen Sie ein zweites untergeordnetes GridView-Objekt hinzu, um die Produkte innerhalb der ausgewählten Kategorie anzuzeigen.

  1. Öffnen Sie die Seite Products.aspx , und aktualisieren Sie die Kategorien GridView, um die Schaltfläche Auswählen automatisch zu generieren.

    <asp:GridView ID="categoriesGrid" runat="server"
      AutoGenerateColumns="false"
      ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
      SelectMethod="GetCategories"
      AutoGenerateSelectButton="true">
    
  2. Fügen Sie unten eine zweite GridView mit dem Namen productsGrid hinzu. Legen Sie itemType auf WebFormsLab.Model.Product, DataKeyNames auf ProductId und SelectMethod auf GetProducts fest. Legen Sie AutoGenerateColumns auf false fest, und fügen Sie die Spalten für ProductId, ProductName, Description und UnitPrice hinzu.

    <h3>Products</h3>
    <asp:GridView ID="productsGrid" runat="server" 
        CellPadding="4"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Product"
        DataKeyNames="ProductId"
        SelectMethod="GetProducts">
        <Columns>
            <asp:BoundField DataField="ProductId" HeaderText="ID" />
            <asp:BoundField DataField="ProductName" HeaderText="Name" />
            <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
            <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
        </Columns>
        <EmptyDataTemplate>
            Select a category above to see its products
        </EmptyDataTemplate>
    </asp:GridView>
    
  3. Öffnen Sie die CodeBehind-Datei Products.aspx.cs . Implementieren Sie die GetProducts-Methode , um die Kategorie-ID aus der Kategorie GridView zu erhalten und die Produkte zu filtern. Die Modellbindung legt den Parameterwert mithilfe der ausgewählten Zeile in den KategorienGrid fest. Da der Argumentname und der Steuerelementname nicht übereinstimmen, sollten Sie den Namen des Steuerelements im Control-Wertanbieter angeben.

    (Codeausschnitt – Web Forms Lab – Ex01 – GetProducts)

    public IEnumerable<Product> GetProducts([Control("categoriesGrid")]int? categoryId)
    {
        return this.db.Products.Where(p => p.CategoryId == categoryId);
    }
    

    Hinweis

    Dieser Ansatz erleichtert das Testen dieser Methoden. In einem Komponententestkontext, in dem Web Forms nicht ausgeführt wird, führt das [Control]-Attribut keine bestimmte Aktion aus.

  4. Öffnen Sie die Seite Products.aspx , und suchen Sie nach den Produkten GridView. Aktualisieren Sie die Produkte GridView, um einen Link zum Bearbeiten des ausgewählten Produkts anzuzeigen.

    <h3>Products</h3>
    <asp:GridView ID="productsGrid" runat="server" 
      CellPadding="4"
      AutoGenerateColumns="false"
      ItemType="WebFormsLab.Model.Product"
      DataKeyNames="ProductId"
      SelectMethod="GetProducts">
      <Columns>
        <asp:TemplateField>
          <ItemTemplate>
            <a href="ProductDetails.aspx?productId=<%#: Item.ProductId %>">View</a>
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ProductId" HeaderText="ID" />
        <asp:BoundField DataField="ProductName" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
      </Columns>
      <EmptyDataTemplate>
        Select a category above to see its products
      </EmptyDataTemplate>
    </asp:GridView>
    
  5. Öffnen Sie die Seite ProductDetails.aspx codebehind, und ersetzen Sie die SelectProduct-Methode durch den folgenden Code.

    (Codeausschnitt – Web Forms Lab – Ex01 – SelectProduct-Methode)

    public Product SelectProduct([QueryString]int? productId)
    {
        return this.db.Products.Find(productId);
    }
    

    Hinweis

    Beachten Sie, dass das [QueryString] -Attribut verwendet wird, um den Methodenparameter aus einem productId-Parameter in der Abfragezeichenfolge zu füllen.

  6. Drücken Sie F5 , um mit dem Debuggen der Website zu beginnen, und wechseln Sie zur Seite Produkte. Wählen Sie eine beliebige Kategorie aus den Kategorien GridView aus, und beachten Sie, dass die Produkte GridView aktualisiert werden.

    Produkte aus der ausgewählten Kategorie

    Anzeigen von Produkten aus der ausgewählten Kategorie

  7. Klicken Sie auf den Link Anzeigen eines Produkts, um die Seite ProductDetails.aspx zu öffnen.

    Beachten Sie, dass die Seite das Produkt mit SelectMethod mithilfe des parameters productId aus der Abfragezeichenfolge abruft.

    Anzeigen der Produktdetails

    Anzeigen der Produktdetails

    Hinweis

    Die Möglichkeit, eine HTML-Beschreibung einzugeben, wird in der nächsten Übung implementiert.

Aufgabe 5: Verwenden der Modellbindung für Updatevorgänge

In der vorherigen Aufgabe haben Sie die Modellbindung hauptsächlich zum Auswählen von Daten verwendet. In dieser Aufgabe erfahren Sie, wie Sie die Modellbindung in Updatevorgängen verwenden.

Sie aktualisieren die Kategorien GridView, damit der Benutzer Kategorien aktualisieren kann.

  1. Öffnen Sie die Seite Products.aspx , und aktualisieren Sie die Kategorien GridView, um die Schaltfläche Bearbeiten automatisch zu generieren, und verwenden Sie das neue UpdateMethod-Attribut , um eine UpdateCategory-Methode zum Aktualisieren des ausgewählten Elements anzugeben.

    <asp:GridView ID="categoriesGrid" runat="server"
        AutoGenerateColumns="false"
        ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
        SelectMethod="GetCategories"
        AutoGenerateSelectButton="true"
        AutoGenerateEditButton="true"
        UpdateMethod="UpdateCategory">
    

    Das DataKeyNames-Attribut im GridView-Objekt definiert, welche Member das modellgebundene Objekt eindeutig identifizieren, und somit die Parameter, die die Updatemethode zumindest erhalten soll.

  2. Öffnen Sie die CodeBehind-Datei Products.aspx.cs , und implementieren Sie die UpdateCategory-Methode . Die Methode sollte die Kategorie-ID erhalten, um die aktuelle Kategorie zu laden, die Werte aus gridView aufzufüllen und dann die Kategorie zu aktualisieren.

    (Codeausschnitt – Web Forms Lab – Ex01 – UpdateCategory)

    public void UpdateCategory(int categoryId)
    {
        var category = this.db.Categories.Find(categoryId);
    
        this.TryUpdateModel(category);
    
        if (this.ModelState.IsValid)
        {
            this.db.SaveChanges();
        }
    }
    

    Die neue TryUpdateModel-Methode in der Page-Klasse ist dafür verantwortlich, das Modellobjekt mithilfe der Werte aus den Steuerelementen auf der Seite aufzufüllen. In diesem Fall werden die aktualisierten Werte aus der aktuellen GridView-Zeile, die bearbeitet wird, in das Kategorieobjekt ersetzt.

    Hinweis

    In der nächsten Übung wird die Verwendung von ModelState.IsValid zum Überprüfen der daten erläutert, die der Benutzer beim Bearbeiten des Objekts eingegeben hat.

  3. Führen Sie die Website aus, und wechseln Sie zur Seite Produkte. Bearbeiten einer Kategorie. Geben Sie einen neuen Namen ein, und klicken Sie dann auf Aktualisieren , um die Änderungen beizubehalten.

    Bearbeiten von Kategorien

    Bearbeiten von Kategorien

Übung 2: Datenüberprüfung

In dieser Übung erfahren Sie mehr über die neuen Datenüberprüfungsfeatures in ASP.NET 4.5. Sie sehen sich die neuen unaufdringlichen Validierungsfeatures in Web Forms an. Sie verwenden Datenanmerkungen in den Anwendungsmodellklassen für die Überprüfung von Benutzereingaben, und schließlich erfahren Sie, wie Sie die Anforderungsüberprüfung an einzelne Steuerelemente auf einer Seite aktivieren oder deaktivieren.

Aufgabe 1: Unaufdringliche Validierung

Formulare mit komplexen Daten, einschließlich Validierungssteuerelementen, generieren tendenziell zu viel JavaScript-Code auf der Seite, der etwa 60 % des Codes ausmachen kann. Wenn die unaufdringliche Validierung aktiviert ist, sieht Ihr HTML-Code sauberer und übersichtlicher aus.

In diesem Abschnitt aktivieren Sie die unauffällige Validierung in ASP.NET, um den von beiden Konfigurationen generierten HTML-Code zu vergleichen.

  1. Öffnen Sie Visual Studio 2012 , und öffnen Sie die Projektmappe Begin im Ordner Source\Ex2-Validation\Begin dieses Labs. Alternativ können Sie die Arbeit an Ihrer vorhandenen Lösung aus der vorherigen Übung fortsetzen.

    1. Wenn Sie die bereitgestellte Begin-Projektmappe geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu im Projektmappen-Explorer auf das WebFormsLab-ProjektNuGet-Pakete verwalten.

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

    3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.

      Hinweis

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

  2. Drücken Sie F5 , um die Webanwendung zu starten. Wechseln Sie zur Seite Kunden, und klicken Sie auf den Link Neuen Kunden hinzufügen .

  3. Klicken Sie mit der rechten Maustaste auf die Browserseite, und wählen Sie die Option Quelle anzeigen aus, um den von der Anwendung generierten HTML-Code zu öffnen.

    Anzeigen des HTML-Codes der Seite an.

    Anzeigen des HTML-Codes der Seite

  4. Scrollen Sie durch den Quellcode der Seite, und beachten Sie, dass ASP.NET JavaScript-Code und Datenvalidatoren in die Seite eingefügt hat, um die Überprüfungen durchzuführen und die Fehlerliste anzuzeigen.

    JavaScript-Validierungscode auf der Seite

    JavaScript-Code zur Überprüfung auf der Seite "CustomerDetails"

  5. Schließen Sie den Browser, und wechseln Sie zurück zu Visual Studio.

  6. Jetzt aktivieren Sie die unaufdringliche Validierung. Öffnen Sie Web.Config, und suchen Sie im Abschnitt AppSettings nach dem Schlüssel ValidationSettings:UnobtrusiveValidationMode. Legen Sie den Schlüsselwert auf WebForms fest.

    <configuration>
      ...
      <appSettings>
        <add key="aspnet:uselegacysynchronizationcontext" value="false" />
        <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>
    

    Hinweis

    Sie können diese Eigenschaft auch im Ereignis "Page_Load" festlegen, falls Sie die Unaufdringliche Validierung nur für einige Seiten aktivieren möchten.

  7. Öffnen Sie CustomerDetails.aspx , und drücken Sie F5 , um die Webanwendung zu starten.

  8. Drücken Sie F12, um die IE-Entwicklertools zu öffnen. Sobald die Entwicklertools geöffnet sind, wählen Sie die Skriptregisterkarte aus. Wählen Sie im Menü CustomerDetails.aspx aus, und beachten Sie, dass die skripts, die zum Ausführen von jQuery auf der Seite erforderlich sind, von der lokalen Website in den Browser geladen wurden.

    Laden der jQuery-JavaScript-Dateien direkt vom lokalen IIS-Server

    Laden der jQuery-JavaScript-Dateien direkt vom lokalen IIS-Server

  9. Schließen Sie den Browser, um zu Visual Studio zurückzukehren. Öffnen Sie die Datei Site.Master erneut, und suchen Sie den ScriptManager. Fügen Sie das Attribut EnableCdn-Eigenschaft mit dem Wert True hinzu. Dadurch wird erzwungen, dass jQuery aus der Online-URL geladen wird, nicht aus der URL der lokalen Website.

  10. Öffnen Sie CustomerDetails.aspx in Visual Studio. Drücken Sie F5, um die Website auszuführen. Sobald internet Explorer geöffnet wird, drücken Sie die F12-Taste, um die Entwicklertools zu öffnen. Wählen Sie die Registerkarte Skript aus, und sehen Sie sich dann die Dropdownliste an. Beachten Sie, dass die jQuery-JavaScript-Dateien nicht mehr von der lokalen Website geladen werden, sondern aus dem jQuery-Online-CDN.

    Laden der jQuery-JavaScript-Dateien aus dem CDN

    Laden der jQuery-JavaScript-Dateien aus dem CDN

  11. Öffnen Sie den Quellcode der HTML-Seite erneut, indem Sie im Browser die Option Quelle anzeigen verwenden. Beachten Sie, dass durch die Aktivierung der unaufdringlichen Validierung ASP.NET den eingefügten JavaScript-Code durch data-*-Attribute ersetzt hat.

    Unauffälliger Validierungscode

    Unauffälliger Validierungscode

    Hinweis

    In diesem Beispiel haben Sie gesehen, wie eine Validierungszusammenfassung mit Datenanmerkungen auf nur wenige HTML- und JavaScript-Zeilen vereinfacht wurde. Bisher wird Ihr JavaScript-Validierungscode größer, je mehr Validierungssteuerelemente Sie hinzufügen, ohne unaufdringliche Validierung.

Aufgabe 2: Überprüfen des Modells mit Datenanmerkungen

ASP.NET 4.5 führt die Überprüfung von Datenanmerkungen für Web Forms ein. Anstatt über ein Validierungssteuerelement für jede Eingabe zu verfügen, können Sie jetzt Einschränkungen in Ihren Modellklassen definieren und in ihrer gesamten Webanwendung verwenden. In diesem Abschnitt erfahren Sie, wie Sie Datenanmerkungen zum Überprüfen/Bearbeiten eines neuen Kundenformulars verwenden.

  1. Öffnen Sie die Seite CustomerDetail.aspx . Beachten Sie, dass der Vorname und der zweite Name des Kunden in den Abschnitten EditItemTemplate und InsertItemTemplate mithilfe eines RequiredFieldValidator-Steuerelements überprüft werden. Jedes Validierungssteuerelement ist einer bestimmten Bedingung zugeordnet, sodass Sie so viele Validierungssteuerelemente wie die zu überprüfenden Bedingungen einschließen müssen.

  2. Fügen Sie Datenanmerkungen hinzu, um die Customer-Modellklasse zu überprüfen. Öffnen Sie die Customer.cs-Klasse im Ordner Model , und versehen Sie jede Eigenschaft mithilfe von Datenanmerkungsattributen.

    (Codeausschnitt – Web Forms Lab – Ex02 – Datenanmerkungen)

    namespace WebFormsLab.Model
    {
      using System.Collections.Generic;
      using System.ComponentModel.DataAnnotations;
    
      public class Customer
      {
         [Key]
         public int Id { get; set; }
    
         [Required]
         public string FirstName { get; set; }
    
         [Required]
         public string LastName { get; set; }
    
         [Range(0, 130)]
         public int Age { get; set; }
    
         public Address Address { get; set; }
    
         [Phone]
         public string DaytimePhone { get; set; }
    
         [EmailAddress, StringLength(256)]
         public string EmailAddress { get; set; }
      }
    }
    

    Hinweis

    .NET Framework 4.5 wurde die vorhandene Datenanmerkungssammlung erweitert. Dies sind einige der Datenanmerkungen, die Sie verwenden können: [CreditCard], [Phone], [EmailAddress], [Range], [Compare], [Url], [FileExtensions], [Required], [Key], [RegularExpression].

    Einige Verwendungsbeispiele:

    [Schlüssel]: Gibt an, dass ein Attribut der eindeutige Bezeichner ist.

    [Range(0.4, 0.5, ErrorMessage="{Write an error message}"]: Double range

    [EmailAddress(ErrorMessage="Invalid Email"), MaxLength(56)]: Zwei Anmerkungen in derselben Zeile.

    Sie können auch eigene Fehlermeldungen in jedem Attribut definieren.

  3. Öffnen Sie CustomerDetails.aspx , und entfernen Sie alle RequiredFieldValidators für die Felder Vor- und Nachname in den Abschnitten in EditItemTemplate und InsertItemTemplate des FormView-Steuerelements.

    <EditItemTemplate>
      <fieldset>
         <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
         <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />
            &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
        </p>
    
         <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>
         <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
              &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
        </p>
      ...
    <InsertItemTemplate>        
     <fieldset>
       <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
       <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />           
         &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
        </p>
    
       <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>                
        <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
         &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
        </p>
      ...
    

    Hinweis

    Ein Vorteil der Verwendung von Datenanmerkungen besteht darin, dass die Validierungslogik in Ihren Anwendungsseiten nicht dupliziert wird. Sie definieren sie einmal im Modell und verwenden sie auf allen Anwendungsseiten, die Daten bearbeiten.

  4. Öffnen Sie CustomerDetails.aspx CodeBehind, und suchen Sie die SaveCustomer-Methode. Diese Methode wird beim Einfügen eines neuen Kunden aufgerufen und empfängt den Parameter Customer aus den FormView-Steuerelementwerten. Wenn die Zuordnung zwischen den Seitensteuerelementen und dem Parameterobjekt erfolgt, führt ASP.NET die Modellüberprüfung mit allen Datenanmerkungsattributen aus und füllt das ModelState-Wörterbuch mit den aufgetretenen Fehlern, falls vorhanden.

    ModelState.IsValid gibt nur true zurück, wenn alle Felder in Ihrem Modell nach der Überprüfung gültig sind.

    public void SaveCustomer(Customer customer) 
    {
        if (this.ModelState.IsValid)
        { 
            using (var db = new ProductsContext())
            {
                ...
    
  5. Fügen Sie am Ende der Seite CustomerDetails ein ValidationSummary-Steuerelement hinzu, um die Liste der Modellfehler anzuzeigen.

    </fieldset>
        </InsertItemTemplate>
      </asp:FormView>
    
      <asp:ValidationSummary runat="server" ShowModelStateErrors="true" 
           ForeColor="Red" HeaderText="Please check the following errors:"/>
    </asp:Content>
    

    ShowModelStateErrors ist eine neue Eigenschaft des ValidationSummary-Steuerelements, das bei Festlegung auf true die Fehler aus dem ModelState-Wörterbuch anzeigt. Diese Fehler stammen aus der Datenanmerkungsüberprüfung.

  6. Drücken Sie F5 , um die Webanwendung auszuführen. Füllen Sie das Formular mit einigen fehlerhaften Werten aus, und klicken Sie auf Speichern , um die Überprüfung auszuführen. Beachten Sie die Fehlerzusammenfassung unten.

    Validierung mit Datenanmerkungen

    Validierung mit Datenanmerkungen

Aufgabe 3: Behandeln von benutzerdefinierten Datenbankfehlern mit ModelState

In früheren Versionen von Web Forms kann die Behandlung von Datenbankfehlern wie einer zu langen Zeichenfolge oder einer Eindeutigen Schlüsselverletzung das Auslösen von Ausnahmen in Ihrem Repositorycode und dann die Behandlung der Ausnahmen für Ihren CodeBehind zur Anzeige eines Fehlers beinhalten. Eine große Menge an Code ist erforderlich, um etwas relativ Einfaches zu tun.

In Web Forms 4.5 kann das ModelState-Objekt verwendet werden, um die Fehler auf der Seite konsistent anzuzeigen, entweder aus Ihrem Modell oder aus der Datenbank.

In dieser Aufgabe fügen Sie Code zum ordnungsgemäßen Behandeln von Datenbankausnahmen hinzu und zeigen dem Benutzer mithilfe des ModelState-Objekts die entsprechende Meldung an.

  1. Versuchen Sie, den Namen einer Kategorie mithilfe eines duplizierten Werts zu aktualisieren, während die Anwendung noch ausgeführt wird.

    Aktualisieren einer Kategorie mit einem duplizierten Namen

    Aktualisieren einer Kategorie mit einem duplizierten Namen

    Beachten Sie, dass aufgrund der "unique"-Einschränkung der CategoryName-Spalte eine Ausnahme ausgelöst wird.

    Ausnahme für doppelte Kategorienamen

    Ausnahme für doppelte Kategorienamen

  2. Beenden des Debuggens. Aktualisieren Sie in der CodeBehind-Datei Products.aspx.cs die UpdateCategory-Methode , um die von der Datenbank ausgelösten Ausnahmen zu behandeln. Rufen Sie die SaveChanges()-Methode auf, und fügen Sie dem ModelState-Objekt einen Fehler hinzu.

    Die neue TryUpdateModel-Methode aktualisiert das aus der Datenbank abgerufene Kategorieobjekt mithilfe der vom Benutzer bereitgestellten Formulardaten.

    (Codeausschnitt – Web Forms Lab – Ex02 – UpdateCategory Handle Errors)

    public void UpdateCategory(int categoryId)
    {
      var category = this.db.Categories.Find(categoryId);
    
      this.TryUpdateModel(category);
    
      if (this.ModelState.IsValid)
      {
        try
        {
          this.db.SaveChanges();
        }
        catch (DbUpdateException)
        {
          var message = string.Format("A category with the name {0} already exists.", category.CategoryName);
          this.ModelState.AddModelError("CategoryName", message);
        }
      }
    }
    

    Hinweis

    Im Idealfall müssen Sie die Ursache der DbUpdateException identifizieren und überprüfen, ob die Grundursache die Verletzung einer Eindeutigen Schlüsseleinschränkung ist.

  3. Öffnen Sie Products.aspx , und fügen Sie unter den Kategorien GridView ein ValidationSummary-Steuerelement hinzu, um die Liste der Modellfehler anzuzeigen.

    <asp:GridView ID="categoriesGrid" runat="server"
      ...
    </asp:GridView>
    
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowModelStateErrors="true" />
    
    <h3>Products</h3>
    
  4. Führen Sie die Website aus, und wechseln Sie zur Seite Produkte. Versuchen Sie, den Namen einer Kategorie mithilfe eines duplizierten Werts zu aktualisieren.

    Beachten Sie, dass die Ausnahme behandelt wurde und die Fehlermeldung im ValidationSummary-Steuerelement angezeigt wird.

    Duplizierter Kategoriefehler

    Duplizierter Kategoriefehler

Aufgabe 4: Anforderungsüberprüfung in ASP.NET Web Forms 4.5

Die Anforderungsüberprüfungsfunktion in ASP.NET bietet einen bestimmten Standardschutz vor XSS-Angriffen (Cross-Site Scripting). In früheren Versionen von ASP.NET war die Anforderungsüberprüfung standardmäßig aktiviert und konnte nur für eine gesamte Seite deaktiviert werden. Mit der neuen Version von ASP.NET Web Forms können Sie jetzt die Anforderungsvalidierung für ein einzelnes Steuerelement deaktivieren, eine verzögerte Anforderungsüberprüfung durchführen oder auf nicht überprüfte Anforderungsdaten zugreifen (wenn Sie dies tun!).

  1. Drücken Sie STRG+F5 , um die Website ohne Debuggen zu starten, und wechseln Sie zur Seite Produkte. Wählen Sie eine Kategorie aus, und klicken Sie dann auf den Link Bearbeiten für eines der Produkte.

  2. Geben Sie eine Beschreibung mit potenziell gefährlichen Inhalten für instance einschließlich HTML-Tags ein. Beachten Sie die Ausnahme, die aufgrund der Anforderungsüberprüfung ausgelöst wurde.

    Bearbeiten eines Produkts mit potenziell gefährlichen Inhalten

    Bearbeiten eines Produkts mit potenziell gefährlichen Inhalten

    Ausnahme, die aufgrund der Anforderungsüberprüfung ausgelöst wird

    Ausnahme, die aufgrund der Anforderungsüberprüfung ausgelöst wurde

  3. Schließen Sie die Seite, und drücken Sie in Visual Studio UMSCHALT+F5 , um das Debuggen zu beenden.

  4. Öffnen Sie die Seite ProductDetails.aspx , und suchen Sie das Textfeld Beschreibung .

  5. Fügen Sie der TextBox die neue ValidateRequestMode-Eigenschaft hinzu, und legen Sie ihren Wert auf Disabled fest.

    Mit dem neuen ValidateRequestMode-Attribut können Sie die Anforderungsüberprüfung für jedes Steuerelement präzise deaktivieren. Dies ist nützlich, wenn Sie eine Eingabe verwenden möchten, die möglicherweise HTML-Code empfängt, die Überprüfung aber für den Rest der Seite funktioniert.

    <p>
      <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" 
                Cols="60" Rows="8" Text='<%# BindItem.Description %>' 
        ValidateRequestMode="Disabled" />
    </p>
    
  6. Drücken Sie F5 , um die Webanwendung auszuführen. Öffnen Sie die Seite Produkt bearbeiten erneut, und füllen Sie eine Produktbeschreibung einschließlich HTML-Tags aus. Beachten Sie, dass Sie der Beschreibung jetzt HTML-Inhalte hinzufügen können.

    Überprüfung anfordern deaktiviert für die Produktbeschreibung

    Überprüfung anfordern deaktiviert für die Produktbeschreibung

    Hinweis

    In einer Produktionsanwendung sollten Sie den vom Benutzer eingegebenen HTML-Code bereinigen, um sicherzustellen, dass nur sichere HTML-Tags eingegeben werden (z. B. gibt es keine <Skripttags> ). Hierzu können Sie die Microsoft Web Protection-Bibliothek verwenden.

  7. Bearbeiten Sie das Produkt erneut. Geben Sie HTML-Code in das Feld Name ein, und klicken Sie auf Speichern. Beachten Sie, dass Anforderungsüberprüfung nur für das Feld Beschreibung deaktiviert ist und die restlichen Felder weiterhin anhand des potenziell gefährlichen Inhalts überprüft werden.

    Anforderungsüberprüfung in den restlichen Feldern aktiviert Anforderungsüberprüfung

    Anforderungsüberprüfung in den restlichen Feldern aktiviert

    ASP.NET Web Forms 4.5 enthält einen neuen Anforderungsvalidierungsmodus, um anforderungsvalidieren zu können. Wenn der Anforderungsüberprüfungsmodus auf 4.5 festgelegt ist, löst die Anforderungsüberprüfung von ASP.NET 4.5 nur die Anforderungsüberprüfung für dieses bestimmte Element in der Formularauflistung aus, wenn ein Codeteil auf Request.Form["key"] zugreift.

    Darüber hinaus enthält ASP.NET 4.5 jetzt Kerncodierungsroutinen aus der Microsoft Anti-XSS Library v4.0. Die Anti-XSS-Codierungsroutinen werden durch den neuen AntiXssEncoder-Typ implementiert, der sich im neuen System.Web.Security.AntiXss-Namespace befindet. Wenn der encoderType-Parameter für die Verwendung von AntiXssEncoder konfiguriert ist, verwendet die gesamte Ausgabecodierung in ASP.NET automatisch die neuen Codierungsroutinen.

  8. ASP.NET 4.5-Anforderungsüberprüfung unterstützt auch den nicht überprüften Zugriff auf Anforderungsdaten. ASP.NET 4.5 fügt dem HttpRequest-Objekt eine neue Auflistungseigenschaft mit dem Namen Unvalidated hinzu. Wenn Sie zu HttpRequest.Unvalidated navigieren, haben Sie Zugriff auf alle gängigen Anforderungsdaten, einschließlich Forms, QueryStrings, Cookies, URLs usw.

    Request.Unvalidated-Objekt

    Request.Unvalidated-Objekt

    Hinweis

    Verwenden Sie die HttpRequest.Unvalidated-Eigenschaft mit Vorsicht! Stellen Sie sicher, dass Sie die benutzerdefinierte Überprüfung der Rohdaten sorgfältig durchführen, um sicherzustellen, dass gefährlicher Text nicht roundtriped und an ahnungslose Kunden gerendert wird!

Übung 3: Asynchrone Seitenverarbeitung in ASP.NET Web Forms

In dieser Übung werden Sie mit den neuen Features für die asynchrone Seitenverarbeitung in ASP.NET Web Forms eingeführt.

Aufgabe 1: Aktualisieren der Seite "Produktdetails" zum Hochladen und Anzeigen von Bildern

In dieser Aufgabe aktualisieren Sie die Seite mit den Produktdetails, damit der Benutzer eine Bild-URL für das Produkt angeben und in der schreibgeschützten Ansicht anzeigen kann. Sie erstellen eine lokale Kopie des angegebenen Images, indem Sie es synchron herunterladen. In der nächsten Aufgabe aktualisieren Sie diese Implementierung, damit sie asynchron funktioniert.

  1. Öffnen Sie Visual Studio 2012, und laden Sie die Begin-Projektmappe unter Quelle\Ex3-Async\Begin aus dem Ordner dieses Labs. Alternativ können Sie weiter an Ihrer vorhandenen Lösung aus den vorherigen Übungen arbeiten.

    1. Wenn Sie die bereitgestellte Startlösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu im Projektmappen-Explorer auf das Projekt WebFormsLab, 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 abschließend die Projektmappe, indem Sie aufBuild Solution (Projektmappe erstellen) | klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet ist, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Wenn Sie mit NuGet Power Tools die Paketversionen in der Packages.config-Datei angeben, können Sie alle erforderlichen Bibliotheken herunterladen, wenn Sie das Projekt zum ersten Mal ausführen. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.

  2. Öffnen Sie die Quelle der Seite ProductDetails.aspx , und fügen Sie ein Feld in der ItemTemplate der FormView hinzu, um das Produktbild anzuzeigen.

    <ItemTemplate>
         <fieldset>
              <p><b><asp:Label ID="Label2" runat="server" AssociatedControlID="itemProductName">Name:</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemProductName" Text='<%#: Item.ProductName %>' /></p>
              <p><b><asp:Label ID="Label3" runat="server" AssociatedControlID="itemDescription">Description (HTML):</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemDescription" Text='<%# Item.Description %>' /></p>
              <p><b><asp:Label ID="Label4" runat="server" AssociatedControlID="itemUnitPrice">Price:</asp:Label></b></p>
              <p><asp:Label runat="server" ID="itemUnitPrice" Text='<%#: Item.UnitPrice %>' /></p>
    
              <p><b><asp:Label ID="Label5" runat="server" AssociatedControlID="itemUnitPrice">Image:</asp:Label></b></p>
              <p>
                    <img src="<%# string.IsNullOrEmpty(Item.ImagePath) ? "/Images/noimage.jpg" : 
                    Item.ImagePath %>" alt="Image" />
              </p>
    
              <br />
              <p>
                    <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />&nbsp;
                    <asp:HyperLink NavigateUrl="~/Products.aspx" Text="Back" runat="server" />
              </p>
         </fieldset>
    </ItemTemplate>
    
  3. Fügen Sie ein Feld hinzu, um die Bild-URL in der EditTemplate der FormView anzugeben.

    <fieldset>
         <p><asp:Label ID="Label2" runat="server" AssociatedControlID="ProductName">Name:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="ProductName" Text='<%#: BindItem.ProductName %>' /></p>
         <p><asp:Label ID="Label3" runat="server" AssociatedControlID="Description">Description (HTML):</asp:Label></p>
         <p>
              <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>'
                    ValidateRequestMode="Disabled" />
         </p>
         <p><asp:Label ID="Label4" runat="server" AssociatedControlID="UnitPrice">Price:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="UnitPrice" Text='<%#: BindItem.UnitPrice %>' /></p>
    
         <p><asp:Label ID="Label1" runat="server" AssociatedControlID="ImagePath">Image URL:</asp:Label></p>
         <p><asp:TextBox runat="server" ID="ImagePath" Text='<%#:  BindItem.ImagePath %>' /></p>
    
         <br />
         <p>
              <asp:Button runat="server" CommandName="Update" Text="Save" />
              <asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
         </p>
    </fieldset>
    
  4. Öffnen Sie die CodeBehind-Datei ProductDetails.aspx.cs , und fügen Sie die folgenden Namespacedirektiven hinzu.

    (Codeausschnitt – Web Forms Lab – Ex03 – Namespaces)

    using System.IO;
    using System.Net;
    using System.Web;
    
  5. Erstellen Sie eine UpdateProductImage-Methode , um Remoteimages im lokalen Ordner Images zu speichern, und aktualisieren Sie die Produktentität mit dem neuen Wert des Imagespeicherorts.

    (Codeausschnitt – Web Forms Lab – Ex03 – UpdateProductImage)

    private void UpdateProductImage(Product product)
    {
        string imageUrl = product.ImagePath;
    
        if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
        {
            product.ImagePath = string.Format(
                                     "/Images/{0}{1}", 
                                     product.ProductId, 
                                     Path.GetExtension(imageUrl));
    
            using (var wc = new WebClient())
            {
                wc.DownloadFile(imageUrl, Server.MapPath(product.ImagePath));
            }
        }
    }
    
  6. Aktualisieren Sie die UpdateProduct-Methode , um die UpdateProductImage-Methode aufzurufen.

    (Codeausschnitt – Web Forms Lab – Ex03 – UpdateProductImage-Aufruf)

    public void UpdateProduct(int productId)
    {
        var product = this.db.Products.Find(productId);
    
        this.TryUpdateModel(product);
    
        this.UpdateProductImage(product);
    
        if (this.ModelState.IsValid)
        {
            this.db.SaveChanges();
        }
    }
    
  7. Führen Sie die Anwendung aus, und versuchen Sie, ein Image für ein Produkt hochzuladen.

    Festlegen eines Bilds für ein Produkt

    Festlegen eines Bilds für ein Produkt

Aufgabe 2: Hinzufügen der asynchronen Verarbeitung zur Seite "Produktdetails"

In dieser Aufgabe aktualisieren Sie die Produktdetailseite, damit sie asynchron funktioniert. Sie verbessern eine Aufgabe mit langer Ausführung – den Imagedownloadprozess –, indem Sie ASP.NET asynchrone Seitenverarbeitung 4.5 verwenden.

Asynchrone Methoden in Webanwendungen können verwendet werden, um die Verwendung ASP.NET Threadpools zu optimieren. In ASP.NET gibt es eine begrenzte Anzahl von Threads im Threadpool für die Teilnahme an Anforderungen. Wenn also alle Threads ausgelastet sind, beginnt ASP.NET, neue Anforderungen abzulehnen, Anwendungsfehlermeldungen zu senden und Ihre Website nicht mehr verfügbar zu machen.

Zeitaufwendige Vorgänge auf Ihrer Website sind gute Kandidaten für die asynchrone Programmierung, da sie den zugewiesenen Thread für eine lange Zeit belegen. Dies umfasst Anforderungen mit langer Ausführung, Seiten mit vielen verschiedenen Elementen und Seiten, die Offlinevorgänge erfordern, z. B. abfragen einer Datenbank oder zugriff auf einen externen Webserver. Der Vorteil besteht darin, dass der Thread freigegeben und an den Threadpool zurückgegeben wird, wenn Sie für diese Vorgänge asynchrone Methoden verwenden, während die Seite verarbeitet wird. Dies bedeutet, dass die Seite die Verarbeitung in einem Thread aus dem Threadpool startet und die Verarbeitung möglicherweise in einem anderen thread abgeschlossen wird, nachdem die asynchrone Verarbeitung abgeschlossen ist.

  1. Öffnen Sie die Seite ProductDetails.aspx . Fügen Sie das Async-Attribut im Page-Element hinzu, und legen Sie es auf true fest. Dieses Attribut weist ASP.NET an, die IHttpAsyncHandler-Schnittstelle zu implementieren.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
        CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails"
        Async="true" %>
    
  2. Fügen Sie unten auf der Seite eine Bezeichnung hinzu, um die Details der Threads anzuzeigen, die die Seite ausführen.

    <EmptyDataTemplate>Product not found</EmptyDataTemplate>
      </asp:FormView>
    
      <asp:Label ID="threadsMessageLabel" runat="server" />
    </asp:Content>
    
  3. Öffnen Sie ProductDetails.aspx.cs , und fügen Sie die folgenden Namespacedirektiven hinzu.

    (Codeausschnitt – Web Forms Lab – Ex03 – Namespaces 2)

    using System.Web.UI;
    using System.Threading;
    
  4. Ändern Sie die UpdateProductImage-Methode , um das Image mit einer asynchronen Aufgabe herunterzuladen. Sie ersetzen die WebClientDownloadFile-Methode durch die DownloadFileTaskAsync-Methode und fügen die await-Schlüsselwort (keyword) ein.

    (Codeausschnitt – Web Forms Lab – Ex03 – UpdateProductImage Async)

    private void UpdateProductImage(Product product)
    {
        string imageUrl = product.ImagePath;
    
        if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
        {
            product.ImagePath = string.Format(
                "/Images/{0}{1}", 
                product.ProductId, 
                Path.GetExtension(imageUrl));
    
            this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
            {
                using (var wc = new WebClient())
                {
                    await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
                }
            }));
        }
    }
    

    RegisterAsyncTask registriert einen neuen asynchronen Seitentask, der in einem anderen Thread ausgeführt werden soll. Er empfängt einen Lambdaausdruck mit der auszuführenden Aufgabe (t). Die await-Schlüsselwort (keyword) in der DownloadFileTaskAsync-Methode konvertiert den Rest der Methode in einen Rückruf, der asynchron aufgerufen wird, nachdem die DownloadFileTaskAsync-Methode abgeschlossen wurde. ASP.NET wird die Ausführung der Methode fortsetzen, indem alle ursprünglichen HTTP-Anforderungswerte automatisch beibehalten werden. Mit dem neuen asynchronen Programmiermodell in .NET 4.5 können Sie asynchronen Code schreiben, der sehr wie synchronen Code aussieht, und der Compiler kann die Komplikationen von Rückruffunktionen oder Fortsetzungscode verarbeiten.

    Hinweis

    RegisterAsyncTask und PageAsyncTask waren bereits seit .NET 2.0 verfügbar. Die await Schlüsselwort (keyword) ist neu aus dem asynchronen .NET 4.5-Programmiermodell und kann zusammen mit den neuen TaskAsync-Methoden aus dem .NET WebClient-Objekt verwendet werden.

  5. Fügen Sie Code hinzu, um die Threads anzuzeigen, für die der Code gestartet und ausgeführt wurde. Aktualisieren Sie hierzu die UpdateProductImage-Methode mit dem folgenden Code.

    (Codeausschnitt – Web Forms Lab – Ex03 – Threads anzeigen)

    private void UpdateProductImage(Product product)
    {
      string imageUrl = product.ImagePath;
    
      if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
      {
        product.ImagePath = string.Format(
             "/Images/{0}{1}", 
             product.ProductId, 
             Path.GetExtension(imageUrl));
    
        this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
        {
          var startThread = Thread.CurrentThread.ManagedThreadId;
    
          using (var wc = new WebClient())
          {
            await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
          }
    
          var endThread = Thread.CurrentThread.ManagedThreadId;
    
          this.threadsMessageLabel.Text = string.Format("Started on thread: {0}<br /> Finished on thread: {1}", startThread, endThread);
        }));
      }
    }
    
  6. Öffnen Sie die Web.config-Datei der Website. Fügen Sie die folgende variable appSetting hinzu.

    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/>
    
  7. Drücken Sie F5 , um die Anwendung auszuführen und ein Image für das Produkt hochzuladen. Beachten Sie, dass die Threads-ID, in der der Code gestartet und abgeschlossen wurde, möglicherweise anders sein kann. Dies liegt daran, dass asynchrone Aufgaben in einem separaten Thread von ASP.NET Threadpool ausgeführt werden. Wenn die Aufgabe abgeschlossen ist, legt ASP.NET den Task wieder in die Warteschlange und weist einen der verfügbaren Threads zu.

    asynchrones Herunterladen eines Images

    asynchrones Herunterladen eines Images

Hinweis

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


Zusammenfassung

In diesem praktischen Lab wurden die folgenden Konzepte behandelt und demonstriert:

  • Verwenden stark typisierter Datenbindungsausdrücke
  • Verwenden neuer Modellbindungsfeatures in Web Forms
  • Verwenden von Wertanbietern zum Zuordnen von Seitendaten zu CodeBehind-Methoden
  • Verwenden von Datenanmerkungen für die Überprüfung von Benutzereingaben
  • Nutzen Sie die unauffällige clientseitige Validierung mit jQuery in Web Forms
  • Implementieren der granularen Anforderungsüberprüfung
  • Implementieren der asynchronen Seitenverarbeitung in Web Forms

Anhang A: Installieren Visual Studio Express 2012 für Web

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

  1. Wechseln Sie zu [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternativ können Sie den Webplattform-Installer öffnen und nach dem Produkt "Visual Studio Express 2012 für Web mit Azure SDK" suchen.

  2. Klicken Sie auf Jetzt installieren. Wenn Sie nicht über den Webplattform-Installer verfügen, werden Sie umgeleitet, ihn zuerst herunterzuladen und zu installieren.

  3. Sobald der Webplattform-Installer geöffnet ist, klicken Sie 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 fortzufahren.

    Akzeptieren der Lizenzbedingungen

    Akzeptieren der Lizenzbedingungen

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

    Installationsstatus

    Installationsstatus

  6. Klicken Sie nach Abschluss der Installation auf Fertig stellen.

    Installation abgeschlossen

    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 Kachel VS Express für Web.

    VS Express für Webkachel

    VS Express für Webkachel

Anhang B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

In diesem Anhang erfahren Sie, wie Sie eine neue Website über das Azure-Portal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie dem Lab folgen und dabei die Von Azure bereitgestellte Web Deploy-Veröffentlichungsfunktion nutzen.

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

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

    Hinweis

    Mit Azure können Sie 10 ASP.NET-Websites kostenlos hosten und dann skalieren, wenn Ihr Datenverkehr zunimmt. Sie können sich hier registrieren.

    Anmelden bei Windows Azure-Portal

    Anmelden beim Portal

  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

    Azure ist der Host für eine Webanwendung, die in der Cloud ausgeführt wird und die Sie steuern und verwalten können. Mit der Schnellerstellungsoption können Sie eine abgeschlossene Webanwendung außerhalb des Portals in Azure bereitstellen. Es enthält keine Schritte zum Einrichten einer Datenbank.

    Erstellen einer neuen Website mithilfe von Schnellerstellung

    Erstellen einer neuen Website mithilfe der Schnellerstellung

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

  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, auf der die

    Website, die ausgeführt wird

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

    Öffnen der Websiteverwaltungsseiten

    Öffnen der Websiteverwaltungsseiten

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

    Hinweis

    Das Veröffentlichungsprofil enthält alle Informationen, die zum Veröffentlichen einer Webanwendung in Azure für jede aktivierte Veröffentlichungsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die benötigt werden, um eine Verbindung mit den einzelnen Endpunkten herzustellen, für die eine Veröffentlichungsmethode aktiviert wurde, und eine Authentifizierung durchzuführen. 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 für die Veröffentlichung von Webanwendungen in Azure zu automatisieren.

    Herunterladen des Website-Veröffentlichungsprofils

    Herunterladen des Veröffentlichungsprofils auf der Website

  8. Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. Weiter in dieser Übung erfahren Sie, wie Sie diese Datei verwenden, um eine Webanwendung aus Visual Studio in Azure 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 keine SQL Server können Sie diese Aufgabe überspringen.

  1. Sie benötigen einen SQL-Datenbank Server zum Speichern der Anwendungsdatenbank. Sie können die SQL-Datenbank Server aus Ihrem Abonnement im Azure-Verwaltungsportal unter Sql Databases | Server-Dashboard | anzeigen. Wenn Sie keinen Server erstellt haben, können Sie einen server erstellen, indem Sie die Schaltfläche Hinzufügen auf der Befehlsleiste verwenden. Notieren Sie sich den Servernamen und die URL, den Anmeldenamen und das Kennwort des Administrators, da Sie sie bei 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 unter Aktuelle Client-IP-Adresse aus, fügen Sie sie in die Textfelder Start-IP-Adresse und End-IP-Adresse ein, und klicken Sie auf die Schaltfläche add-client-ip-address-ok-button .

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

    Konfiguration der Webbereitstellung

  5. Konfigurieren Sie die Datenbankverbindung wie folgt:

    • Geben Sie in den Servernamen Ihre SQL-Datenbank Server-URL ein, indem Sie das Präfix tcp: verwenden.

    • Geben Sie unter Benutzername den Anmeldenamen Ihres Serveradministrators ein.

    • Geben Sie unter Kennwort das Anmeldekennwort ihres Serveradministrators ein.

    • Geben Sie einen neuen Datenbanknamen ein.

      Konfigurieren der Zielverbindungszeichenfolge

      Konfigurieren der Zielverbindungszeichenfolge

  6. Klicken Sie dann auf OK. Wenn Sie zum Erstellen der Datenbank aufgefordert werden, klicken Sie auf Ja.

    Erstellen der Datenbank

    Erstellen der Datenbank

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

    Verbindungszeichenfolge, die auf SQL-Datenbank

    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.

Anhang C: Verwenden von Codeausschnitten

Mit Codeausschnitten haben Sie den gesamten Code, den Sie benötigen, zur Hand. Das Labdokument informiert Sie genau, wann Sie sie verwenden können, wie in der folgenden Abbildung gezeigt.

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 geben Sie weiterhin ein, bis der name des gesamten Ausschnitts 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 Ausschnitt auszuwählen.

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

Drücken Sie erneut die TAB-TASTE, und der Codeausschnitt wird erneut TAB drücken 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.

  1. Wählen Sie Codeausschnitt einfügen gefolgt von Meine Codeausschnitte aus.
  2. 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 Codeausschnitt einfügen aus. Klicken

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.