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

Artykuł
07/13/2023

W tej serii samouczków przedstawiono podstawy tworzenia aplikacji ASP.NET Web Forms przy użyciu ASP.NET 4.7 i Programu 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 zobaczysz produkty na stronie ProductsList.aspx i szczegóły produktu na stronie ProductDetails.aspx .

Omawiane tematy:

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:

Powiązanie modelu
Dostawcy wartości

Dodawanie kontrolki danych

Do powiązania danych z kontrolką serwera można użyć kilku różnych opcji. Oto najczęściej używane podpolecenia:

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

Tworzenie powiązania danych za pomocą kontrolki źródła danych

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

Kodowanie ręcznie w celu powiązania danych

Kodowanie ręcznie obejmuje:

Odczytywanie wartości
Sprawdzanie, czy ma wartość null
Konwertowanie go 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.

Tworzenie powiązania modelu w celu powiązania danych

Powiązanie modelu pozwala powiązać wyniki z znacznie mniejszym kodem i umożliwia ponowne użycie funkcji w całej aplikacji. Upraszcza pracę z logiką dostępu do danych skoncentrowaną na kodzie, jednocześnie zapewniając rozbudowaną strukturę powiązań 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 czasie w cyklu życia strony i automatycznie wiąże zwrócone dane. Nie ma potrzeby jawnego wywoływania DataBind metody .

W Eksplorator rozwiązań otwórz plik ProductList.aspx.

Zastąp istniejącą adiustację 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 można zdefiniować sposób wyświetlania danych przez kontrolkę ListView . Jest to przydatne w przypadku danych w dowolnej strukturze powtarzającej się. Chociaż ten przykład obiektu ListView po prostu wyświetla dane bazy danych, możesz również bez kodu umożliwić użytkownikom edytowanie, wstawianie i usuwanie danych oraz sortowanie i stronicowanie danych.

Ustawiając ItemType właściwość w kontrolce ListView , wyrażenie Item powiązania danych jest dostępne, a kontrolka staje się silnie typizowana. Jak wspomniano w poprzednim samouczku, możesz wybrać pozycję Szczegóły obiektu elementu z funkcją IntelliSense, taką jak określanie elementu ProductName:

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

Używasz również powiązania modelu do określania SelectMethod wartości. Ta wartość (GetProducts) odpowiada metodzie, którą dodasz do kodu , aby wyświetlić produkty 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 produktów z poszczególnych kategorii.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję ProductList.aspx, a następnie wybierz pozycję 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órego odwołuje się właściwość kontrolki ItemTypeListView na stronie ProductList.aspx. Aby ograniczyć wyniki do określonej kategorii bazy danych, kod ustawia categoryId wartość z wartości ciągu zapytania przekazanej do strony ProductList.aspx po przejściu do 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.

Gdy prawidłowa kategoria jest przekazywana jako ciąg zapytania do strony, wyniki zapytania są ograniczone do tych produktów w bazie danych, które pasują categoryId do wartości. Jeśli na przykład adres URL strony ProductsList.aspx to:

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

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

Wszystkie produkty są wyświetlane, jeśli podczas wywoływanej strony ProductList.aspx nie jest uwzględniany ż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 są określane 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ć dostawców wartości niestandardowych.

Uruchamianie aplikacji

Uruchom aplikację teraz, 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 nawigacyjnego 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 Eksplorator rozwiązań otwórz plik ProductDetails.aspx.

Zastąp istniejącą adiustację 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 , możesz tworzyć szablony do wyświetlania i edytowania wartości powiązanych z danymi. Te szablony zawierają kontrolki, wyrażenia powiązań i formatowanie, które definiują wygląd i funkcjonalność formularza.

Połączenie poprzedniej adiustacji z bazą danych wymaga dodatkowego kodu.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję 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-kwerendy nie zostanie znaleziony lub jego wartość nie jest prawidłowa, nie jest wyświetlany żaden produkt.

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ązań modelu i formularzy internetowych

Następne kroki

W tym samouczku dodano znaczniki i kod, aby wyświetlić produkty i szczegóły produktu. Przedstawiono silnie typizowane kontrolki danych, powiązania modelu i dostawców wartości. W następnym samouczku dodasz koszyk do przykładowej aplikacji Wingtip Toys.

Wstecz Dalej

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

Omawiane tematy:

Funkcje wprowadzone w tym samouczku:

Dodawanie kontrolki danych

Tworzenie powiązania danych za pomocą kontrolki źródła danych

Kodowanie ręcznie w celu powiązania danych

Tworzenie powiązania modelu w celu powiązania danych

Wyświetlanie produktów

Dodawanie kodu do wyświetlania produktów

Uruchamianie aplikacji

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

Uruchamianie aplikacji

Dodatkowe zasoby

Następne kroki

Opinia

Opinia

Dodatkowe zasoby