Поделиться через


Часть 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, и что мы создали аргумент строки динамического запроса, содержащий идентификатор категории.