Wyświetlanie elementów danych i szczegółów

Autor: Erik Reitan

W tej serii samouczków przedstawiono podstawy tworzenia aplikacji ASP.NET Web Forms przy użyciu ASP.NET 4.7 i microsoft Visual Studio 2017.

Z tego samouczka dowiesz się, jak wyświetlać elementy danych i szczegóły elementów danych za pomocą ASP.NET Web Forms i Entity Framework Code First. Ten samouczek jest oparty na poprzednim samouczku "Interfejs użytkownika i nawigacja" w ramach serii samouczków Wingtip Toy Store. Po ukończeniu tego samouczka na stronie ProductsList.aspx zobaczysz produkty i szczegóły produktu na stronie ProductDetails.aspx .

Dowiesz się, jak:

Dodawanie kontrolki danych w celu wyświetlania produktów z bazy danych
Łączenie kontrolki danych z wybranymi danymi
Dodawanie kontrolki danych w celu wyświetlenia szczegółów produktu z bazy danych
Pobieranie wartości z ciągu zapytania i używanie tej wartości w celu ograniczenia danych pobranych z bazy danych

Funkcje wprowadzone w tym samouczku:

Bindowanie modelu
Dostawcy wartości

Dodawanie kontrolki danych

Do powiązania danych z kontrolką serwera można użyć kilku różnych opcji. Najbardziej powszechne to:

Dodawanie kontrolki źródła danych
Ręczne dodawanie kodu
Korzystanie z powiązania modelu

Powiązanie danych za pomocą kontrolki źródła danych

Dodanie kontrolki źródła danych umożliwia połączenie kontrolki źródła danych z kontrolką wyświetlającą dane. Dzięki temu podejściu można deklaratywnie, a nie programowo połączyć kontrolki po stronie serwera ze źródłami danych.

Koduj ręcznie, aby powiązać dane

Kodowanie ręcznie obejmuje:

Odczytywanie wartości
Sprawdzanie, czy ma wartość null
Konwertowanie na odpowiedni typ
Sprawdzanie powodzenia konwersji
Używanie wartości w zapytaniu

Takie podejście umożliwia pełną kontrolę nad logiką dostępu do danych.

Użyj wiązania modelu do wiązania danych

Powiązanie modelu umożliwia powiązanie wyników z znacznie mniejszym kodem i umożliwia ponowne użycie funkcji w całej aplikacji. Upraszcza ona pracę z logiką dostępu do danych skoncentrowaną na kodzie, jednocześnie zapewniając bogatą strukturę powiązania danych.

Wyświetlanie produktów

W tym samouczku użyjesz powiązania modelu do powiązania danych. Aby skonfigurować kontrolkę danych do używania powiązania modelu do wybierania danych, należy ustawić właściwość kontrolki SelectMethod na nazwę metody w kodzie strony. Kontrolka danych wywołuje metodę w odpowiednim momencie cyklu życia strony i automatycznie wiąże zwrócone dane. Nie ma potrzeby jawnego wywoływania DataBind metody.

W Eksploratorze rozwiązań otwórz ProductList.aspx.

Zastąp istniejący znacznik następującym znacznikiem:

<%@ 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>&nbsp;</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>

Ten kod używa kontrolki ListView o nazwie productList do wyświetlania produktów.

<asp:ListView ID="productList" runat="server"

Za pomocą szablonów i stylów zdefiniujesz sposób wyświetlania danych przez kontrolkę ListView . Jest to przydatne w przypadku danych w dowolnej powtarzającej się strukturze. Chociaż w tym przykładzie ListView po prostu są wyświetlane dane bazy danych, można również bez kodu umożliwić użytkownikom edytowanie, wstawianie i usuwanie danych oraz sortowanie i stronicowanie danych.

Ustawiając właściwość ItemType w kontrolce ListView, wyrażenie powiązania danych Item staje się dostępne, a kontrolka staje się silnie typizowana. Jak wspomniano w poprzednim samouczku, możesz wybrać szczegóły obiektu typu "Item" za pomocą funkcji IntelliSense, na przykład określając parametr ProductName:

Wyświetlanie elementów danych i szczegółów — IntelliSense

Używasz również wiązania modelu, aby określić SelectMethod wartość. Ta wartość (GetProducts) odpowiada metodzie, która zostanie dodana do kodu w celu wyświetlenia produktów w następnym kroku.

Dodawanie kodu do wyświetlania produktów

W tym kroku dodasz kod, aby wypełnić kontrolkę ListView danymi produktu z bazy danych. Kod obsługuje wyświetlanie wszystkich produktów i poszczególnych produktów kategorii.

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy ProductList.aspx , a następnie wybierz polecenie Wyświetl kod.

Zastąp istniejący kod w pliku ProductList.aspx.cs następującym kodem:

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;
        }
    }
}

Ten kod przedstawia metodę GetProducts, do której odnosi się właściwość kontrolki ListView na stronie ItemType. Aby ograniczyć wyniki do konkretnej kategorii baz danych, kod ustawia wartość categoryId pobraną z parametru ciągu zapytania przekazanego do strony ProductList.aspx po otwarciu strony ProductList.aspx. Klasa QueryStringAttribute w System.Web.ModelBinding przestrzeni nazw służy do pobierania wartości zmiennej idciągu zapytania . Powoduje to, że powiązanie modelu próbuje powiązać wartość z ciągu zapytania z parametrem categoryId w czasie wykonywania.

