Anzeigen von Datenelementen und Details
von Erik Reitan
In dieser Tutorialreihe erfahren Sie die Grundlagen zum Erstellen einer ASP.NET Web Forms-Anwendung mit ASP.NET 4.7 und Microsoft Visual Studio 2017.
In diesem Tutorial erfahren Sie, wie Sie Datenelemente und Datenelementdetails mit ASP.NET Web Forms und Entity Framework Code First anzeigen. Dieses Tutorial baut auf dem vorherigen Tutorial "UI and Navigation" im Rahmen der Wingtip Toy Store-Tutorialreihe auf. Nach Abschluss dieses Tutorials werden Produkte auf der Seite ProductsList.aspx und die Produktdetails auf der Seite ProductDetails.aspx angezeigt.
Sie lernen Folgendes:
- Hinzufügen eines Datensteuerelements zum Anzeigen von Produkten aus der Datenbank
- Verbinden eines Datensteuerelements mit den ausgewählten Daten
- Hinzufügen eines Datensteuerelements zum Anzeigen von Produktdetails aus der Datenbank
- Rufen Sie einen Wert aus der Abfragezeichenfolge ab, und verwenden Sie diesen Wert, um die aus der Datenbank abgerufenen Daten einzuschränken.
In diesem Tutorial vorgestellte Features:
- Modellbindung
- Wertanbieter
Hinzufügen eines Datensteuerelements
Sie können verschiedene Optionen verwenden, um Daten an ein Serversteuerelement zu binden. Dies sind die am häufigsten verwendeten:
- Hinzufügen eines Datenquellensteuerelements
- Hinzufügen von Code per Hand
- Verwenden der Modellbindung
Verwenden eines Datenquellensteuerelements 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 nicht programmgesteuert, sondern deklarativ serverseitige Steuerelemente mit Datenquellen verbinden.
Manueller Code zum Binden von Daten
Die Codierung von Hand umfasst Folgendes:
- Lesen eines Werts
- Überprüfen, ob null ist
- Konvertieren in einen geeigneten Typ
- Überprüfen des Konvertierungserfolgs
- Verwenden des Werts in der Abfrage
Mit diesem Ansatz haben Sie die volle Kontrolle über Ihre Datenzugriffslogik.
Verwenden der Modellbindung zum Binden von Daten
Mit der Modellbindung können Sie Ergebnisse mit weit weniger Code binden und die Funktionalität in ihrer gesamten Anwendung wiederverwenden. Es vereinfacht die Arbeit mit codeorientierter Datenzugriffslogik und stellt gleichzeitig ein umfassendes Datenbindungsframework bereit.
Produkte anzeigen
In diesem Tutorial verwenden Sie die Modellbindung, um Daten zu binden. 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. Es ist nicht erforderlich, die DataBind -Methode explizit aufzurufen.
Öffnen Sie in Projektmappen-ExplorerProductList.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>
In diesem Code wird ein ListView-Steuerelement mit dem Namen zum productList Anzeigen von Produkten verwendet.
<asp:ListView ID="productList" runat="server"
Mit Vorlagen und Stilen definieren Sie, wie das ListView-Steuerelement Daten anzeigt. Es ist nützlich für Daten in jeder sich wiederholenden Struktur. Obwohl in diesem ListView-Beispiel einfach Datenbankdaten angezeigt werden, können Sie benutzern auch ohne Code das Bearbeiten, Einfügen und Löschen von Daten sowie das Sortieren und Seitendaten ermöglichen.
Durch Festlegen der ItemType Eigenschaft im ListView-Steuerelement ist der Datenbindungsausdruck Item verfügbar, und das Steuerelement wird stark typisiert. Wie im vorherigen Tutorial erwähnt, können Sie Item-Objektdetails 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 hinzu, um das ListView-Steuerelement mit Produktdaten aus der Datenbank aufzufüllen. Der Code unterstützt die Anzeige aller Produkte und einzelner Kategorieprodukte.
Klicken Sie in 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 Seite ProductList.aspx verweist. Um die Ergebnisse auf eine bestimmte Datenbankkategorie zu beschränken, legt der Code den categoryId Wert des Abfragezeichenfolgenwerts fest, der an die Seite ProductList.aspx übergeben wird, wenn die Seite "ProductList.aspx " navigiert wird. Die QueryStringAttribute -Klasse im System.Web.ModelBinding -Namespace wird verwendet, um den Wert der Abfragezeichenfolgenvariable idabzurufen. Dadurch wird die Modellbindung angewiesen, zur Laufzeit einen Wert aus der Abfragezeichenfolge 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 mit dem categoryId Wert übereinstimmen. Für instance, wenn die Url der Seite ProductsList.aspx wie folgt lautet:
http://localhost/ProductList.aspx?id=1
Auf der Seite werden nur die Produkte angezeigt, bei denen gleich categoryId1ist.
Alle Produkte werden angezeigt, wenn beim Aufrufen der Seite ProductList.aspx keine Abfragezeichenfolge enthalten ist.
Die Wertequellen für diese Methoden werden als Wertanbieter (z . B. QueryString) bezeichnet, und die Parameterattribute, die angeben, welchen Wertanbieter verwendet werden soll, werden als Wertanbieterattribute (z id. B. ) bezeichnet. ASP.NET enthält Werteanbieter und entsprechende Attribute für alle typischen Quellen von Benutzereingaben in einer Web Forms-Anwendung, z. B. Abfragezeichenfolge, Cookies, Formularwerte, Steuerelemente, Ansichtsstatus, Sitzungsstatus und Profileigenschaften. Sie können auch benutzerdefinierte Wertanbieter schreiben.
Ausführen der Anwendung
Führen Sie jetzt die Anwendung aus, um alle Produkte oder Produkte einer Kategorie anzuzeigen.
Drücken Sie F5 , während Sie in Visual Studio die Anwendung ausführen möchten.
Der Browser wird geöffnet und zeigt die Seite Default.aspx an.Wählen Sie im Navigationsmenü der Produktkategorie die Option Autos aus.
Auf der Seite ProductList.aspx werden nur Produkte der Kategorie Cars angezeigt. Weiter unten in diesem Tutorial werden Produktdetails angezeigt.
Wählen Sie oben im Navigationsmenü die Option Produkte aus.
Auch hier wird die Seite ProductList.aspx angezeigt, aber diesmal wird die gesamte Liste der Produkte angezeigt.
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.
Hinzufügen eines Datensteuerelements zum Anzeigen von Produktdetails
Als Nächstes ändern Sie das Markup auf der Seite ProductDetails.aspx , die Sie im vorherigen Tutorial hinzugefügt haben, um bestimmte Produktinformationen anzuzeigen.
Öffnen Sie in Projektmappen-ExplorerProductDetails.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, die zum Anzeigen von Daten auf der Seite ProductList.aspx verwendet werden. 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.
Das Verbinden des vorherigen Markups mit der Datenbank erfordert zusätzlichen Code.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf ProductDetails.aspx, und klicken Sie dann auf Code anzeigen.
Die Datei ProductDetails.aspx.cs 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; } } }
Mit diesem Code wird ein Abfragezeichenfolgenwert "productID" überprüft. Wenn ein gültiger Abfragezeichenfolgenwert gefunden wird, wird das übereinstimmende Produkt angezeigt. Wenn die Abfragezeichenfolge nicht gefunden wird oder ihr Wert ungültig ist, wird kein Produkt angezeigt.
Ausführen der Anwendung
Jetzt können Sie die Anwendung ausführen, um ein einzelnes Produkt anzuzeigen, das basierend auf der Produkt-ID angezeigt wird.
Drücken Sie F5 , während Sie in Visual Studio die Anwendung ausführen möchten.
Der Browser wird geöffnet und zeigt die Seite Default.aspx an.Wählen Sie im Navigationsmenü der Kategorie Boote aus.
Die Seite ProductList.aspx wird angezeigt.Wählen Sie Paper Boat aus der Produktliste aus. Die Seite ProductDetails.aspx wird angezeigt.
Schließen Sie den Browser.
Zusätzliche 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 mehr über stark typisierte Datensteuerelemente, Modellbindung und Wertanbieter erfahren. Im nächsten Tutorial fügen Sie der Wingtip Toys-Beispielanwendung einen Einkaufswagen hinzu.
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für