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 beim Arbeiten mit Daten konzentrieren.

In früheren Versionen von Web Forms haben Sie beim Verwenden 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 deklarieren, an welche Art von Daten ein Steuerelement gebunden werden soll, indem Sie eine neue ItemType-Eigenschaft verwenden. Wenn Sie diese Eigenschaft festlegen, können Sie eine stark typierte Variable verwenden, um die vollständigen Vorteile der Visual Studio-Entwicklungsumgebung wie IntelliSense, Membernavigation und Kompilierungszeitüberprüfung zu erhalten.

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

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

Im Bereich der Anforderungsüberprüfung wurden Verbesserungen vorgenommen, um die Anforderungsüberprüfung für bestimmte Teile Ihrer Anwendungen selektiv zu deaktivieren oder ungültige Anforderungsdaten zu lesen.

Einige Verbesserungen wurden an Web Forms-Serversteuerelementen vorgenommen, um neue Features von HTML5 zu nutzen:

  • Die TextMode-Eigenschaft des TextBox-Steuerelements wurde aktualisiert, um die neuen HTML5-Eingabetypen wie E-Mail, Datetime usw. zu unterstützen.
  • Das FileUpload-Steuerelement unterstützt jetzt mehrere Dateiuploads von Browsern, die dieses HTML5-Feature unterstützen.
  • Validator-Steuerelemente unterstützen jetzt die Überprüfung 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 behoben, 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: Neuigkeiten in ASP.NET 4.5 und Visual Studio 2012

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

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

  • Verwenden stark typierter Datenbindungsausdrücke
  • Verwenden neuer Modellbindungsfeatures in WebFormularen
  • Verwenden von Wertanbietern zum Zuordnen von Seitendaten zu CodeBehind-Methoden
  • Verwenden von Datenanmerkungen für die Benutzereingabeüberprüfung
  • Nutzen der unaufdringlichen clientseitigen Überprüfung mit jQuery in Web Forms
  • Implementieren einer granularen Anforderungsüberprüfung
  • Implementieren asynchroner Seitenverarbeitung in Webformularen

Voraussetzungen

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

Setup

Installieren von Codeausschnitten

Aus Gründen der Einfachheit ist ein Großteil des Codes, den Sie entlang dieser Übung 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 Snippets nicht vertraut sind und erfahren möchten, wie sie verwendet werden können, finden Sie in diesem Dokument den Anhang "Anhang C: Verwenden von Codeausschnitten".

Übungen

Dieses praktische Labor umfasst die folgenden Übungen:

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

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: Modellbindung in ASP.NET Webformularen

Die neue Version von ASP.NET Web Forms führt eine Reihe von Verbesserungen ein, die sich auf die Verbesserung der Erfahrung beim Arbeiten mit Daten konzentrieren. In dieser Übung erfahren Sie mehr über stark typierte Datensteuerelemente und Modellbindung.

Aufgabe 1 – Verwenden stark typierter Datenbindungen

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

  1. Öffnen Sie die Begin-Lösung im Ordner "Source/Ex1-ModelBinding/Begin/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 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 Customers.aspx Seite. Platzieren Sie eine nicht nummerierte Liste im Hauptsteuerelement, und fügen Sie ein Wiederholungssteuerelement für die Auflistung der einzelnen Kunden ein. Legen Sie den Repeaternamen auf "customersRepeater " fest, wie im folgenden Code gezeigt.

    In früheren Versionen von Web Forms würden Sie beim Verwenden der Datenbindung zum Ausgeben des Werts eines Elements für ein Objekt, an das Sie datenbindung sind, einen Datenbindungsausdruck zusammen mit einem Aufruf der Eval-Methode verwenden und den Namen des Elements als Zeichenfolge übergeben.

    Zur Laufzeit verwenden diese Aufrufe von Eval Spiegelung für das aktuell gebundene Objekt, um den Wert des Elements mit dem angegebenen Namen zu lesen und das Ergebnis im HTML-Code anzuzeigen. Dieser Ansatz erleichtert die Datenbindung an beliebige, nicht formatierte Daten.

    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 Kompilierungszeitü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 Customers.aspx.cs Datei.

  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 Liste der Kunden 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 Ihrer lokalen SQL Express-Instanz 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 typierte Bindungen zu verwenden. Öffnen Sie die Customers.aspx Seite, 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 welche Art von Daten das Steuerelement gebunden werden soll, und ermöglicht ihnen die Verwendung stark typierter Bindung innerhalb des datengebundenen Steuerelements.

  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 obigen Ansätzen ist, dass die Aufrufe von Eval() und Bind() spät gebunden sind , d. h. Sie übergeben Zeichenfolgen, um die Eigenschaftennamen darzustellen. Dies bedeutet, dass Sie IntelliSense nicht für die Membernamen, die Unterstützung für die Codenavigation (z. B. Gehe zu Definition) oder unterstützung für die Kompilierungszeitüberprüfung erhalten.

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

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

    Hinweis

    Das Elementelement funktioniert für eine unidirektionale Bindung. Wenn Sie eine bidirektionale Bindung ausführen möchten, verwenden Sie das BindItem-Element .

    IntelliSense-Unterstützung in stark typierter Bindung

    IntelliSense-Unterstützung in stark typierter 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 Webformularen

