asp.net/wingtip/显示数据和详细信息

　　前边我们的工作处于wingtip工程基础建设阶段，先是建立了“数据访问层”，然后设计建设了“UI和导航”的框架，接下来要充实工程的内容，显示“数据和详细信息”。

 

---

一. 添加数据控件(Data Control)

---

　　这里的数据控件是用以显示产品内容的。

　　在asp.net中有几种方法可以绑定数据：

　　　　1.使用数据源控件(Data Source Control)

　　　　　　数据源控件使得程序可以直接访问到数据，基本的逻辑不需要自行编程，按官方提供的轮子，用就对了。

　　　　2.手动编写代码(Code-By-Hand)

　　　　　　顾名思义，手动编写代码完成各种操作，比如：读取、检查、转换、使用数据等等。在需要完全控制程序行为的时候，采取手动编码。

　　　　3.使用模型绑定(Model Binding)

 　　　　　　这个我还不是很懂...感觉和数据源控件差不多....msdn官方文档是这么写的：

　　　　　　　　“Using model binding allows you to bind results using far less code and gives

　　　　　　　　 you the ability to reuse the functionality throughout your application. Model binding aims

　　　　　　　　 to simplify working with code-focused data-access logic while still retaining

　　　　　　　　 the benefits of a rich, data-binding framework."

　　　　　　不翻译了，因为翻译了我也觉得跟数据源控件差不多...

---

二. 显示产品

---

 2.1 前端页面

　　在这个项目里的产品显示环节，采用了模型绑定(Model Binding)的方式。如果想让数据控件(Data Control)能够实现模型绑定的方法，就需要设置控件中的SelectMethod属性，将之设为页面代码的方法。数据控件会在页面生命周期中的适当时期调用SelectMethod的方法。

　　下面对ProductList.aspx页面进行模型绑定(Model Binding)，以便显示产品：

<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <section>
        <div>
            <hgroup>
                <h2><%: Page.Title %></h2>
            </hgroup>

            <asp:ListView ID="productList" runat="server" 
                DataKeyNames="ProductID" GroupItemCount="4"
                ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                <EmptyDataTemplate>
                    <table >
                        <tr>
                            <td>No data was returned.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <EmptyItemTemplate>
                    <td/>
                </EmptyItemTemplate>
                <GroupTemplate>
                    <tr id="itemPlaceholderContainer" runat="server">
                        <td id="itemPlaceholder" runat="server"></td>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td runat="server">
                        <table>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                            width="100" height="75" style="border: solid" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <span>
                                            <%#:Item.ProductName%>
                                        </span>
                                    </a>
                                    <br />
                                    <span>
                                        <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                    </span>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                        </p>
                    </td>
                </ItemTemplate>
                <LayoutTemplate>
                    <table style="width:100%;">
                        <tbody>
                            <tr>
                                <td>
                                    <table id="groupPlaceholderContainer" runat="server" style="width:100%">
                                        <tr id="groupPlaceholder"></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr></tr>
                        </tbody>
                    </table>
                </LayoutTemplate>
            </asp:ListView>
        </div>
    </section>
</asp:Content>

　　这里用ListView控件：

<asp:ListView ID="productList" runat="server" 
                DataKeyNames="ProductID" GroupItemCount="4"
                ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">

 　   可以看到，SelectMethod="GetProducts"，这是在后台设计编写的方法，稍后介绍。

　　ListView使用我们自己定义的模板(Template)和样式(Style)来显示各个产品。因为把控件中的属性ItemType设置为了"WingtipToys.Models.Product"，所以<%#:Item.***%>中的Item就是Product类型的了，"."后可以自动提示该类下的各个字段。

 2.2 添加代码以显示产品

　　在这个项目中有很多种类的玩具，比如车、火箭、飞机等等，现在要实现点击某个类别后跳转到该类别下的商品显示页面。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;

namespace WingtipToys
{
    public partial class ProductList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId)
        {
            var _db = new WingtipToys.Models.ProductContext();
                IQueryable<Product> query = _db.Products;
                if (categoryId.HasValue && categoryId > 0)
                {
                    query = query.Where(p => p.CategoryID == categoryId);
                }
                return query;
        }
    }
}

　　GetProduct方法中的参数是"[QueryString("id")] int? categoryId“，通过queryString查询出来的id被赋值给categoryId，然后数据库再通过这个categoryId去查询对应类别的商品数据。QueryStringAttribute类来自于System.Web.ModelBinding命名空间，该类用于检索查询字符串变量 id 的值。这会在"模型绑定"方法(model binding)在运行的时候，告诉它要把QueryString方法查询到的字符串数据绑定给categoryId这个参数。

---

三. 运行wingtip应用程序

---

 　　程序运行起来会显示一行字符形式的链接，分别是cars、planes、trucks等产品类别，选择一个类别点进去，会看到当前页面只显示该类下的全部产品。

---

四. 显示产品的详细信息

---