Condividi tramite

Parte 4: Presentazione di prodotti

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" e assegnare il nome di pagina "ProductsList.aspx".

Fare clic su "Aggiungi".

Screenshot che mostra dove fare clic su Aggiungi.

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

Screenshow 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 aver creato la pagina, verrà usata di nuovo un'origine dati entità per accedere ai dati del prodotto, ma in questa istanza è necessario selezionare le entità prodotto ed è necessario limitare gli elementi restituiti solo a quelli per la categoria selezionata.

A tale scopo, verrà indicato a EntityDataSource di generare automaticamente la clausola WHERE e si specificherà WhereParameter.

Si ricorderà che quando sono state create le voci di menu nel menu "Categoria prodotto" il collegamento è stato creato in modo dinamico aggiungendo CategoryID a QueryString per ogni collegamento. Indicheremo all'origine dati dell'entità di fare derivare il parametro WHERE dal 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, comprimeremo diverse caratteristiche 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 si selezionerà 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.

Inoltre, prima di testare la nuova pagina è necessario creare la struttura di directory per le immagini del catalogo prodotti come indicato di seguito.

Screenshot che mostra la struttura delle directory.

Una volta che le immagini del prodotto sono accessibili, è possibile testare la pagina dell'elenco prodotti.

Screenshot che mostra la pagina dell'elenco prodotti.

Nella home page del sito fare clic su uno dei link dell'elenco categorie.

Screenshot che mostra i collegamenti dell'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à usato di nuovo un controllo EntityDataSource per accedere al record di prodotto specifico nel database e si userà 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 in un secondo momento.

Il carrello acquisti rappresenterà 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 Entity Data Model, è stata creata una classe per ogni tabella nel database. Di conseguenza, entity data model 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 proprie esigenze, ma si opterà invece di selezionare semplicemente un nome che eviterà il conflitto.

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

PrecedenteAvanti

  • Last updated on