In früheren Versionen von ASP.NET Web Forms mussten Sie ein Datenquellenobjekt verwenden, wenn Sie eine bidirektionale Datenbindung durchführen möchten, sowohl das Abrufen und Aktualisieren von Daten als auch das 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 benötigt hat, mussten Sie die Objektdatenquelle verwenden und dadurch einige Nachteile mit sich bringen. Sie mussten beispielsweise 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 Die Methoden zum Auswählen, Aktualisieren, Einfügen und Löschen direkt im datengebundenen Steuerelement angeben können, um Logik aus ihrer CodeBehind-Datei oder aus einer anderen Klasse aufzurufen.

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

  1. Öffnen Sie die Products.aspx Seite, und fügen Sie eine GridView ein. Konfigurieren Sie die GridView wie unten dargestellt, um stark typierte Bindungen zu verwenden und sortier- 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 Products.aspx.cs CodeBehind-Datei, 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 Mitglied in der Products-Klasse hinzu, und weisen Sie eine neue Instanz 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 , damit die GridView die Menge 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, die Sortierung und Auslagerung mithilfe Ihrer eigenen Repositorylogik innerhalb eines Objektdatenquellenkontexts zu ermöglichen, erforderlich, um Ihren eigenen benutzerdefinierten Code zu schreiben und alle erforderlichen Parameter zu empfangen. Da die Datenbindungsmethoden IQueryable zurückgeben können und dies eine Abfrage darstellt, die noch ausgeführt werden soll, kann ASP.NET die Abfrage ändern, um die richtigen Sortier- und Auslagerungsparameter hinzuzufügen.

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

    Auffüllen einer GridView mithilfe der Modellbindung

    Auffüllen einer GridView mithilfe der Modellbindung

  7. Drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.

Aufgabe 3 – Wertanbieter in der Modellbindung

Mit der Modellbindung können Sie nicht nur benutzerdefinierte Methoden angeben, mit denen Ihre Daten direkt im datengebundenen Steuerelement verwendet werden können, sondern auch Daten von der Seite in Parameter aus diesen Methoden zuordnen können. 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
  • Bereitgestellte Formulardaten
  • Ansichtszustand
  • 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 von ASP.NET MVC übernommen und in die System.Web-Assembly verschoben, um sie auch in Webformularen verwenden zu können.

