Condividi tramite

Visualizzare elementi e dettagli dei dati

di Erik Reitan

Questa serie di esercitazioni illustra le nozioni di base per la creazione di un'applicazione Web Form ASP.NET con ASP.NET 4.7 e Microsoft Visual Studio 2017.

In questa esercitazione si apprenderà come visualizzare gli elementi di dati e i dettagli degli elementi di dati con ASP.NET Web Form ed Entity Framework Code First. Questa esercitazione si basa sull'esercitazione precedente sull'interfaccia utente e sulla navigazione come parte della serie di esercitazioni di Wingtip Toy Store. Dopo aver completato questa esercitazione, verranno visualizzati i prodotti nella pagina ProductsList.aspx e i dettagli di un prodotto nella pagina ProductDetails.aspx .

Si apprenderà come:

  • Aggiungere un controllo dati per visualizzare i prodotti dal database
  • Connetti un controllo dati ai dati selezionati
  • Aggiungere un controllo dati per visualizzare i dettagli del prodotto dal database
  • Recuperare un valore dalla stringa di query e usare tale valore per limitare i dati recuperati dal database

Funzionalità introdotte in questa esercitazione:

  • Collegamento dei modelli
  • Provider di valori

Aggiungere un controllo dati

È possibile usare alcune opzioni diverse per associare i dati a un controllo server. Quelli più comuni includono:

  • Aggiunta di un controllo origine dati
  • Aggiunta manuale del codice
  • Uso dell'associazione di modelli

Usare un controllo origine dati per associare i dati

L'aggiunta di un controllo origine dati consente di collegare il controllo origine dati al controllo che visualizza i dati. Con questo approccio, è possibile connettere in modo dichiarativo, anziché a livello di codice, i controlli lato server alle origini dati.

Codice manuale per associare i dati

La codifica manuale prevede:

  1. Lettura di un valore
  2. Verifica se è null
  3. Conversione in un tipo appropriato
  4. Verifica dell'esito positivo della conversione
  5. Uso del valore nella query

Questo approccio consente di avere il controllo completo sulla logica di accesso ai dati.

Usare l'associazione di modelli per associare i dati

L'associazione di modelli consente di associare i risultati con molto meno codice e di riutilizzare le funzionalità in tutta l'applicazione. Semplifica l'uso della logica di accesso ai dati incentrata sul codice, offrendo comunque un framework avanzato di data binding.

Visualizzare i prodotti

In questa esercitazione si userà l'associazione di modelli per associare i dati. Per configurare un controllo dati per utilizzare l'associazione di modelli per selezionare i dati, impostare la proprietà del SelectMethod controllo su un nome di metodo nel codice della pagina. Il controllo dati chiama il metodo al momento appropriato nel ciclo di vita della pagina e associa automaticamente i dati restituiti. Non è necessario chiamare in modo esplicito il DataBind metodo .

  1. In Esplora soluzioni aprire ProductList.aspx.

  2. Sostituire il markup esistente con questo 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>&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>

Questo codice usa un controllo ListView denominato productList per visualizzare i prodotti.

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

Con i modelli e gli stili, è possibile definire il modo in cui il controllo ListView visualizza i dati. È utile per i dati in qualsiasi struttura ripetuta. Anche se questo esempio di ListView visualizza semplicemente i dati del database, è anche possibile, senza codice, consentire agli utenti di modificare, inserire ed eliminare dati e ordinare e pagina.

Impostando la ItemType proprietà del controllo ListView, l'espressione Item di data-binding è disponibile e il controllo diventa fortemente tipizzato. Come indicato nell'esercitazione precedente, è possibile selezionare i dettagli dell'oggetto Item con IntelliSense, ad esempio specificandoProductName:

Visualizzare elementi di dati e dettagli - IntelliSense

Si usa anche l'associazione di modelli per specificare un SelectMethod valore. Questo valore (GetProducts) corrisponde al metodo che verrà aggiunto al code-behind per visualizzare i prodotti nel passaggio successivo.

Aggiungere codice per visualizzare i prodotti

In questo passaggio si aggiungerà il codice per popolare il controllo ListView con i dati del prodotto dal database. Il codice supporta la visualizzazione di tutti i prodotti e dei singoli prodotti di categoria.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su ProductList.aspx e quindi scegliere Visualizza codice.

  2. Sostituire il codice esistente nel file ProductList.aspx.cs con questo:

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

Questo codice mostra il GetProducts metodo a cui fa riferimento la proprietà del controllo ItemType nella pagina ProductList.aspx. Per limitare i risultati a una categoria specifica del database, il codice imposta il valore categoryId dalla stringa di query passato alla pagina ProductList.aspx quando si naviga alla pagina ProductList.aspx. La QueryStringAttribute classe nello System.Web.ModelBinding spazio dei nomi viene usata per recuperare il valore della variabile iddella stringa di query . Indica all'associazione di modelli di provare a associare un valore dalla stringa di query al categoryId parametro in fase di esecuzione.

