Condividi tramite

Parte 4: Elenco di prodotti

  • Articolo

di Joe Stagner

Tailspin Spyworks dimostra quanto sia straordinariamente semplice creare applicazioni potenti e scalabili per la piattaforma .NET. Mostra come usare le nuove funzionalità di ASP.NET 4 per creare un negozio online, tra cui shopping, checkout e amministrazione.

Questa serie di esercitazioni illustra in dettaglio tutti i passaggi eseguiti per compilare l'applicazione di esempio Tailspin Spyworks. La parte 4 illustra l'elenco dei prodotti con il controllo GridView.

Presentazione di prodotti con il controllo GridView

Iniziamo a implementare la pagina ProductsList.aspx facendo clic con il pulsante destro del mouse sulla soluzione e selezionando "Aggiungi" e "Nuovo elemento".

Screenshot che mostra dove selezionare Nuovo elemento.

Scegliere "Web Form using master page" (Modulo Web con pagina master) e immettere un nome di pagina di ProductsList.aspx.

Fare clic su "Aggiungi".

Screenshot che mostra dove fare clic su Aggiungi.

Scegliere quindi la cartella "Stili" in cui è stata posizionata la pagina Site.Master e selezionarla nella finestra "Contenuto della cartella".

Schermata che mostra il contenuto della cartella Stili.

Fare clic su "Ok" per creare la pagina.

Il database viene popolato con i dati del prodotto come illustrato di seguito.

Screenshot che mostra il database popolato con i dati del prodotto.

Dopo la creazione della pagina verrà nuovamente usata un'origine dati entità per accedere ai dati del prodotto, ma in questa istanza è necessario selezionare le entità prodotto e è necessario limitare gli elementi restituiti solo a quelli per la categoria selezionata.

A questo scopo, si indirà a EntityDataSource di generare automaticamente la clausola WHERE e verrà specificato WhereParameter.

Si ricorderà che quando sono state create le voci di menu nel menu "Categoria di prodotti" è stato creato dinamicamente il collegamento aggiungendo CategoryID all'oggetto QueryString per ogni collegamento. Verrà indicata l'origine dati di entità per derivare il parametro WHERE da tale parametro QueryString.

<asp:EntityDataSource ID="EDS_ProductsByCategory" runat="server"  
                      EnableFlattening="False" AutoGenerateWhereClause="True"
                      ConnectionString="name=CommerceEntities"  
                      DefaultContainerName="CommerceEntities" 
                      EntitySetName="Products">
<WhereParameters>
        <asp:QueryStringParameter Name="CategoryID" 
                                        QueryStringField="Category Id" 
                                        Type="Int32" />
       </WhereParameters>
</asp:EntityDataSource>

Verrà quindi configurato il controllo ListView per visualizzare un elenco di prodotti. Per creare un'esperienza di acquisto ottimale, verranno compattate diverse funzionalità concise in ogni singolo prodotto visualizzato nel nostro ListVew.

  • Il nome del prodotto sarà un collegamento alla visualizzazione dei dettagli del prodotto.
  • Verrà visualizzato il prezzo del prodotto.
  • Verrà visualizzata un'immagine del prodotto e verrà selezionata dinamicamente l'immagine da una directory di immagini del catalogo nell'applicazione.
  • Includeremo un collegamento per aggiungere immediatamente il prodotto specifico al carrello acquisti.

Ecco il markup per l'istanza del controllo ListView.

<asp:ListView ID="ListView_Products" runat="server" 
              DataKeyNames="ProductID"  
              DataSourceID="EDS_ProductsByCategory" 
              GroupItemCount="2">
   <EmptyDataTemplate>
      <table runat="server">
        <tr>
          <td>No data was returned.</td>
        </tr>
     </table>
  </EmptyDataTemplate>
  <EmptyItemTemplate>
     <td runat="server" />
  </EmptyItemTemplate>
  <GroupTemplate>
    <tr ID="itemPlaceholderContainer" runat="server">
      <td ID="itemPlaceholder" runat="server"></td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <table border="0" width="300">
        <tr>
          <td>&nbsp</td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
               <image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' 
                      width="100" height="75" border="0">
            </a> &nbsp
          </td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'><span 
               class="ProductListHead"><%# Eval("ModelName") %></span><br>
            </a>
            <span class="ProductListItem">
              <b>Special Price: </b><%# Eval("UnitCost", "{0:c}")%>
            </span><br />
            <a href='AddToCart.aspx?productID=<%# Eval("ProductID") %>'>
               <span class="ProductListItem"><b>Add To Cart<b></font></span>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </ItemTemplate>
  <LayoutTemplate>
    <table runat="server">
      <tr runat="server">
        <td runat="server">
          <table ID="groupPlaceholderContainer" runat="server">
            <tr ID="groupPlaceholder" runat="server"></tr>
          </table>
        </td>
      </tr>
      <tr runat="server"><td runat="server"></td></tr>
    </table>
  </LayoutTemplate>