In dieser Aufgabe aktualisieren Sie die GridView so, dass die Ergebnisse nach der Menge der Produkte für jede Kategorie gefiltert werden, wobei der Filterparameter mit Modellbindung empfangen wird.

  1. Wechseln Sie zurück zur Products.aspx Seite.

  2. Fügen Sie oben im GridView-Steuerelement ein Label und ein ComboBox-Steuerelement hinzu, um die Anzahl der Produkte für jede Kategorie auszuwählen, wie unten dargestellt.

    <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 Products.aspx.cs CodeBehind, 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 Argument minProductsCount informiert ASP.NET, dass sein Wert mit einem Steuerelement auf der Seite aufgefüllt werden muss. ASP.NET sucht nach jedem Steuerelement, das dem Namen des Arguments (minProductsCount) entspricht, und führt die erforderliche Zuordnung und Konvertierung aus, um den Parameter mit dem Steuerelementwert auszufüllen.

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

    Hinweis

    Ein Ziel der Datenbindungsfeatures besteht darin, die Menge an Code zu reduzieren, der für die Seiteninteraktion geschrieben werden muss. Abgesehen vom [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 zur Seite "Produkte" zu wechseln. Wählen Sie eine Reihe von Produkten in der Dropdownliste aus, und beachten Sie, wie die 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-Element hinzu, um die Produkte in 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 ein zweites GridView-Benanntes 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 Products.aspx.cs CodeBehind-Datei. 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 im categoriesGrid fest. Da der Argumentname und der Steuerelementname nicht übereinstimmen, sollten Sie den Namen des Steuerelements im Steuerelementwertanbieter 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 die Komponentenprüfung dieser Methoden. In einem Komponententestkontext, bei dem Webformulare nicht ausgeführt werden, führt das [Control]-Attribut keine bestimmte Aktion aus.

  4. Öffnen Sie die Products.aspx Seite, und suchen Sie die Produkte 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 den ProductDetails.aspx SeitencodeBehind, 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 auszufüllen.

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

    Anzeigen von Produkten aus der ausgewählten Kategorie

    Anzeigen von Produkten aus der ausgewählten Kategorie

  7. Klicken Sie auf den Link "Ansicht" auf einem Produkt, um die ProductDetails.aspx Seite zu öffnen.

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

    Anzeigen der Produktdetails

    Anzeigen der Produktdetails

    Hinweis

    Die Möglichkeit zum Eingeben einer HTML-Beschreibung wird in der nächsten Übung implementiert.

Aufgabe 5 – Verwenden der Modellbindung für Aktualisierungsvorgänge

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

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

  1. Öffnen Sie die Products.aspx Seite, 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 anzugeben, um das ausgewählte Element zu aktualisieren.

    <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 in gridView definiert, welche Elemente das modellgebundene Objekt eindeutig identifizieren und daher die Parameter sind, die die Updatemethode zumindest empfangen soll.

  2. Öffnen Sie die Products.aspx.cs CodeBehind-Datei, und implementieren Sie die UpdateCategory-Methode . Die Methode sollte die Kategorie-ID empfangen, um die aktuelle Kategorie zu laden, die Werte aus der GridView auffüllen und dann die Kategorie 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 ersetzt, die in das Kategorieobjekt bearbeitet wird.

    Hinweis

    In der nächsten Übung wird die Verwendung von ModelState.IsValid zum Überprüfen der vom Benutzer beim Bearbeiten des Objekts eingegebenen Daten erläutert.

  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 unauffälligen Überprüfungsfeatures in Web Forms an. Sie verwenden Datenanmerkungen in den Anwendungsmodellklassen für die Benutzereingabeüberprüfung, und schließlich erfahren Sie, wie Sie die Anforderungsüberprüfung für einzelne Steuerelemente auf einer Seite aktivieren oder deaktivieren.

Aufgabe 1 – Unauffällige Überprüfung

Formulare mit komplexen Daten, einschließlich Validatoren, generieren in der Regel zu viel JavaScript-Code auf der Seite, was etwa 60 % des Codes darstellen kann. Mit aktivierter unauffälliger Validierung sieht Ihr HTML-Code sauberer und aufgeräumter aus.

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

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

    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 im Projektmappen-Explorer auf das WebFormsLab-Projekt "NuGet-Pakete verwalten".

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

    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-Code der Überprüfung auf der Seite

    JavaScript-Code der Ü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 unauffällige Überprüfung. Öffnen Sie Web.Config , und suchen Sie ValidationSettings:UnobtrusiveValidationMode-Schlüssel im Abschnitt "AppSettings " . 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 Überprüfung 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. Nachdem die Entwicklertools geöffnet sind, wählen Sie die Skriptregisterkarte aus. Wählen Sie im Menü CustomerDetails.aspx aus, und notieren Sie sich, dass die skripts, die zum Ausführen von jQuery auf der Seite erforderlich sind, aus 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 von 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 F12, 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 Online-jQuery CDN.

    Laden der jQuery-JavaScript-Dateien aus dem CDN

    Laden der jQuery-JavaScript-Dateien aus dem CDN

  11. Öffnen Sie den HTML-Seitenquellcode erneut mithilfe der Option "Quelle anzeigen" im Browser. Beachten Sie, dass durch Aktivieren der unauffälligen Validierung ASP.NET den eingefügten JavaScript-Code durch Daten-*-Attribute ersetzt hat.

    Unauffälliger Validierungscode

    Unauffälliger Validierungscode

    Hinweis

    In diesem Beispiel haben Sie gesehen, wie eine Überprüfungszusammenfassung mit Datenanmerkungen in nur wenigen HTML- und JavaScript-Zeilen vereinfacht wurde. Früher, ohne unauffällige Überprüfung, desto mehr Überprüfungssteuerelemente sie hinzufügen, desto größer wird Ihr JavaScript-Validierungscode.

Aufgabe 2 – Überprüfen des Modells mit Datenanmerkungen

ASP.NET 4.5 führt die Überprüfung von Datenanmerkungen für Webformulare ein. Anstatt für jede Eingabe ein Überprüfungssteuerelement zu haben, können Sie nun Einschränkungen in Ihren Modellklassen definieren und für alle Webanwendungen verwenden. In diesem Abschnitt erfahren Sie, wie Sie Datenanmerkungen zum Überprüfen eines neuen/bearbeiten Kundenformulars verwenden.

  1. Öffnen Sie CustomerDetail.aspx Seite. Beachten Sie, dass der Vorname und der zweite Name des Kunden in den Abschnitten EditItemTemplate und InsertItemTemplate mithilfe eines RequiredFieldValidator-Steuerelements überprüft werden. Jeder Validator ist einer bestimmten Bedingung zugeordnet, daher müssen Sie so viele Validatoren wie Bedingungen einbeziehen, die überprüft werden sollen.

  2. Fügen Sie Datenanmerkungen hinzu, um die Kundenmodellklasse zu überprüfen. Öffnen Sie Customer.cs Klasse im Ordner "Modell", und versehen Sie jede Eigenschaft mit 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 hat 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 innerhalb jedes Attributs definieren.

  3. Öffnen Sie CustomerDetails.aspx , und entfernen Sie alle RequiredFieldValidators für die Felder "Vorname" und "Nachname" in den Abschnitten "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 nicht auf Den Anwendungsseiten dupliziert wird. Sie definieren es 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 aufgerufen, wenn sie einen neuen Kunden einfügen und den Parameter Customer aus den FormView-Steuerelementwerten empfängt. Wenn die Zuordnung zwischen den Seitensteuerelementen und dem Parameterobjekt auftritt, führt ASP.NET die Modellüberprüfung für alle Datenanmerkungsattribute aus und füllen das ModelState-Wörterbuch mit den aufgetretenen Fehlern aus.

    "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 für das ValidationSummary-Steuerelement, 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.

    Überprüfung mit Datenanmerkungen

    Überprüfung mit Datenanmerkungen

Aufgabe 3 : Behandeln von benutzerdefinierten Datenbankfehlern mit ModelState

In früherer Version 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 umfassen und dann die Ausnahmen in Ihrem CodeBehind behandeln, um einen Fehler anzuzeigen. Eine große Menge 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 entweder aus Ihrem Modell oder aus der Datenbank einheitlich anzuzeigen.

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

  1. Während die Anwendung noch ausgeführt wird, versuchen Sie, den Namen einer Kategorie mit einem doppelten Wert zu aktualisieren.

    Aktualisieren einer Kategorie mit einem doppelten Namen

    Aktualisieren einer Kategorie mit einem doppelten Namen

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

    Ausnahme für duplizierte Kategorienamen

    Ausnahme für duplizierte Kategorienamen

  2. Beenden des Debuggens. Aktualisieren Sie in der Products.aspx.cs CodeBehind-Datei die UpdateCategory-Methode , um die von der db ausgelösten Ausnahmen zu behandeln. SaveChanges()-Methodenaufruf und Hinzufügen eines Fehlers zum ModelState-Objekt .

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

    (Codeausschnitt - Web Forms Lab – Ex02 – UpdateCategory Behandeln von Fehlern)

    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 Ursache die Verletzung einer eindeutigen Schlüsseleinschränkung ist.

  3. Öffnen Sie Products.aspx , und fügen Sie ein ValidationSummary-Steuerelement unter den Kategorien GridView 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.

    Fehler bei duplizierter Kategorie

    Fehler bei duplizierter Kategorie

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

Das Anforderungsüberprüfungsfeature in ASP.NET bietet einen bestimmten Standardschutz vor Angriffen auf websiteübergreifendes Skripting (Cross Site Scripting, XSS). In früheren Versionen von ASP.NET wurde die Anforderungsüberprüfung standardmäßig aktiviert und konnte nur für eine ganze Seite deaktiviert werden. Mit der neuen Version von ASP.NET WebFormularen können Sie jetzt die Anforderungsüberprüfung für ein einzelnes Steuerelement deaktivieren, eine faule 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 Debugging zu starten und zur Seite "Produkte" zu wechseln. Wählen Sie eine Kategorie aus, und klicken Sie dann auf den Link "Bearbeiten" auf einem der Produkte.

  2. Geben Sie eine Beschreibung ein, die potenziell gefährliche Inhalte enthält, z. B. HTML-Tags. 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 ausgelöst aufgrund der Anforderungsüberprüfung

    Ausnahme ausgelöst aufgrund der Anforderungsüberprüfung

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

  4. Öffnen Sie die ProductDetails.aspx Seite, und suchen Sie das BeschreibungstextBox-Objekt .

  5. Fügen Sie der TextBox die neue ValidateRequestMode-Eigenschaft hinzu, und legen Sie den 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 jedoch 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 Produktseite erneut bearbeiten, und schließen Sie eine Produktbeschreibung einschließlich HTML-Tags ab. Beachten Sie, dass Sie der Beschreibung jetzt HTML-Inhalt hinzufügen können.

    Anforderungsüberprüfung für die Produktbeschreibung deaktiviert

    Anforderungsüberprüfung für die Produktbeschreibung deaktiviert

    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> ). Dazu können Sie die Microsoft Web Protection Library verwenden.

  7. Bearbeiten Sie das Produkt erneut. Geben Sie HTML-Code in das Feld "Name" ein, und klicken Sie auf " Speichern". Beachten Sie, dass die 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 in den restlichen Feldern aktiviert

    ASP.NET Web Forms 4.5 enthält einen neuen Anforderungsüberprüfungsmodus, um die Anforderungsüberprüfung lazily durchzuführen. Wenn der Anforderungsüberprüfungsmodus auf 4.5 festgelegt ist, löst ASP.NET 4.5 nur die Anforderungsüberprüfung für dieses bestimmte Element in der Formularsammlung aus, wenn ein Codeelement 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 im neuen System.Web.Security.AntiXss-Namespace enthalten ist. Wenn der encoderType-Parameter für die Verwendung von AntiXssEncoder konfiguriert ist, verwendet alle Ausgabecodierungen innerhalb ASP.NET automatisch die neuen Codierungsroutinen.

  8. ASP.NET 4.5-Anforderungsüberprüfung unterstützt auch den nicht validierten Zugriff auf Anforderungsdaten. ASP.NET 4.5 fügt dem HttpRequest-Objekt eine neue Auflistungseigenschaft namens "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

    Bitte verwenden Sie die HttpRequest.Unvalidated-Eigenschaft mit Vorsicht! Stellen Sie sicher, dass Sie sorgfältig eine benutzerdefinierte Überprüfung der Rohanforderungsdaten durchführen, um sicherzustellen, dass gefährlicher Text nicht gerundet und an nicht ahnungslose Kunden zurückgesendet wird!

