Часть 3. меню «Макет» и «Категория»

кем Джо Stagner)

В Tailspin Spyworks. демонстрируется, как чрезвычайно прост в создании мощных масштабируемых приложений для платформы .NET. Здесь показано, как использовать замечательные новые функции в ASP.NET 4 для создания Интернет-магазина, включая покупку, оформление и администрирование.

В этой серии руководств подробно описаны все шаги, предпринятые для создания примера приложения Tailspin Spyworks. В части 3 описывается добавление макета и меню категорий.

Добавление макета и меню категорий

На главной странице сайта мы добавим div для столбца с левой стороны, который будет содержать меню нашей категории продуктов.

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

Обратите внимание, что для класса CSS, который мы добавили в файл 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%;
}

Меню категории продуктов будет динамически создано во время выполнения путем запроса к базе данных Commerce для существующих категорий продуктов и создания пунктов меню и соответствующих ссылок.

Для этого мы будем использовать два ASP. Мощные элементы управления данными .NET. Элемент управления "источник данных сущности" и элемент управления "ListView".

Давайте перейдем к «представлению конструктора» и используем для настройки элементов управления вспомогательными командами.

Давайте присвойте свойству идентификатора EntityDataSource значение EDS_категории_меню и щелкните "настроить источник данных".

Выберите подключение Коммерцеентитиес, которое было создано для нас при создании модели источников данных сущностей для нашей базы данных Commerce, и нажмите кнопку "Далее".

Выберите имя набора сущностей "категории" и оставьте остальные параметры по умолчанию. Нажмите кнопку "Готово".

Теперь давайте зададим свойство ID экземпляра элемента управления ListView, который мы поместили на странице в ListView_Продуктсмену и активируйте его вспомогательную функцию.

Несмотря на то, что можно использовать параметры управления для форматирования отображения и форматирования элементов данных, для создания нашего меню потребуется только простая разметка, поэтому мы будем вводить код в представлении исходного кода.

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

Обратите внимание на инструкцию eval: <% # eval ("CategoryName")%>

Синтаксис ASP.NET <% #%> является сокращенным соглашением, которое указывает среде выполнения выполнить все, что содержится в, и выводит результаты "в строке".

Инструкция eval ("CategoryName") указывает, что для текущей записи в привязанной коллекции элементов данных необходимо получить значение имен элементов модели сущности "CategoryName". Это краткий синтаксис для очень мощной функции.

Теперь можно запустить приложение.

Обратите внимание, что теперь меню «Категория продукта» отображается, а при наведении указателя мыши на один из пунктов меню «Категория» ссылка на пункт меню будет указывать на страницу, которой мы еще не реализовали с именем Продуктслист. aspx и что мы создали динамический аргумент строки запроса, содержащий Идентификатор категории.