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

Джо Стагнер

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

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

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

На нашем сайте master странице мы добавим 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 ID значение EDS_Category_Menu и щелкните "Настроить источник данных".

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

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

Теперь задавайте свойство ID экземпляра элемента управления ListView, размещенного на нашей странице, для ListView_ProductsMenu и активации вспомогательного компонента.

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

<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". Это краткий синтаксис для очень мощной функции.

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

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

НазадВперед