Quando una categoria valida viene passata come stringa di query alla pagina, i risultati della query sono limitati a tali prodotti nel database che corrispondono al categoryId valore. Ad esempio, se l'URL della pagina ProductsList.aspx è il seguente:

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

Nella pagina vengono visualizzati solo i prodotti in cui è categoryIduguale a 1 .

Tutti i prodotti vengono visualizzati se non viene inclusa alcuna stringa di query quando viene chiamata la pagina ProductList.aspx .

Le origini dei valori per questi metodi sono denominate provider di valori (ad esempio QueryString) e gli attributi dei parametri che indicano il provider di valori da usare vengono definiti attributi del provider di valori , ad esempio id. ASP.NET include provider di valori e attributi corrispondenti per tutte le origini tipiche dell'input utente in un'applicazione Web Form, ad esempio la stringa di query, i cookie, i valori del modulo, i controlli, lo stato di visualizzazione, lo stato della sessione e le proprietà del profilo. È anche possibile scrivere provider di valori personalizzati.

Eseguire l'applicazione

Eseguire l'applicazione ora per visualizzare tutti i prodotti o i prodotti di una categoria.

  1. Premere F5 in Visual Studio per eseguire l'applicazione.
    Il browser si apre e visualizza la pagina Default.aspx .

  2. Selezionare Automobili dal menu di spostamento della categoria di prodotti.
    Nella pagina ProductList.aspx vengono visualizzati solo i prodotti della categoria Cars . Più avanti in questa esercitazione verranno visualizzati i dettagli del prodotto.

    Visualizzare elementi di dati e dettagli - Automobili

  3. Selezionare Prodotti dal menu di spostamento nella parte superiore.
    Anche in questo caso, viene visualizzata la pagina ProductList.aspx , ma questa volta viene visualizzato l'intero elenco di prodotti.

    Screenshot della pagina ProductList.aspx che mostra l'intero elenco di prodotti.

  4. Chiudere il browser e tornare a Visual Studio.

Aggiungere un controllo dati per visualizzare i dettagli del prodotto

Successivamente, si modificherà il markup nella pagina ProductDetails.aspx aggiunta nell'esercitazione precedente per visualizzare informazioni specifiche sul prodotto.

  1. In Esplora soluzioni aprire ProductDetails.aspx.

  2. Sostituire il markup esistente con questo 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>&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>

    Questo codice usa un controllo FormView per visualizzare dettagli specifici del prodotto. Questo markup usa metodi come i metodi usati per visualizzare i dati nella pagina ProductList.aspx . Il controllo FormView viene utilizzato per visualizzare un singolo record alla volta da un'origine dati. Quando si usa il controllo FormView , si creano modelli per visualizzare e modificare i valori associati a dati. Questi modelli contengono controlli, espressioni di associazione e formattazione che definiscono l'aspetto e la funzionalità del modulo.

La connessione del markup precedente al database richiede codice aggiuntivo.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su ProductDetails.aspx e quindi scegliere Visualizza codice.
    Viene visualizzato il file ProductDetails.aspx.cs .

  2. Sostituire il codice esistente con questo codice:

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

Questo codice verifica la presenza di un valore di stringa di query "productID". Se viene trovato un valore di stringa di query valido, viene visualizzato il prodotto corrispondente. Se la stringa di query non viene trovata o il relativo valore non è valido, non viene visualizzato alcun prodotto.

Eseguire l'applicazione

È ora possibile eseguire l'applicazione per visualizzare un singolo prodotto visualizzato in base all'ID prodotto.

  1. Premere F5 in Visual Studio per eseguire l'applicazione.
    Il browser si apre e visualizza la pagina Default.aspx .

  2. Selezionare Barche dal menu di spostamento delle categorie.
    Viene visualizzata la pagina ProductList.aspx .

  3. Selezionare Paper Boat dall'elenco dei prodotti. Viene visualizzata la pagina ProductDetails.aspx .

    Screenshot della pagina dei dettagli del prodotto Paper Boat.

  4. Chiudere il browser.

Risorse aggiuntive

Recupero e visualizzazione di dati con l'associazione di modelli e i Web form

Passaggi successivi

In questo tutorial, avete aggiunto markup e codice per visualizzare i prodotti e i dettagli dei prodotti. Hai appreso riguardo ai controlli dati fortemente tipizzati, al binding dei modelli e ai provider di valori. Nell'esercitazione successiva si aggiungerà un carrello acquisti all'applicazione di esempio Wingtip Toys.

PrecedenteAvanti

  • Last updated on