Teil 3: Menü "Layout" und "Kategorie"

von Joe Stagner

Tailspin Spyworks zeigt, wie außerordentlich einfach es ist, leistungsstarke, skalierbare Anwendungen für die .NET-Plattform zu erstellen. Es zeigt, wie Sie die großartigen neuen Features in ASP.NET 4 verwenden, um einen Online-Shop zu erstellen, einschließlich Shopping, Checkout und Verwaltung.

In dieser Lernprogrammreihe werden alle Schritte zum Erstellen der Tailspin Spyworks-Beispielanwendung beschrieben. Teil 3 behandelt das Hinzufügen des Layouts und eines Kategoriemenüs.

Hinzufügen eines Layouts und eines Kategoriemenüs

Auf unserer Masterseite fügen wir ein div-Element für die linke Spalte hinzu, die unser Produktkategoriemenü enthält.

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

Beachten Sie, dass die gewünschte Ausrichtung und andere Formatierungen von der CSS-Klasse bereitgestellt werden, die wir unserer Style.css Datei hinzugefügt haben.

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

Das Menü der Produktkategorie wird zur Laufzeit dynamisch erstellt, indem die Commerce-Datenbank nach vorhandenen Produktkategorien abgefragt und die Menüelemente sowie die entsprechenden Links erstellt werden.

Dazu verwenden wir zwei leistungsstarke Datensteuerelemente von ASP.NET. Das Steuerelement "Entitätsdatenquelle" und das Steuerelement "ListView".

Wechseln wir zu "Entwurfsansicht" und verwenden die Hilfsprogramme, um unsere Steuerelemente zu konfigurieren.

Legen wir die EntityDataSource ID-Eigenschaft auf EDS_Category_Menu fest, und klicken Sie auf "Datenquelle konfigurieren".

Wählen Sie die CommerceEntities-Verbindung aus, die für uns erstellt wurde, als wir das Entity Data Source Model für unsere Commerce-Datenbank erstellt haben, und klicken Sie auf "Weiter".

Wählen Sie den Namen des Entitätssatzes "Kategorien" aus, und lassen Sie die restlichen Optionen als Standard. Klicken Sie auf "Fertig stellen".

Jetzt legen wir die ID-Eigenschaft der ListView-Steuerelementinstanz fest, die wir auf unserer Seite platziert haben, um ListView_ProductsMenu und dessen Hilfsprogramm zu aktivieren.

Obwohl wir Steuerelementoptionen verwenden könnten, um die Anzeige und Formatierung von Datenelementen zu gestalten, erfordert die Menüerstellung nur einfaches Markup. Daher werden wir den Code im Quellansichtsmodus eingeben.

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

Bitte beachten Sie die "Eval"-Anweisung : <%# Eval("CategoryName") %>

Die ASP.NET Syntax <%# %> ist eine Kurzformkonvention, die die Laufzeit anweist, alle darin enthaltenen Elemente auszuführen und die Ergebnisse "in Zeile" auszugeben.

Die Anweisung "Eval("CategoryName") weist an, dass für den aktuellen Eintrag in der gebundenen Sammlung von Datenelementen der Wert des Entitätsmodellelementnamens "CategoryName" abgerufen wird. Dies ist eine präzise Syntax für ein sehr leistungsfähiges Feature.

Lassen Sie uns die Anwendung jetzt ausführen.

Beachten Sie, dass unser Produktkategoriemenü jetzt angezeigt wird. Wenn wir mit dem Mauszeiger über eines der Kategoriemenüelemente fahren, können wir sehen, dass der Link des Menüelements auf eine Seite verweist, die wir noch nicht implementiert haben und die ProductsList.aspx heißt. Außerdem haben wir eine dynamische Abfragezeichenfolge erstellt, die die Kategorie-ID enthält.