Po przekazaniu prawidłowej kategorii jako ciągu zapytania do strony, wyniki zapytania są ograniczone do tych produktów w bazie danych, które pasują do wartości categoryId. Jeśli, na przykład, adres URL strony ProductsList.aspx jest taki:

http://localhost/ProductList.aspx?id=1

Na stronie są wyświetlane tylko produkty, w których wartość categoryId jest 1równa .

Wszystkie produkty są wyświetlane, jeśli po wywołaniu strony ProductList.aspx nie zostanie uwzględniony żaden ciąg zapytania.

Źródła wartości dla tych metod są określane jako dostawcy wartości (na przykład QueryString) i atrybuty parametrów, które wskazują, który dostawca wartości do użycia jest określany jako atrybuty dostawcy wartości (takie jak id). ASP.NET zawiera dostawców wartości i odpowiednie atrybuty dla wszystkich typowych źródeł danych wejściowych użytkownika w aplikacji Web Forms, takich jak ciąg zapytania, pliki cookie, wartości formularza, kontrolki, stan widoku, stan sesji i właściwości profilu. Można również pisać niestandardowych dostawców wartości.

Uruchamianie aplikacji

Uruchom teraz aplikację, aby wyświetlić wszystkie produkty lub produkty kategorii.

Naciśnij klawisz F5 w programie Visual Studio, aby uruchomić aplikację.
Zostanie otwarta przeglądarka i zostanie wyświetlona strona Default.aspx .
Wybierz pozycję Samochody z menu nawigacji kategorii produktów.
Na stronie ProductList.aspx są wyświetlane tylko produkty kategorii Samochody . W dalszej części tego samouczka zostaną wyświetlone szczegóły produktu.
Wybierz pozycję Produkty z menu nawigacji u góry.
Ponownie zostanie wyświetlona strona ProductList.aspx , jednak tym razem zostanie wyświetlona cała lista produktów.
Zamknij przeglądarkę i wróć do programu Visual Studio.

Dodawanie kontrolki danych w celu wyświetlenia szczegółów produktu

Następnie zmodyfikujesz znaczniki na stronie ProductDetails.aspx dodanej w poprzednim samouczku, aby wyświetlić określone informacje o produkcie.

W Eksploratorze rozwiązań otwórz ProductDetails.aspx.

Zastąp istniejący znacznik następującym znacznikiem:

<%@ 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>&nbsp;</td>  
                    <td style="vertical-align: top; text-align:left;">
                        <b>Description:</b><br /><%#:Item.Description %>
                        <br />
                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                        <br />
                        <span><b>Product Number:</b>&nbsp;<%#:Item.ProductID %></span>
                        <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>

Ten kod używa kontrolki FormView do wyświetlania określonych szczegółów produktu. Ten znacznik używa metod, takich jak metody używane do wyświetlania danych na stronie ProductList.aspx . Kontrolka FormView służy do wyświetlania pojedynczego rekordu w czasie ze źródła danych. Gdy używasz kontrolki FormView , tworzysz szablony do wyświetlania i edytowania wartości powiązanych z danymi. Te szablony zawierają kontrolki, wyrażenia powiązania i formatowanie, które definiują wygląd i funkcjonalność formularza.

Połączenie poprzedniego znacznika z bazą danych wymaga dodatkowego kodu.

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy ProductDetails.aspx , a następnie kliknij polecenie Wyświetl kod.
Zostanie wyświetlony plik ProductDetails.aspx.cs .

Zastąp istniejący kod następującym kodem:

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;
        }
    }
}

Ten kod sprawdza wartość ciągu zapytania "productID". Jeśli zostanie znaleziona prawidłowa wartość ciągu zapytania, zostanie wyświetlony pasujący produkt. Jeśli ciąg zapytania nie zostanie znaleziony lub jego wartość nie jest prawidłowa, żaden produkt nie zostanie wyświetlony.

Uruchamianie aplikacji

Teraz możesz uruchomić aplikację, aby wyświetlić pojedynczy produkt na podstawie identyfikatora produktu.

Naciśnij klawisz F5 w programie Visual Studio, aby uruchomić aplikację.
Zostanie otwarta przeglądarka i zostanie wyświetlona strona Default.aspx .
Wybierz pozycję Łodzie z menu nawigacji kategorii.
Zostanie wyświetlona strona ProductList.aspx .
Wybierz pozycję Paper Boat (Łódź papierowa ) z listy produktów. Zostanie wyświetlona strona ProductDetails.aspx .
Zamknij okno przeglądarki.

Dodatkowe zasoby

Pobieranie i wyświetlanie danych za pomocą powiązania modelu i formularzy internetowych

Następne kroki

W tym samouczku dodano znaczniki i kod do wyświetlania produktów i informacji o produkcie. Nauczyłeś się o silnie typizowanych kontrolkach danych, powiązaniu modelu i dostawcach wartości. W następnym samouczku dodasz koszyk do przykładowej aplikacji Wingtip Toys.

Poprzedni Następny

Opinia

Czy ta strona była pomocna?

Last updated on 2026-03-28