Parte 4: Lista de productos

  • Artículo

por Joe Stagner

Tailspin Spyworks muestra cómo es extraordinariamente simple crear aplicaciones eficaces y escalables para la plataforma .NET. Muestra cómo usar las excelentes características nuevas de ASP.NET 4 para crear una tienda en línea, como compras, desprotección y administración.

En esta serie de tutoriales se detallan todos los pasos realizados para compilar la aplicación de ejemplo Tailspin Spyworks. La parte 4 cubre la lista de productos con el control GridView.

Lista de productos con el control GridView

Vamos a empezar a implementar nuestra página de ProductsList.aspx haciendo clic con el botón derecho en nuestra solución y seleccionando "Agregar" y "Nuevo elemento".

Screenshot that shows where to select New Item.

Elija "Formulario web con página maestra" y escriba un nombre de página de ProductsList.aspx".

Haga clic en “Agregar”.

Screenshot that shows where to click Add.

A continuación, elija la carpeta "Estilos" donde colocamos la página Site.Master y selecciónela en la ventana "Contenido de la carpeta".

Screenshow that shows the contents of the Styles folder.

Haga clic en “Aceptar” para crear la página.

Nuestra base de datos se rellena con datos de producto como se muestra a continuación.

Screenshot that shows the database populated with product data.

Una vez creada nuestra página, volveremos a usar un origen de datos de entidad para acceder a los datos del producto, pero en esta instancia es necesario seleccionar las entidades de producto y es necesario restringir los elementos que se devuelven solo a los de la categoría seleccionada.

Para ello, se indicará a EntityDataSource que genere automáticamente la cláusula WHERE y especificaremos WhereParameter.

Recordará que cuando creamos los elementos de menú en nuestro "Menú categoría de producto" compilamos dinámicamente el vínculo agregando categoryID a QueryString para cada vínculo. Se indicará al origen de datos de entidad que derive el parámetro WHERE de ese parámetro 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>

A continuación, configuraremos el control ListView para mostrar una lista de productos. Para crear una experiencia de compra óptima, compactaremos varias características concisas en cada producto concreto mostrado en nuestro ListVew.

  • El nombre del producto será un vínculo a la vista de detalles del producto.
  • Se mostrará el precio del producto.
  • Se mostrará una imagen del producto y seleccionaremos dinámicamente la imagen de un directorio de imágenes de catálogo en nuestra aplicación.
  • Incluiremos un vínculo para agregar inmediatamente el producto específico al carro de la compra.

Este es el marcado de nuestra instancia de control 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>

Estamos creando dinámicamente varios vínculos para cada producto mostrado.

Además, antes de probar la página nueva, es necesario crear la estructura de directorios para las imágenes del catálogo de productos como se indica a continuación.

Screenshot that shows the directory structure.

Una vez accesibles nuestras imágenes de producto, podemos probar nuestra página de lista de productos.

Screenshot that shows the product list page.

En la página principal del sitio, haga clic en uno de los vínculos de lista de categorías.

Screenshot that shows the Category List links.

Ahora es necesario implementar la página ProductDetails.aspx y la funcionalidad AddToCart.

Use Nuevo> del archivo para crear un nombre de página ProductDetails.aspx con la página maestra del sitio como hicimos anteriormente.

De nuevo usaremos un control EntityDataSource para acceder al registro de producto específico de la base de datos y usaremos un control FormView de ASP.NET para mostrar los datos del producto como se indica a continuación.

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

No se preocupe si el formato le parece un poco extraño. El marcado anterior deja espacio en el diseño de pantalla para un par de características que implementaremos más adelante.

El carro de la compra representará la lógica más compleja en nuestra aplicación. Para empezar, utilice Nuevo > del archivo para crear una página denominada MyShoppingCart.aspx.

Tenga en cuenta que no se debe elegir el nombre ShoppingCart.aspx.

Nuestra base de datos contiene una tabla denominada "ShoppingCart". Cuando se generó un modelo de datos de entidad, se creó una clase para cada tabla de la base de datos. Por lo tanto, el modelo de datos de entidad generó una clase de entidad denominada "ShoppingCart". Podríamos editar el modelo para que podamos usar ese nombre para la implementación del carro de la compra o ampliarlo para nuestras necesidades, pero optaremos por seleccionar simplemente un nombre que evitará el conflicto.

También merece la pena señalar que vamos a crear un carro de la compra sencillo e insertar la lógica del carro de la compra con la pantalla del carro de la compra. También podemos optar por implementar nuestro carro de la compra en una capa de negocio completamente independiente.

AnteriorSiguiente