Parte 3: menu de layout e categoria

por Joe Stagner

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

Esta série de tutoriais detalha todas as etapas usadas para criar o aplicativo de exemplo Tailspin Spyworks. A parte 3 aborda a adição de layout e um menu de categoria.

Adicionando algum layout e um menu de categoria

Em nossa página mestra do site, adicionaremos uma div à coluna do lado esquerdo que conterá nosso menu de categoria do produto.

<div id="content">
  <div id="rightColumn"></div>
  <div id="mainContent">
    <div id="centerColumn">
       <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div>
  </div>
  <div id="leftColumn">
<!-- Our menu will go here -->       
  </div>
  <div class="clear"></div>
</div>

Observe que o alinhamento desejado e outras formatações serão fornecidas pela classe CSS que adicionamos ao nosso arquivo Style. css.

#leftColumn
{
position: relative;float: left;width: 14em;padding: 2em 1.5em 2em;background: #fff url('images/a1.gif') repeat-y right top;
        top: 1px;
        left: 0px;
        height: 100%;
}

O menu categoria do produto será criado dinamicamente em tempo de execução consultando o banco de dados de comércio para obter categorias de produtos existentes e criando os itens de menu e links correspondentes.

Para fazer isso, usaremos dois do ASP. Os poderosos controles de dados do NET. O controle "fonte de dados de entidade" e o controle "ListView".

Vamos mudar para "modo de exibição de design" e usar os auxiliares para configurar nossos controles.

Vamos definir a propriedade de ID de EntityDataSource para o menu de_de categoria da EDS_e clicar em "Configurar fonte de dados".

Selecione a conexão CommerceEntities que foi criada para nós quando criamos o modelo de fonte de dados de entidade para nosso banco de dado de comércio e clique em "Avançar".

Selecione o nome do conjunto de entidades "categorias" e deixe o restante das opções como padrão. Clique em "Concluir".

Agora, vamos definir a propriedade ID da instância de controle ListView que colocamos em nossa página para ListView_ProductsMenu e ativar seu auxiliar.

Embora possamos usar as opções de controle para formatar a exibição e a formatação do item de dados, nossa criação de menu exigirá apenas marcação simples, portanto, entraremos no código na exibição da fonte.

<asp:ListView ID="ListView_ProductsMenu" runat="server" DataKeyNames="CategoryID" 	DataSourceID="EDS_Category_Menu">
   <EmptyDataTemplate>No Menu Items.</EmptyDataTemplate>
   <ItemSeparatorTemplate></ItemSeparatorTemplate>
   <ItemTemplate>
      <li>
         <a href='<%# VirtualPathUtility.ToAbsolute("~/ProductsList.aspx?CategoryId=" + 
                                Eval("CategoryID")) %>'><%# Eval("CategoryName") %></a>
      </li>
   </ItemTemplate>               
   <LayoutTemplate>
      <ul ID="itemPlaceholderContainer" runat="server">
         <li runat="server" id="itemPlaceholder" />
      </ul>
      <div>
      </div>
   </LayoutTemplate>

Observe a instrução "eval": <% # Eval ("CategoryName")%>

A sintaxe ASP.NET <% #%> é uma convenção abreviada que instrui o tempo de execução para executar o que estiver contido em e gerar os resultados "in line".

A instrução Eval ("CategoryName") instrui isso, para a entrada atual na coleção associada de itens de dados, busque o valor dos nomes de item de modelo de entidade "CategoryName". Essa é uma sintaxe concisa para um recurso muito potente.

Vamos executar o aplicativo agora.

Observe que nosso menu de categoria de produto agora é exibido e, quando passamos o mouse sobre um dos itens de menu de categoria, podemos ver os pontos de link do item de menu para uma página que ainda implementamos ProductList. aspx e criamos um argumento de cadeia de caracteres de consulta dinâmica que contém o ID da categoria.