</asp:ListView>

Stiamo creando dinamicamente diversi collegamenti per ogni prodotto visualizzato.

Prima di testare la nuova pagina è necessario anche creare la struttura della directory per le immagini del catalogo prodotti come indicato di seguito.

Screenshot che mostra la struttura della directory.

Dopo aver accessibile le immagini dei prodotti, è possibile testare la pagina dell'elenco dei prodotti.

Screenshot che mostra la pagina elenco prodotti.

Nella home page del sito fare clic su uno dei collegamenti elenco categorie.

Screenshot che mostra i collegamenti Elenco categorie.

Ora è necessario implementare la pagina ProductDetails.aspx e la funzionalità AddToCart.

Usare File-New> per creare un nome di pagina ProductDetails.aspx usando la pagina master del sito come in precedenza.

Verrà nuovamente usato un controllo EntityDataSource per accedere al record di prodotto specifico nel database e verrà usato un controllo FormView ASP.NET per visualizzare i dati del prodotto come indicato di seguito.

<asp:FormView ID="FormView_Product" runat="server" DataKeyNames="ProductID" 
                                                           DataSourceID="EDS_Product">
  <ItemTemplate>
    <div class="ContentHead"><%# Eval("ModelName") %></div><br />
      <table  border="0">
        <tr>
          <td>
            <img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" 
                                                       alt='<%# Eval("ModelName") %>' />
          </td>
          <td><%# Eval("Description") %>
            <br /><br /><br />                  
          </td>
        </tr>
      </table>
      <span class="UnitCost"><b>Your Price:</b> <%# Eval("UnitCost", "{0:c}")%> 
      <br /> 
      <span class="ModelNumber">
        <b>Model Number:</b> <%# Eval("ModelNumber") %>
      </span><br />
      <a href='AddToCart.aspx?ProductID=
        <%# Eval("ProductID") %>'> 
        <img id="Img1" src="~/Styles/Images/add_to_cart.gif" runat="server" 
             alt="" />
      </a>
      <br /><br />      
    </ItemTemplate>
  </asp:FormView>
  <asp:EntityDataSource ID="EDS_Product" runat="server" AutoGenerateWhereClause="True"  
                        EnableFlattening="False" 
                        ConnectionString="name=CommerceEntities" 
                        DefaultContainerName="CommerceEntities" 
                        EntitySetName="Products" 
                        EntityTypeFilter="" 
                        Select="" Where="">
    <WhereParameters>
      <asp:QueryStringParameter Name="ProductID" 
                                QueryStringField="productID"  Type="Int32" />
    </WhereParameters>
  </asp:EntityDataSource>

Non preoccuparti se la formattazione sembra un po 'divertente per te. Il markup precedente lascia spazio nel layout di visualizzazione per un paio di funzionalità che verranno implementate più avanti.

Il carrello acquisti rappresenta la logica più complessa nell'applicazione. Per iniziare, usare File-New> per creare una pagina denominata MyShoppingCart.aspx.

Si noti che non si sceglie il nome ShoppingCart.aspx.

Il database contiene una tabella denominata "ShoppingCart". Quando è stato generato un modello di dati di entità, è stata creata una classe per ogni tabella nel database. Pertanto, il modello di dati di entità ha generato una classe di entità denominata "ShoppingCart". È possibile modificare il modello in modo da poter usare tale nome per l'implementazione del carrello acquisti o estenderlo per le nostre esigenze, ma si opterà invece per selezionare semplicemente un nome che eviterà il conflitto.

Vale anche la pena notare che stiamo creando un semplice carrello acquisti e incorporando la logica del carrello acquisti con la visualizzazione del carrello acquisti. Potremmo anche scegliere di implementare il carrello acquisti in un livello business completamente separato.

IndietroAvanti