Część 3. Układ i menu kategorii

Jan Stagner

Tailspin Spyworks ilustruje, w jaki sposób bardzo jest prosta, aby tworzyć zaawansowane, skalowalne aplikacje dla platformy .NET. W tym artykule przedstawiono sposób korzystania z doskonałych nowych funkcji w programie ASP.NET 4 do tworzenia sklepu online, w tym zakupów, wyewidencjonowywania i administrowania.

Ta seria samouczków zawiera szczegółowe informacje na temat wszystkich kroków podjętych w celu skompilowania przykładowej aplikacji Tailspin Spyworks. Część 3 dotyczy dodawania układu i menu kategorii.

Dodawanie niektórych układów i menu kategorii

Na naszej stronie wzorcowej witryny dodamy blok DIV dla kolumny po lewej stronie, która będzie zawierać menu kategorii produktów.

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

Należy zauważyć, że odpowiednie wyrównanie i inne formatowanie będzie zapewnione przez klasę CSS dodaną do naszego pliku 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%;
}

Menu Kategoria produktu zostanie dynamicznie utworzone w środowisku uruchomieniowym przez wykonanie zapytania dotyczącego bazy danych commerce dla istniejących kategorii produktów i utworzenie elementów menu i odpowiednich linków.

Aby to osiągnąć, użyjemy dwóch z ASP. Zaawansowane kontrolki danych sieci. Kontrolka "Źródło danych jednostki" i kontrolka "ListView".

Przełączmy na "Widok projektu" i użyj pomocników, aby skonfigurować nasze kontrolki.

Skonfigurujmy Właściwość Identyfikator obiektu EntityDataSource do menu EDS_kategorii_i kliknij pozycję "Konfiguruj źródło danych".

Wybierz połączenie CommerceEntities, które zostało utworzone dla nas po utworzeniu modelu źródła danych jednostki dla bazy danych firmy Commerce i kliknij przycisk "dalej".

Wybierz nazwę zestawu jednostek "Kategorie" i pozostaw pozostałe opcje jako domyślne. Kliknij przycisk "Zakończ".

Teraz Skonfigurujmy Właściwość ID instancji formantu ListView, która została umieszczona na naszej stronie w celu udostępnienia elementu ListView_ProductsMenu i aktywowania pomocnika.

Mimo że możemy użyć opcji kontroli do formatowania wyświetlania i formatowania elementów danych, nasze polecenie tworzenia menu będzie wymagało tylko prostego znacznika, więc w widoku źródła wprowadzimy kod.

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

Zanotuj instrukcję "eval": <% # eval ("CategoryName")%>

Składnia ASP.NET <% #%> jest konwencją skróconą, która instruuje środowisko uruchomieniowe, aby wykonać dowolne, które jest zawarte w i wyprowadza wyniki "w wierszu".

Instrukcja eval ("CategoryName") instruuje, że dla bieżącego wpisu w powiązanej kolekcji elementów danych Pobierz wartość elementów modelu jednostki "CategoryName". Jest to zwięzła składnia dla bardzo zaawansowanej funkcji.

Umożliwia uruchomienie aplikacji teraz.

Należy zauważyć, że nasze menu Kategoria produktu jest teraz wyświetlane, a po umieszczeniu wskaźnika myszy nad jednym z elementów menu Kategoria zobaczysz, że na stronie nie ma jeszcze zaimplementowanej wartości Nazwa ProductsList. aspx i że został skompilowany argument ciągu zapytania dynamicznego zawierający Identyfikator kategorii.