Visualizzare elementi e dettagli dei dati

  • Articolo

di Erik Reitan

Questa serie di esercitazioni illustra le nozioni di base sulla creazione di un'applicazione Web Forms 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 dell'elemento di dati con Web Forms ASP.NET e Entity Framework Code First. Questa esercitazione si basa sull'esercitazione precedente "Interfaccia utente e 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
  • Connettere 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:

  • Associazione di 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 di codice in base alla mano
  • 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 dichiarare in modo dichiarativo, anziché a livello di codice, connettere i controlli lato server alle origini dati.

Codice per mano per associare i dati

La codifica in base alla mano comporta:

  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 codice molto meno e offre la possibilità di riutilizzare la funzionalità in tutta l'applicazione. Semplifica l'uso della logica di accesso ai dati incentrato sul codice, fornendo comunque un framework avanzato di data binding.

Visualizza prodotti

In questa esercitazione si userà l'associazione di modelli per associare i dati. Per configurare un controllo dati per usare l'associazione di modelli per selezionare i dati, impostare la proprietà del SelectMethod controllo su un nome del 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 modelli e stili, viene definito 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 di ordinare e pagina.

Impostando la proprietà nel controllo ListView, l'espressione ItemItemType di associazione dati è disponibile e il controllo diventa fortemente tipizzato. Come accennato nell'esercitazione precedente, è possibile selezionare Dettagli dell'oggetto Item con IntelliSense, ad esempio specificando :ProductName

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 si aggiungerà 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 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 metodo a cui fa riferimento la GetProducts proprietà del ItemType controllo ListView nella pagina ProductList.aspx. Per limitare i risultati a una categoria di database specifica, il codice imposta il categoryId valore del valore della stringa di query passato alla pagina ProductList.aspx quando viene spostata la pagina ProductList.aspx . La QueryStringAttribute classe nello System.Web.ModelBinding spazio dei nomi viene usata per recuperare il valore della variabile idstringa di query . In questo modo viene indicato l'associazione di modelli per 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 è questo:

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

La pagina visualizza solo i prodotti in cui è categoryId uguale 1a .

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 vengono definite 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 Forms, ad esempio la stringa di query, i cookie, i valori dei moduli, 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 mentre in Visual Studio per eseguire l'applicazione.
    Il browser viene aperto e mostra la pagina Default.aspx .

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

    Visualizzare gli elementi dati e i dettagli - Automobili

  3. Selezionare Prodotti dal menu di spostamento in alto.
    Anche in questo caso, viene visualizzata la pagina ProductList.aspx , tuttavia 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 del prodotto specifici. Questo markup usa metodi come i metodi usati per visualizzare i dati nella pagina ProductList.aspx . Il controllo FormView viene usato per visualizzare un singolo record alla volta da un'origine dati. Quando si usa il controllo FormView , creare modelli per visualizzare e modificare i valori associati ai 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 controlla 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 mentre in Visual Studio per eseguire l'applicazione.
    Il browser si apre e mostra la pagina Default.aspx .

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

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

    Screenshot della pagina Dettagli prodotto Paper Boat.

  4. Chiudere il browser.

Risorse aggiuntive

Recupero e visualizzazione dei dati con associazione di modelli e web form

Passaggi successivi

In questa esercitazione sono stati aggiunti markup e codice per visualizzare i prodotti e i dettagli del prodotto. Sono stati illustrati i controlli dati fortemente tipizzato, l'associazione di modelli e i provider di valori. Nell'esercitazione successiva si aggiungerà un carrello acquisti all'applicazione di esempio Wingtip Toys.

IndietroAvanti