Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Erik Reitan
In dieser Lernprogrammreihe lernen Sie die Grundlagen der Erstellung einer ASP.NET Web Forms-Anwendung mit ASP.NET 4.7 und Microsoft Visual Studio 2017 kennen.
In diesem Lernprogramm erfahren Sie, wie Sie Datenelemente und Datenelementdetails mit ASP.NET Web Forms und Entity Framework Code First anzeigen. Dieses Lernprogramm baut auf dem vorherigen Lernprogramm "UI und Navigation" im Rahmen der Lernprogrammreihe Wingtip Toy Store auf. Nach Abschluss dieses Lernprogramms werden Produkte auf der ProductsList.aspx-Seite und die Details eines Produkts auf der ProductDetails.aspx-Seite angezeigt.
Hier erfahren Sie, wie Sie:
- Fügen Sie ein Steuerelement für Daten hinzu, um Produkte aus der Datenbank anzuzeigen.
- Verbinden Sie ein Datensteuerelement mit den ausgewählten Daten
- Fügen Sie ein Datenkontrollelement hinzu, um Produktdetails aus der Datenbank anzuzeigen.
- Rufen Sie einen Wert aus der Abfragezeichenfolge ab, und verwenden Sie diesen Wert, um die Daten einzuschränken, die aus der Datenbank abgerufen werden.
In diesem Lernprogramm eingeführte Features:
- Modellbindung
- Wertanbieter
Datensteuerelement hinzufügen
Sie können einige verschiedene Optionen verwenden, um Daten an ein Serversteuerelement zu binden. Zu den häufigsten zählen:
- Hinzufügen eines Datenquellensteuerelements
- Hinzufügen von Code von Hand
- Verwenden der Modellbindung
Verwenden Sie ein Datenquellensteuerelement zum Binden von Daten
Durch das Hinzufügen eines Datenquellensteuerelements können Sie das Datenquellensteuerelement mit dem Steuerelement verknüpfen, das die Daten anzeigt. Mit diesem Ansatz können Sie serverseitige Steuerelemente deklarativ statt programmgesteuert mit Datenquellen verbinden.
Manuelle Codierung zur Datenbindung
Die Codierung von Hand umfasst Folgendes:
- Lesen eines Werts
- Überprüfen, ob es null ist
- Es in einen geeigneten Typ konvertieren
- Überprüfen des Konvertierungserfolgs
- Verwenden des Werts in der Abfrage
Mit diesem Ansatz haben Sie die vollständige Kontrolle über Ihre Datenzugriffslogik.
Verwenden der Modellbindung zum Binden von Daten
Mit der Modellbindung können Sie Ergebnisse mit viel weniger Code binden und die Funktionalität in der gesamten Anwendung wiederverwenden. Es vereinfacht die Arbeit mit codeorientierter Datenzugriffslogik und bietet weiterhin ein umfangreiches Datenbindungsframework.
Produkte anzeigen
In diesem Lernprogramm verwenden Sie die Modellbindung zum Binden von Daten. Um ein Datensteuerelement für die Verwendung der Modellbindung zum Auswählen von Daten zu konfigurieren, legen Sie die Eigenschaft des Steuerelements SelectMethod auf einen Methodennamen im Code der Seite fest. Das Datensteuerelement ruft die Methode zur entsprechenden Zeit im Seitenlebenszyklus auf und bindet die zurückgegebenen Daten automatisch. Die Methode muss nicht explizit aufgerufen DataBind werden.
Öffnen Sie im Projektmappen-Explorer die Datei ProductList.aspx.
Ersetzen Sie das vorhandene Markup durch dieses Markup:
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <section> <div> <hgroup> <h2><%: Page.Title %></h2> </hgroup> <asp:ListView ID="productList" runat="server" DataKeyNames="ProductID" GroupItemCount="4" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts"> <EmptyDataTemplate> <table > <tr> <td>No data was returned.</td> </tr> </table> </EmptyDataTemplate> <EmptyItemTemplate> <td/> </EmptyItemTemplate> <GroupTemplate> <tr id="itemPlaceholderContainer" runat="server"> <td id="itemPlaceholder" runat="server"></td> </tr> </GroupTemplate> <ItemTemplate> <td runat="server"> <table> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" width="100" height="75" style="border: solid" /></a> </td> </tr> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <span> <%#:Item.ProductName%> </span> </a> <br /> <span> <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%> </span> <br /> </td> </tr> <tr> <td> </td> </tr> </table> </p> </td> </ItemTemplate> <LayoutTemplate> <table style="width:100%;"> <tbody> <tr> <td> <table id="groupPlaceholderContainer" runat="server" style="width:100%"> <tr id="groupPlaceholder"></tr> </table> </td> </tr> <tr> <td></td> </tr> <tr></tr> </tbody> </table> </LayoutTemplate> </asp:ListView> </div> </section> </asp:Content>
Dieser Code verwendet ein ListView-Steuerelement , das zum Anzeigen von Produkten benannt ist productList .
<asp:ListView ID="productList" runat="server"
Mit Vorlagen und Formatvorlagen definieren Sie, wie das ListView-Steuerelement Daten anzeigt. Es ist nützlich für Daten in jeder wiederholten Struktur. Obwohl in diesem ListView-Beispiel einfach Datenbankdaten angezeigt werden, können Sie auch ohne Code Benutzern das Bearbeiten, Einfügen und Löschen von Daten sowie das Sortieren und Seitendaten ermöglichen.
Indem die ItemType Eigenschaft im ListView-Steuerelement gesetzt wird, wird der Datenbindungsausdruck Item verfügbar, und das Steuerelement ist stark typisiert. Wie im vorherigen Lernprogramm erwähnt, können Sie Elementobjektdetails mit IntelliSense auswählen, z. B. angeben:ProductName
Sie verwenden auch die Modellbindung, um einen SelectMethod Wert anzugeben. Dieser Wert (GetProducts) entspricht der Methode, die Sie dem Code-Behind hinzufügen, um Produkte im nächsten Schritt anzuzeigen.
Hinzufügen von Code zum Anzeigen von Produkten
In diesem Schritt fügen Sie Code zum Auffüllen des ListView-Steuerelements mit Produktdaten aus der Datenbank hinzu. Der Code unterstützt das Anzeigen aller Produkte und einzelner Kategorieprodukte.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf ProductList.aspx , und wählen Sie dann "Code anzeigen" aus.
Ersetzen Sie den vorhandenen Code in der datei ProductList.aspx.cs durch Folgendes:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductList : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (categoryId.HasValue && categoryId > 0) { query = query.Where(p => p.CategoryID == categoryId); } return query; } } }
Dieser Code zeigt die GetProducts Methode, auf die die Eigenschaft des ListView-SteuerelementsItemType auf der ProductList.aspx Seite verweist. Um die Ergebnisse auf eine bestimmte Datenbankkategorie zu beschränken, legt der Code den categoryId Wert aus dem Abfragezeichenfolgenwert fest, der an die ProductList.aspx Seite übergeben wird, wenn die ProductList.aspx Seite navigiert wird. Die QueryStringAttribute Klasse im System.Web.ModelBinding Namespace wird verwendet, um den Wert der Abfragezeichenfolgenvariable idabzurufen. Dadurch wird die Modellbindung angewiesen, einen Wert aus der Abfragezeichenfolge zur Laufzeit an den categoryId Parameter zu binden.
Wenn eine gültige Kategorie als Abfragezeichenfolge an die Seite übergeben wird, sind die Ergebnisse der Abfrage auf die Produkte in der Datenbank beschränkt, die dem categoryId Wert entsprechen. Wenn beispielsweise die URL der ProductsList.aspx Seite folgendes ist:
http://localhost/ProductList.aspx?id=1
Auf der Seite werden nur die Produkte angezeigt, bei denen der categoryId Wert gleich ist 1.
Alle Produkte werden angezeigt, wenn keine Abfragezeichenfolge enthalten ist, wenn die ProductList.aspx Seite aufgerufen wird.
Die Wertequellen für diese Methoden werden als Wertanbieter (z. B. QueryString) und die Parameterattribute bezeichnet, die angeben, welcher Wertanbieter verwendet werden soll, werden als Wertanbieterattribute (z. B. ) idbezeichnet. ASP.NET enthält Wertanbieter und entsprechende Attribute für alle typischen Quellen der Benutzereingabe in einer Webanwendung wie z. B. Abfragezeichenfolge, Cookies, Formularwerte, Steuerelemente, Ansichtszustand, Sitzungszustand und Profileigenschaften. Sie können auch benutzerdefinierte Wertanbieter schreiben.
Ausführen der Anwendung
Führen Sie die Anwendung jetzt aus, um alle Produkte oder Produkte einer Kategorie anzuzeigen.
Drücken Sie F5 , während in Visual Studio die Anwendung ausgeführt werden soll.
Der Browser wird geöffnet und zeigt die Default.aspx Seite an.Wählen Sie "Autos " im Navigationsmenü der Produktkategorie aus.
Auf der Seite ProductList.aspx werden nur Produkte der Kategorie "Autos " angezeigt. Später in diesem Lernprogramm wirst du Produktdetails anzeigen.
Wählen Sie " Produkte " im Navigationsmenü oben aus.
Auch hier wird die ProductList.aspx Seite angezeigt. Dieses Mal wird jedoch die gesamte Liste der Produkte angezeigt.
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.
Ein Datensteuerelement hinzufügen, um Produktdetails anzuzeigen.
Als Nächstes ändern Sie das Markup auf der Seite ProductDetails.aspx , die Sie im vorherigen Lernprogramm hinzugefügt haben, um bestimmte Produktinformationen anzuzeigen.
Öffnen Sie im Projektmappen-Explorer, ProductDetails.aspx.
Ersetzen Sie das vorhandene Markup durch dieses Markup:
<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false"> <ItemTemplate> <div> <h1><%#:Item.ProductName %></h1> </div> <br /> <table> <tr> <td> <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/> </td> <td> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#:Item.ProductID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView> </asp:Content>Dieser Code verwendet ein FormView-Steuerelement , um bestimmte Produktdetails anzuzeigen. Dieses Markup verwendet Methoden wie die Methoden zum Anzeigen von Daten auf der ProductList.aspx Seite. Das FormView-Steuerelement wird verwendet, um einen einzelnen Datensatz gleichzeitig aus einer Datenquelle anzuzeigen. Wenn Sie das FormView-Steuerelement verwenden, erstellen Sie Vorlagen zum Anzeigen und Bearbeiten von datengebundenen Werten. Diese Vorlagen enthalten Steuerelemente, Bindungsausdrücke und Formatierungen, die das Aussehen und die Funktionalität des Formulars definieren.
Für das Verbinden des vorherigen Markups mit der Datenbank ist zusätzlicher Code erforderlich.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf ProductDetails.aspx , und klicken Sie dann auf "Code anzeigen".
Die ProductDetails.aspx.cs Datei wird angezeigt.Ersetzen Sie den vorhandenen Code durch diesen Code:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductDetails : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProduct([QueryString("productID")] int? productId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (productId.HasValue && productId > 0) { query = query.Where(p => p.ProductID == productId); } else { query = null; } return query; } } }
Dieser Code sucht nach einem "productID" Abfragezeichenfolgenwert. Wenn ein gültiger Abfragezeichenfolgenwert gefunden wird, wird das entsprechende Produkt angezeigt. Wenn die Abfragezeichenfolge nicht gefunden wird oder der Wert ungültig ist, wird kein Produkt angezeigt.
Ausführen der Anwendung
Jetzt können Sie die Anwendung ausführen, um ein einzelnes Produkt basierend auf der Produkt-ID anzuzeigen.
Drücken Sie F5 , während in Visual Studio die Anwendung ausgeführt werden soll.
Der Browser wird geöffnet und zeigt die Default.aspx Seite an.Wählen Sie "Boote" im Navigationsmenü der Kategorie aus.
Die ProductList.aspx Seite wird angezeigt.Wählen Sie "Papierboot " aus der Produktliste aus. Die ProductDetails.aspx Seite wird angezeigt.
Schließen Sie den Browser.
Weitere Ressourcen
Abrufen und Anzeigen von Daten mit Modellbindung und Webformularen
Nächste Schritte
In diesem Tutorial haben Sie Markup und Code hinzugefügt, um Produkte und Produktdetails anzuzeigen. Sie haben über stark typisierte Datensteuerelemente, Modellbindung und Werteanbieter gelernt. Im nächsten Tutorial fügen Sie der Wingtip Toys-Beispielanwendung einen Einkaufswagen hinzu.