Partager via

Partie 4 : Liste des produits

  • Article

par Joe Stagner

Tailspin Spyworks montre à quel point il est extrêmement simple de créer des applications puissantes et évolutives pour la plateforme .NET. Il montre comment utiliser les nouvelles fonctionnalités de ASP.NET 4 pour créer un magasin en ligne, y compris les achats, les caisses et l’administration.

Cette série de tutoriels détaille toutes les étapes à suivre pour générer l’exemple d’application Tailspin Spyworks. La partie 4 traite de la liste des produits avec le contrôle GridView.

Liste des produits avec le contrôle GridView

Commençons l’implémentation de notre page ProductsList.aspx en « clic droit » sur notre solution et en sélectionnant « Ajouter » et « Nouvel élément ».

Capture d’écran montrant où sélectionner Nouvel élément.

Choisissez « Formulaire web à l’aide de la page maître » et entrez le nom de page ProductsList.aspx.

Cliquez sur « Ajouter ».

Capture d’écran montrant où cliquer sur Ajouter.

Ensuite, choisissez le dossier « Styles » dans lequel nous avons placé la page Site.Master et sélectionnez-la dans la fenêtre « Contenu du dossier ».

Écran qui montre le contenu du dossier Styles.

Cliquez sur « OK » pour créer la page.

Notre base de données est remplie avec des données de produit comme indiqué ci-dessous.

Capture d’écran montrant la base de données remplie avec des données de produit.

Une fois notre page créée, nous utiliserons à nouveau une source de données d’entité pour accéder à ces données de produit, mais dans cette instance nous devons sélectionner les entités de produit et limiter les éléments retournés uniquement à ceux de la catégorie sélectionnée.

Pour ce faire, nous allons indiquer à EntityDataSource de générer automatiquement la clause WHERE et nous allons spécifier whereParameter.

Vous vous souvenez que lorsque nous avons créé les éléments de menu dans notre « menu Catégorie de produit », nous avons créé dynamiquement le lien en ajoutant l’ID de catégorie à la chaîne de requête pour chaque lien. Nous allons indiquer à la source de données d’entité de dériver le paramètre WHERE de ce paramètre 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>

Ensuite, nous allons configurer le contrôle ListView pour afficher une liste de produits. Pour créer une expérience d’achat optimale, nous allons compacter plusieurs fonctionnalités concises dans chaque produit individuel affiché dans notre ListVew.

  • Le nom du produit est un lien vers la vue détaillée du produit.
  • Le prix du produit s’affiche.
  • Une image du produit s’affiche et nous la sélectionnons dynamiquement à partir d’un répertoire d’images de catalogue dans notre application.
  • Nous inclurons un lien pour ajouter immédiatement le produit spécifique au panier d’achat.

Voici le balisage de notre contrôle ListView instance.

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

Nous créons dynamiquement plusieurs liens pour chaque produit affiché.

En outre, avant de tester sa propre page, nous devons créer la structure de répertoires pour les images du catalogue de produits comme suit.

Capture d’écran montrant la structure de répertoires.

Une fois que nos images de produits sont accessibles, nous pouvons tester notre page de liste de produits.

Capture d’écran montrant la page de liste des produits.

Dans la page d’accueil du site, cliquez sur l’un des liens de liste de catégories.

Capture d’écran montrant les liens Liste de catégories.

Nous devons maintenant implémenter la page ProductDetails.aspx et la fonctionnalité AddToCart.

Utilisez File-New> pour créer un nom de page ProductDetails.aspx à l’aide de la page maître du site, comme nous l’avons fait précédemment.

Nous utiliserons à nouveau un contrôle EntityDataSource pour accéder à l’enregistrement de produit spécifique dans la base de données et nous utiliserons un contrôle FormView ASP.NET pour afficher les données du produit comme suit.

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

Ne vous inquiétez pas si la mise en forme vous semble un peu drôle. Le balisage ci-dessus laisse de la place dans la disposition d’affichage pour quelques fonctionnalités que nous implémenterons ultérieurement.

Le panier d’achat représentera la logique la plus complexe dans notre application. Pour commencer, utilisez File-New> pour créer une page appelée MyShoppingCart.aspx.

Notez que nous ne choisissons pas le nom ShoppingCart.aspx.

Notre base de données contient une table nommée « ShoppingCart ». Lorsque nous avons généré un modèle Entity Data Model, une classe a été créée pour chaque table de la base de données. Par conséquent, le modèle de données d’entité a généré une classe d’entité nommée « ShoppingCart ». Nous pourrions modifier le modèle afin de pouvoir utiliser ce nom pour l’implémentation de notre panier d’achat ou l’étendre en fonction de nos besoins, mais nous choisirons plutôt de sélectionner simplement un nom qui évitera le conflit.

Il est également important de noter que nous allons créer un panier d’achat simple et incorporer la logique du panier d’achat avec l’affichage du panier d’achat. Nous pouvons également choisir d’implémenter notre panier d’achat dans une couche métier complètement distincte.

PrécédentSuivant