Часть 4. Публикация продуктов

  • Статья

Джо Стагнер

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

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

Перечисление продуктов с помощью элемента управления GridView

Давайте начнем реализацию страницы ProductsList.aspx с щелчка правой кнопкой мыши в решении и выбора "Добавить" и "Новый элемент".

Снимок экрана, на котором показано, где выбрать новый элемент.

Выберите "Веб-форма с использованием главной страницы" и введите имя страницы ProductsList.aspx.

Нажмите кнопку "Добавить".

Снимок экрана, на котором показано, где нажать кнопку Добавить.

Затем выберите папку "Стили", в которой мы разместили страницу Site.Master, и выберите ее в окне "Содержимое папки".

Экран, показывающий содержимое папки

Нажмите кнопку "ОК", чтобы создать страницу.

Наша база данных заполнена данными о продуктах, как показано ниже.

Снимок экрана: база данных, заполненная данными о продукте.

После создания страницы мы снова будем использовать источник данных сущности для доступа к данным о продукте, но в этом случае нам нужно выбрать сущности продукта и ограничить возвращаемые элементы только теми, которые относятся к выбранной категории.

Для этого мы сообщаем EntityDataSource автоматически создать предложение WHERE и укажем Параметр WhereParameter.

Вы помните, что при создании пунктов меню в меню категории продуктов мы динамически создавали ссылку, добавляя CategoryID в QueryString для каждой ссылки. Мы накажем источнику данных сущности наследовать параметр WHERE от этого параметра QueryString.

<asp:EntityDataSource ID="EDS_ProductsByCategory" runat="server"  
                      EnableFlattening="False" AutoGenerateWhereClause="True"
                      ConnectionString="name=CommerceEntities"  
                      DefaultContainerName="CommerceEntities" 
                      EntitySetName="Products">
<WhereParameters>
        <asp:QueryStringParameter Name="CategoryID" 
                                        QueryStringField="Category Id" 
                                        Type="Int32" />
       </WhereParameters>
</asp:EntityDataSource>

Далее мы настроим элемент управления ListView для отображения списка продуктов. Чтобы создать оптимальный процесс покупки, мы сведем несколько кратких функций в каждый отдельный продукт, отображаемый в списке ListVew.

  • Название продукта будет ссылкой на представление сведений о продукте.
  • Отобразится цена продукта.
  • Будет отображено изображение продукта, и мы динамически выберем изображение из каталога изображений в нашем приложении.
  • Мы добавим ссылку, чтобы сразу добавить конкретный продукт в корзину.

Ниже приведена разметка для экземпляра элемента управления ListView.

<asp:ListView ID="ListView_Products" runat="server" 
              DataKeyNames="ProductID"  
              DataSourceID="EDS_ProductsByCategory" 
              GroupItemCount="2">
   <EmptyDataTemplate>
      <table runat="server">
        <tr>
          <td>No data was returned.</td>
        </tr>
     </table>
  </EmptyDataTemplate>
  <EmptyItemTemplate>
     <td runat="server" />
  </EmptyItemTemplate>
  <GroupTemplate>
    <tr ID="itemPlaceholderContainer" runat="server">
      <td ID="itemPlaceholder" runat="server"></td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <table border="0" width="300">
        <tr>
          <td>&nbsp</td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
               <image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' 
                      width="100" height="75" border="0">
            </a> &nbsp
          </td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'><span 
               class="ProductListHead"><%# Eval("ModelName") %></span><br>
            </a>
            <span class="ProductListItem">
              <b>Special Price: </b><%# Eval("UnitCost", "{0:c}")%>
            </span><br />
            <a href='AddToCart.aspx?productID=<%# Eval("ProductID") %>'>
               <span class="ProductListItem"><b>Add To Cart<b></font></span>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </ItemTemplate>
  <LayoutTemplate>
    <table runat="server">
      <tr runat="server">
        <td runat="server">
          <table ID="groupPlaceholderContainer" runat="server">
            <tr ID="groupPlaceholder" runat="server"></tr>
          </table>
        </td>
      </tr>
      <tr runat="server"><td runat="server"></td></tr>
    </table>
  </LayoutTemplate>
</asp:ListView>

Мы динамически создаем несколько ссылок для каждого отображаемого продукта.

Кроме того, прежде чем тестировать собственную новую страницу, необходимо создать структуру каталогов для образов каталога продуктов следующим образом.

Снимок экрана: структура каталогов.

Когда образы продуктов становятся доступными, мы можем протестировать страницу списка продуктов.

Снимок экрана: страница со списком продуктов.

На домашней странице сайта щелкните одну из ссылок списка категорий.

Снимок экрана: ссылки на список категорий.

Теперь необходимо реализовать страницу ProductDetails.aspx и функцию AddToCart.

Используйте file-New>, чтобы создать страницу с именем ProductDetails.aspx с помощью главной страницы сайта, как это было ранее.

Мы снова будем использовать элемент управления EntityDataSource для доступа к определенной записи продукта в базе данных, а также ASP.NET элемент управления FormView для отображения данных продукта следующим образом.

<asp:FormView ID="FormView_Product" runat="server" DataKeyNames="ProductID" 
                                                           DataSourceID="EDS_Product">
  <ItemTemplate>
    <div class="ContentHead"><%# Eval("ModelName") %></div><br />
      <table  border="0">
        <tr>
          <td>
            <img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" 
                                                       alt='<%# Eval("ModelName") %>' />
          </td>
          <td><%# Eval("Description") %>
            <br /><br /><br />                  
          </td>
        </tr>
      </table>
      <span class="UnitCost"><b>Your Price:</b> <%# Eval("UnitCost", "{0:c}")%> 
      <br /> 
      <span class="ModelNumber">
        <b>Model Number:</b> <%# Eval("ModelNumber") %>
      </span><br />
      <a href='AddToCart.aspx?ProductID=
        <%# Eval("ProductID") %>'> 
        <img id="Img1" src="~/Styles/Images/add_to_cart.gif" runat="server" 
             alt="" />
      </a>
      <br /><br />      
    </ItemTemplate>
  </asp:FormView>
  <asp:EntityDataSource ID="EDS_Product" runat="server" AutoGenerateWhereClause="True"  
                        EnableFlattening="False" 
                        ConnectionString="name=CommerceEntities" 
                        DefaultContainerName="CommerceEntities" 
                        EntitySetName="Products" 
                        EntityTypeFilter="" 
                        Select="" Where="">
    <WhereParameters>
      <asp:QueryStringParameter Name="ProductID" 
                                QueryStringField="productID"  Type="Int32" />
    </WhereParameters>
  </asp:EntityDataSource>

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

Корзина покупок будет представлять более сложную логику в нашем приложении. Чтобы приступить к работе, создайте страницу MyShoppingCart.aspx с помощью файла> Создать.

Обратите внимание, что мы не выбираем имя ShoppingCart.aspx.

Наша база данных содержит таблицу с именем ShoppingCart. При создании модели данных сущности был создан класс для каждой таблицы в базе данных. Таким образом, модель данных сущности сформировала класс сущности с именем ShoppingCart. Мы могли бы изменить модель, чтобы использовать это имя для реализации корзины для покупок или расширить его для наших потребностей, но вместо этого мы просто выберите имя, которое позволит избежать конфликта.

Также стоит отметить, что мы создадим простую корзину для покупок и встроим логику корзины с отображением корзины. Мы также можем реализовать корзину для покупок в совершенно отдельном бизнес-уровне.

НазадВперед