Übung 3: Asynchrone Seitenverarbeitung in ASP.NET Webformularen

In dieser Übung werden Sie mit den neuen asynchronen Seitenverarbeitungsfeatures 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 Produktdetailseite, 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 Bilds, indem Sie es synchron herunterladen. In der nächsten Aufgabe aktualisieren Sie diese Implementierung so, dass sie asynchron funktioniert.

  1. Öffnen Sie Visual Studio 2012 , und laden Sie die Begin-Lösung , die sich in Source\Ex3-Async\Begin aus dem Ordner dieses Labors befindet. Alternativ können Sie ihre vorhandene Lösung aus den vorherigen Übungen weiterarbeiten.

    1. Wenn Sie die bereitgestellte Begin-Lösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie dazu im Projektmappen-Explorer auf das WebFormsLab-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 ProductDetails.aspx Seitenquelle, 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 von 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 ProductDetails.aspx.cs CodeBehind-Datei, 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 Images-Ordner zu speichern und die Produktentität mit dem neuen Bildspeicherortwert zu aktualisieren.

    (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 Call)

    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 Bild für ein Produkt hochzuladen.

    Festlegen eines Bilds für ein Produkt

    Festlegen eines Bilds für ein Produkt

Aufgabe 2 – Hinzufügen asynchroner Verarbeitung zur Produktdetailseite

