Parte 4: Listagem de produtos

  • Artigo

por Joe Stagner

A Tailspin Spyworks demonstra como é extraordinariamente simples criar aplicativos avançados e escalonáveis para a plataforma .NET. Ele mostra como usar os ótimos novos recursos no ASP.NET 4 para criar uma loja online, incluindo compras, check-out e administração.

Esta série de tutoriais detalha todas as etapas executadas para criar o aplicativo de exemplo Tailspin Spyworks. A parte 4 aborda a listagem de produtos com o controle GridView.

Listando produtos com o controle GridView

Vamos começar a implementar nossa página ProductsList.aspx clicando com o botão direito do mouse em nossa solução e selecionando "Adicionar" e "Novo Item".

Captura de tela que mostra onde selecionar Novo Item.

Escolha "Formulário web usando página mestra" e insira um nome de página de ProductsList.aspx".

Clique em "Adicionar".

Captura de tela que mostra onde clicar em Adicionar.

Em seguida, escolha a pasta "Estilos", na qual colocamos a página Site.Mestre e a selecionamos na janela "Conteúdo da pasta".

Exibição de tela que mostra o conteúdo da pasta Estilos.

Clique em "Ok" para criar a página.

Nosso banco de dados é preenchido com dados do produto, conforme visto abaixo.

Captura de tela que mostra o banco de dados preenchido com dados do produto.

Depois que nossa página for criada, usaremos novamente uma Fonte de Dados de Entidade para acessar esses dados do produto, mas, nesta instância, precisamos selecionar as Entidades do Produto e precisamos restringir os itens que são retornados apenas para aqueles para a Categoria selecionada.

Para fazer isso, informaremos o EntityDataSource para Gerar automaticamente a cláusula WHERE e especificaremos o WhereParameter.

Você lembrará que, quando criamos os Itens de Menu em nosso "Menu Categoria do Produto", criamos dinamicamente o link adicionando o CategoryID ao QueryString para cada link. Informaremos a Fonte de Dados da Entidade para derivar o parâmetro WHERE desse 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>

Em seguida, configuraremos o controle ListView para exibir uma lista de produtos. Para criar uma experiência de compra ideal, compactaremos vários recursos concisos em cada produto individual exibido em nossa ListVew.

  • O nome do produto será um link para a exibição de detalhes do produto.
  • O preço do produto será exibido.
  • Uma imagem do produto será exibida e selecionaremos dinamicamente a imagem em um diretório de imagens de catálogo em nosso aplicativo.
  • Incluiremos um link para adicionar imediatamente o produto específico ao carrinho de compras.

Aqui está a marcação para nossa instância de controle 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 criando dinamicamente vários links para cada produto exibido.

Além disso, antes de testarmos a própria nova página, precisamos criar a estrutura de diretório para as imagens do catálogo de produtos da seguinte maneira.

Captura de tela que mostra a estrutura do diretório.

Depois que nossas imagens de produto estiverem acessíveis, poderemos testar nossa página de lista de produtos.

Captura de tela que mostra a página de lista de produtos.

Na home page do site, clique em um dos Links de Lista de Categorias.

Captura de tela que mostra os links da Lista de Categorias.

Agora precisamos implementar a página ProductDetails.aspx e a funcionalidade AddToCart.

Use File-New> para criar um nome de página ProductDetails.aspx usando a Página Mestra do site como fizemos anteriormente.

Usaremos novamente um controle EntityDataSource para acessar o registro de produto específico no banco de dados e usaremos um controle ASP.NET FormView para exibir os dados do produto da seguinte maneira.

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

Não se preocupe se a formatação parecer um pouco engraçada para você. A marcação acima deixa espaço no layout de exibição para alguns recursos que implementaremos posteriormente.

O Carrinho de Compras representará a lógica mais complexa em nosso aplicativo. Para começar, use File-New> para criar uma página chamada MyShoppingCart.aspx.

Observe que não estamos escolhendo o nome ShoppingCart.aspx.

Nosso banco de dados contém uma tabela chamada "ShoppingCart". Quando geramos um Modelo de Dados de Entidade, uma classe foi criada para cada tabela no banco de dados. Portanto, o Modelo de Dados de Entidade gerou uma Classe de Entidade chamada "ShoppingCart". Poderíamos editar o modelo para que pudéssemos usar esse nome para nossa implementação de carrinho de compras ou estendê-lo para nossas necessidades, mas optaremos por simplesmente selecionar um nome que evitará o conflito.

Também vale a pena notar que criaremos um carrinho de compras simples e inseriremos a lógica do carrinho de compras com a exibição do carrinho de compras. Também podemos optar por implementar nosso carrinho de compras em uma Camada de Negócios completamente separada.

AnteriorAvançar