Parte 3: Layout e menu per la categoria

di Joe Stagner

Tailspin Spyworks dimostra quanto sia straordinariamente semplice creare applicazioni potenti e scalabili per la piattaforma .NET. Mostra come usare le nuove funzionalità di ASP.NET 4 per creare un negozio online, tra cui shopping, checkout e amministrazione.

Questa serie di esercitazioni illustra in dettaglio tutti i passaggi eseguiti per compilare l'applicazione di esempio Tailspin Spyworks. La parte 3 illustra l'aggiunta di layout e un menu categoria.

Aggiunta di un layout e di un menu categoria

Nella pagina master del sito verrà aggiunto un div per la colonna laterale sinistra che conterrà il menu categoria di prodotti.

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

Si noti che l'allineamento desiderato e altre formattazioni verranno fornite dalla classe CSS aggiunta al file 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%;
}

Il menu categoria di prodotti verrà creato in modo dinamico in fase di esecuzione eseguendo query sul database Commerce per le categorie di prodotti esistenti e creando le voci di menu e i collegamenti corrispondenti.

A questo scopo si useranno due di ASP. Controlli dati avanzati di NET. Controllo "Origine dati entità" e controllo "ListView".

Passare a "Visualizzazione progettazione" e usare gli helper per configurare i controlli.

Impostare la proprietà EntityDataSource ID su EDS_Category_Menu e fare clic su "Configura origine dati".

Selezionare la connessione CommerceEntities creata per noi quando è stato creato il modello di origine dati entità per il database commerciale e fare clic su "Avanti".

Selezionare il nome del set di entità "Categorie" e lasciare il resto delle opzioni come predefinito. Fare clic su "Fine".

Impostare ora la proprietà ID dell'istanza del controllo ListView inserita nella pagina su ListView_ProductsMenu e attivare il relativo helper.

Anche se è possibile usare le opzioni di controllo per formattare la visualizzazione e la formattazione dell'elemento di dati, la creazione del menu richiederà solo markup semplice in modo da immettere il codice nella visualizzazione origine.

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

Si noti l'istruzione "Eval" : <%# Eval("CategoryName") %>

La sintassi <ASP.NET %# %> è una convenzione a breve che indica al runtime di eseguire qualsiasi cosa contenuta all'interno e restituire i risultati "in Riga".

L'istruzione Eval("CategoryName") indica che, per la voce corrente nella raccolta associata di elementi di dati, recuperare il valore dei nomi dell'elemento Entity Model "CategoryName". Questa è sintassi concisa per una funzionalità molto potente.

Consente di eseguire l'applicazione ora.

Si noti che il menu categoria di prodotti viene ora visualizzato e quando si passa il puntatore del mouse su una delle voci di menu è possibile visualizzare i punti di collegamento della voce di menu a una pagina che è ancora necessario implementare il nome ProductsList.aspx e che è stato creato un argomento stringa di query dinamica contenente l'ID categoria.

IndietroAvanti