In dieser Aufgabe aktualisieren Sie die Produktdetailseite so, dass sie asynchron funktioniert. Mithilfe ASP.NET 4.5-asynchronen Seitenverarbeitung wird eine lange ausgeführte Aufgabe – der Imagedownloadprozess – verbessert.

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

Zeitaufwendige Vorgänge auf Ihrer Website eignen sich hervorragend für die asynchrone Programmierung, da sie den zugewiesenen Thread für eine lange Zeit belegen. Dazu gehören lange ausgeführte Anforderungen, Seiten mit vielen verschiedenen Elementen und Seiten, die Offlinevorgänge erfordern, z. B. Abfragen einer Datenbank oder Zugreifen auf einen externen Webserver. Der Vorteil besteht darin, dass bei Verwendung asynchroner Methoden für diese Vorgänge, während die Seite verarbeitet wird, der Thread freigegeben und an den Threadpool zurückgegeben wird und für die Teilnahme an einer neuen Seitenanforderung verwendet werden kann. Dies bedeutet, dass die Seite mit der Verarbeitung in einem Thread aus dem Threadpool beginnt und die Verarbeitung in einer anderen abgeschlossen wird, nachdem die asynchrone Verarbeitung abgeschlossen wurde.

  1. Öffnen Sie die ProductDetails.aspx Seite. 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 Beschriftung 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 Bild mit einer asynchronen Aufgabe herunterzuladen. Sie ersetzen die WebClient DownloadFile-Methode durch die DownloadFileTaskAsync-Methode und fügen das Await-Schlüsselwort 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));
                }
            }));
        }
    }
    

    Die RegisterAsyncTask registriert eine neue asynchrone Seite, die in einem anderen Thread ausgeführt werden soll. Er empfängt einen Lambda-Ausdruck mit der auszuführenden Aufgabe (t). Das Await-Schlüsselwort 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 Werte der HTTP-Anforderung automatisch beibehalten werden. Mit dem neuen asynchronen Programmiermodell in .NET 4.5 können Sie asynchronen Code schreiben, der sehr ähnlich wie synchronen Code aussieht, und den Compiler die Komplikationen von Rückruffunktionen oder Fortsetzungscode behandeln lassen.

    Hinweis

    RegisterAsyncTask und PageAsyncTask waren bereits seit .NET 2.0 verfügbar. Das Await-Schlüsselwort 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, auf denen der Code gestartet und die Ausführung abgeschlossen hat. Aktualisieren Sie dazu 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 appSetting-Variable hinzu.

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

    asynchrones Herunterladen eines Bilds

    asynchrones Herunterladen eines Bilds

Hinweis

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


Zusammenfassung

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

  • Verwenden stark typierter Datenbindungsausdrücke
  • Verwenden neuer Modellbindungsfeatures in WebFormularen
  • Verwenden von Wertanbietern zum Zuordnen von Seitendaten zu CodeBehind-Methoden
  • Verwenden von Datenanmerkungen für die Benutzereingabeüberprüfung
  • Nutzen der unaufdringlichen clientseitigen Überprüfung mit jQuery in Web Forms
  • Implementieren einer granularen Anforderungsüberprüfung
  • Implementieren asynchroner Seitenverarbeitung in Webformularen

Anhang A: 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 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 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.

  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 B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mit Web Deploy

In diesem Anhang wird gezeigt, wie Sie eine neue Website aus dem Azure-Portal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie 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 wächst. 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, die Sie steuern und verwalten können. Mit der Option "Schnellerstellung" können Sie eine fertige Webanwendung von außerhalb des Portals in Azure 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 in Azure 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 in Azure 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. 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 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 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.

      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 verwenden, um eine Verbindung mit SQL-Datenbank in Azure herzustellen, 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.

Anhang C: 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 (C#, Visual Basic und XML) 1 hinzu. 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 "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

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.