Tailspin Spyworks指南第三讲：布局和类别菜单

Part 3: Layout and Category Menu

第三部分：布局和类别菜单

By  Joe Stagner |July 21, 2010

Translated By   litdwg  |March 12,2014

Print

Tailspin Spyworks demonstrates how extraordinarily simple it is to create powerful, scalable applications for the .NET platform. It shows off how to use the great new features in ASP.NET 4 to build an online store, including shopping, checkout, and administration.

通过Tailspin Spyworks 演示在.NET平台创建功能强大，结构良好的应用程序有多么简单。演示如何使用ASP.NET 4的新特性创建一个包含购物、结算和管理功能的在线网店。

This tutorial series details all of the steps taken to build the Tailspin Spyworks sample application.  Part 3 covers adding layout and a category menu.

本系列指南对构建案例程序的每一步做了详细的解释。第三部分讲述添加布局和类别菜单。  

添加布局和类别菜单

 

In our site master page we'll add a div for the left side column that will contain our product category menu.

在Master页面，添加一个div，此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>

Note that the desired aligning and other formatting will be provided by the CSS class that we added to our Style.css file.

请注意：此div的显示效果是由之前添加的Sytle.css中的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%;
}

The product category menu will be dynamically created at runtime by querying the Commerce database for existing product categories and creating the menu items and corresponding links.

商品类别的菜单是动态创建的，在运行时从数据库中读取，创建菜单项和相应的链接。

To accomplish this we will use two of ASP.NET's powerful data controls. The "Entity Data Source" control and the "ListView" control.

我们是由强大的数据控件"Entity Data Source" 和"ListView" 实现此功能。

Let's switch to "Design View" and use the helpers to configure our controls.

切换到”设计视图“使用设计前配置这些控件。

Let's set the EntityDataSource ID property to EDS_Category_Menu and click on "Configure Data Source".

设置EntityDataSource的ID属性为EDS_Category_Menu，然后点击”配置数据源“。

Select the CommerceEntities Connection that was created for us when we created the Entity Data Source Model for our Commerce Database and click "Next".

选择之前创建的数据库链接，并点击”下一步“。

Select the "Categories" Entity set name and leave the rest of the options as default. Click "Finish".

在实体集名称处选择”类别“，其它保持默认设置，点击”完成“。

Now let's set the ID property of the ListView control instance that we placed on our page to ListView_ProductsMenu and activate its helper.

将ListView控件的ID属性设置为ListView_ProductsMenu，打开它的设计器。

Though we could use control options to format the data item display and formatting, our menu creation will only require simple markup so we will enter the code in the source view.

我们可以使用控件选项累定义数据项的显示格式，但我们只需要一些简单的标记即可，因此直接在代码视图输入这些代码。

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

Please note the "Eval" statement : <%# Eval("CategoryName") %>

请注意”Eval“语句：<%# Eval("CategoryName") %>

The ASP.NET syntax <%# %> is a shorthand convention that instructs the runtime to execute whatever is contained within and output the results "in Line".

<%# %> 语法表明其中的内容需要在运行时执行并将运行结果输出到此位置。

The statement Eval("CategoryName") instructs that, for the current entry in the bound collection of data items, fetch the value of the Entity Model item names "CatagoryName". This is concise syntax for a very powerful feature.

 Eval("CategoryName")语句意思是在数据项集合中的当前项（当前记录）中和“CatagoryName”匹配的值。

Lets run the application now.

运行程序，结果如下图。

Note that our product category menu is now displayed and when we hover over one of the category menu items we can see the menu item link points to a page we have yet to implement named ProductsList.aspx and that we have built a dynamic query string argument that contains the category id.

注意产品类别菜单已经创建，当鼠标指向某类别，将看到相应的链接，该链接包含一个值为此类别ID值得参数，指向ProductsList.aspx页面（此页面随后将实现）。