Zobrazení datových položek a podrobností
V této sérii kurzů se naučíte základy vytváření ASP.NET Web Forms aplikace pomocí ASP.NET 4.7 a Microsoft Visual Studio 2017.
V tomto kurzu se dozvíte, jak zobrazit datové položky a podrobnosti o nich pomocí ASP.NET Web Forms a Entity Framework Code First. Tento kurz vychází z předchozího kurzu "Uživatelské rozhraní a navigace" jako součást série kurzů wingtip Toy Store. Po dokončení tohoto kurzu uvidíte produkty na stránce ProductsList.aspx a podrobnosti o produktu na stránce ProductDetails.aspx .
Dozvíte se, jak:
- Přidání ovládacího prvku dat pro zobrazení produktů z databáze
- Připojení ovládacího prvku dat k vybraným datům
- Přidání ovládacího prvku dat pro zobrazení podrobností o produktu z databáze
- Načtěte hodnotu z řetězce dotazu a použijte ji k omezení dat načtených z databáze.
Funkce představené v tomto kurzu:
- Vazby modelu
- Zprostředkovatelé hodnot
Přidání ovládacího prvku dat
K vytvoření vazby dat k ovládacímu prvku serveru můžete použít několik různých možností. Nejběžnější příkazy:
- Přidání ovládacího prvku zdroje dat
- Přidání kódu ručně
- Použití vazby modelu
Použití ovládacího prvku zdroje dat k vytvoření vazby dat
Přidání ovládacího prvku zdroje dat vám umožní propojit ovládací prvek zdroje dat s ovládacím prvku, který zobrazuje data. Tento přístup umožňuje připojit ovládací prvky na straně serveru ke zdrojům dat deklarativním způsobem, nikoli programově.
Ruční kód pro vazbu dat
Ruční kódování zahrnuje:
- Čtení hodnoty
- Kontrola, jestli má hodnotu null
- Převod na odpovídající typ
- Kontrola úspěšnosti převodu
- Použití hodnoty v dotazu
Tento přístup umožňuje plnou kontrolu nad logikou přístupu k datům.
Použití vazby modelu k vytvoření vazby dat
Vazby modelu umožňují svázat výsledky s mnohem menším využitím kódu a umožňují opakovaně používat funkce v celé aplikaci. Zjednodušuje práci s logikou přístupu k datům zaměřenou na kód a přitom stále poskytuje bohatou architekturu datových vazeb.
Zobrazit produkty
V tomto kurzu použijete vazbu modelu k vytvoření vazby dat. Pokud chcete ovládací prvek dat nakonfigurovat tak, aby k výběru dat používal vazbu modelu, nastavte vlastnost ovládacího prvku SelectMethod na název metody v kódu stránky. Ovládací prvek dat volá metodu ve vhodný čas v životním cyklu stránky a automaticky vytvoří vazbu vrácených dat. Není nutné explicitně volat metodu DataBind .
V Průzkumník řešení otevřete Soubor ProductList.aspx.
Nahraďte existující kód tímto kódem:
<%@ 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>
Tento kód používá ovládací prvek ListView s názvem productList k zobrazení produktů.
<asp:ListView ID="productList" runat="server"
Pomocí šablon a stylů můžete definovat, jak ListView ovládací prvek zobrazuje data. Je to užitečné pro data v jakékoli opakující se struktuře. I když tento listView příklad jednoduše zobrazuje data databáze, můžete také, bez kódu, umožnit uživatelům upravovat, vkládat a odstraňovat data a řadit a stránkovat data.
ItemType Nastavením vlastnosti v Ovládacím prvku ListView je k dispozici výraz Item datové vazby a ovládací prvek se stane silným typem. Jak bylo zmíněno v předchozím kurzu, můžete vybrat podrobnosti o objektu Item pomocí technologie IntelliSense, například zadat ProductName:
K zadání SelectMethod hodnoty používáte také vazbu modelu. Tato hodnota (GetProducts) odpovídá metodě, kterou přidáte do kódu na pozadí pro zobrazení produktů v dalším kroku.
Přidání kódu pro zobrazení produktů
V tomto kroku přidáte kód pro naplnění ovládacího prvku ListView daty o produktech z databáze. Kód podporuje zobrazení všech produktů a jednotlivých kategorií produktů.
V Průzkumník řešení klikněte pravým tlačítkem na ProductList.aspx a pak vyberte Zobrazit kód.
Nahraďte existující kód v souboru ProductList.aspx.cs tímto kódem:
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; } } }
Tento kód ukazuje metodu GetProducts , že ListView vlastnost ovládacího prvku ItemType odkazuje na stránce ProductList.aspx . Chcete-li omezit výsledky na konkrétní kategorii databáze, kód při přechodu na stránku ProductList.aspx nastaví categoryId hodnotu z hodnoty řetězce dotazu předanou stránce ProductList.aspx. Třída QueryStringAttribute v System.Web.ModelBinding oboru názvů slouží k načtení hodnoty proměnné idřetězce dotazu . To dává vazbě modelu pokyn, aby se pokusila vytvořit vazbu hodnoty z řetězce dotazu na categoryId parametr za běhu.
Když se stránce jako řetězec dotazu předá platná kategorie, výsledky dotazu se omezí na produkty v databázi, které odpovídají dané hodnotě categoryId . Pokud je například adresa URL stránky ProductsList.aspx následující:
http://localhost/ProductList.aspx?id=1
Na stránce se zobrazí jenom produkty, u kterých se rovná categoryId1.
Pokud se při zavolání stránky ProductList.aspx nezahrnou žádné řetězce dotazu, zobrazí se všechny produkty.
Zdroje hodnot pro tyto metody se označují jako zprostředkovatelé hodnot (například QueryString) a atributy parametrů, které určují, kterého zprostředkovatele hodnot použít se označují jako atributy zprostředkovatele hodnot (například id). ASP.NET zahrnují zprostředkovatele hodnot a odpovídající atributy pro všechny typické zdroje uživatelského vstupu v aplikaci Web Forms, jako jsou například řetězec dotazu, soubory cookie, hodnoty formuláře, ovládací prvky, stav zobrazení, stav relace a vlastnosti profilu. Můžete také psát vlastní zprostředkovatele hodnot.
Spuštění aplikace
Spuštěním aplikace zobrazíte všechny produkty nebo produkty dané kategorie.
Stisknutím klávesy F5 v sadě Visual Studio spusťte aplikaci.
Prohlížeč se otevře a zobrazí stránku Default.aspx .V navigační nabídce kategorie produktů vyberte Cars (Auta ).
Na stránce ProductList.aspx se zobrazí jenom produkty kategorie Auta . Později v tomto kurzu zobrazíte podrobnosti o produktu.
V navigační nabídce v horní části vyberte Produkty .
Opět se zobrazí stránka ProductList.aspx , ale tentokrát se zobrazí celý seznam produktů.
Zavřete prohlížeč a vraťte se do sady Visual Studio.
Přidání ovládacího prvku dat pro zobrazení podrobností o produktu
Dále upravíte kód na stránce ProductDetails.aspx , kterou jste přidali v předchozím kurzu, aby se zobrazily informace o konkrétních produktech.
V Průzkumník řešení otevřete Soubor ProductDetails.aspx.
Nahraďte existující kód tímto kódem:
<%@ 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>Tento kód používá ovládací prvek FormView k zobrazení konkrétních podrobností o produktu. Tento kód používá metody, jako jsou metody používané k zobrazení dat na stránce ProductList.aspx . Ovládací prvek FormView slouží k zobrazení jednoho záznamu ze zdroje dat najednou. Při použití ovládacího prvku FormView vytváříte šablony pro zobrazení a úpravu hodnot vázaných na data. Tyto šablony obsahují ovládací prvky, vazbové výrazy a formátování, které definují vzhled a funkčnost formuláře.
Připojení předchozího kódu k databázi vyžaduje další kód.
V Průzkumník řešení klikněte pravým tlačítkem na ProductDetails.aspx a potom klikněte na Zobrazit kód.
Zobrazí se soubor ProductDetails.aspx.cs .Nahraďte existující kód tímto kódem:
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; } } }
Tento kód zkontroluje hodnotu řetězce dotazu.productID Pokud se najde platná hodnota řetězce dotazu, zobrazí se odpovídající produkt. Pokud se řetězec dotazu nenajde nebo jeho hodnota není platná, nezobrazí se žádný produkt.
Spuštění aplikace
Teď můžete aplikaci spustit a zobrazit jednotlivé produkty zobrazené na základě ID produktu.
Stisknutím klávesy F5 v sadě Visual Studio spusťte aplikaci.
Otevře se prohlížeč a zobrazí stránku Default.aspx .V navigační nabídce kategorií vyberte Lodě .
Zobrazí se stránka ProductList.aspx .V seznamu produktů vyberte Papírový člun . Zobrazí se stránka ProductDetails.aspx .
Zavřete prohlížeč.
Další materiály
Načítání a zobrazení dat pomocí vazby modelu a webových formulářů
Další kroky
V tomto kurzu jste přidali značky a kód pro zobrazení produktů a podrobností o produktu. Dozvěděli jste se o ovládacích prvcích dat se silnými typy, vazbách modelu a poskytovatelích hodnot. V dalším kurzu přidáte nákupní košík do ukázkové aplikace Wingtip Toys.