Parte 3: Diseño y menú Categoría

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 3 trata sobre cómo agregar un diseño y un menú de categorías.

Agregar un diseño y un menú de categorías

En nuestra página maestra del sitio vamos a añadir un div para la columna lateral izquierda que contendrá nuestro menú de categorías de productos.

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

Tenga en cuenta que la clase CSS que hemos agregado al archivo Style.css proporcionará la alineación deseada y otros formatos.

#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%;
}

El menú de categorías de productos se creará dinámicamente en runtime consultando la base de datos de Comercio en busca de categorías de productos existentes y creando los elementos del menú y los vínculos correspondientes.

Para ello, usaremos dos de los potentes controles de datos de ASP.NET. El control "Origen de datos de entidad" y el control " ListView".

Cambiemos a la "Vista de diseño" y usemos los asistentes para configurar nuestros controles.

Establezcamos la propiedad de id. EntityDataSource en EDS_Category_Menu y hagamos clic en "Configurar origen de datos".

Seleccione la conexión CommerceEntities que se creó para nosotros al crear el modelo de origen de datos de entidad para nuestra base de datos comercial y haga clic en "Siguiente".

Seleccione el nombre del conjunto de entidades "Categorías" y deje el resto de las opciones como valor predeterminado. Haga clic en "Finalizar".

Ahora vamos a establecer la propiedad ID de la instancia del control ListView que hemos colocado en nuestra página a ListView_ProductsMenu y activar su asistente.

Aunque podríamos usar opciones de control para dar formato a la visualización y formato del elemento de datos, la creación del menú solo requerirá marcado simple, por lo que escribiremos el código en la vista de origen.

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

Tenga en cuenta la instrucción "Eval": <%# Eval("CategoryName") %>

La sintaxis <%# %> de ASP.NET es una convención abreviada que indica al runtime que ejecute lo que contenga y emita los resultados "en línea".

La instrucción Eval("CategoryName") indica que, para la entrada actual de la colección enlazada de elementos de datos, se capture el valor de los nombres de elemento del modelo de entidad "CategoryName". Esta es una sintaxis concisa para una característica muy eficaz.

Ahora vamos a ejecutar la aplicación.

Tenga en cuenta que nuestro menú de categorías de productos se muestra ahora y cuando pasamos el ratón por encima de uno de los elementos del menú de categorías podemos ver que el vínculo del elemento del menú apunta a una página que aún tenemos que implementar denominada ProductsList.aspx y que hemos creado un argumento de cadena de consulta dinámica que contiene el id de la categoría.

AnteriorSiguiente