ASP.NET MVC功能详解 变身数据展示达人

　　作为Web开发者，我们经常面对的任务就是将数据通过表格展现给用户。最简单的情景是比如仅将顾客的订单显示出来。然而，更多的数据表格将提供比如排序，分页等更多的丰富的功能。

　　在ASP.NET的web表单中，GridView控件提供了一种快速简便的方法显示网格中的记录集，并提供像排序、分页、编辑及删除的功能，所有的这些只需写少量的代码就可以实现。在页面加载时，GridView自动HTML中的table标记，让你不需要写任何标签,以及不用去考虑如何显示和将数据绑定到GridView控件。在ASP.NET MVC应用中，由于是使用了MVC模式，这对于那些刚接触ASP.NET MVC的新手来说有点挑战，特别是那些已经熟悉了传统的ASP.NET开发的人来说。

　　这是一个讲解如何在ASP.NET MVC应用中使用数据控件的系列文章。在该系列文章中，我们首先学习到如何创建ASP.NET MVC应用程序及如何访问数据库。接着是如何在一个简单的表格控件中展示数据记录。最后将会探究如何实现更丰富功能的数据功能，比如排序，分页，过滤以及客户端的脚本功能加强。我们同时也会探究一些目前比较流行的表格控件，比如MvcContrib项目和基于Javascript的表格项目jqGrid。本文将首先指导如何创建一个ASP.NET MVC程序以及如何将数据库中的数据呈现到表格中去。

　　步骤1 创建ASP.NET MVC项目

　　ASP.NET MVC是微软根据著名的MVC设计模式而专门为ASP.NET开发而实现的一个框架。从本质上说，它允许开发者在网页中使用更强大的控件，并使得程序开发者和页面开发者能更专注于自身领域的开发,使的程序更容易测试，更容易实现SEO。ASP.NET MVC框架最早是在Visual Studio 2008和ASP.NET 3.5 sp1时提出来的。在.NET 4中，ASP.NET MVC已经是作为其中的一个重要组成部分了，如果使用Visual Studio 2010的话，就不需要另外下再ASP.NET MVC框架了。

　　下面我们开始建立一个新的ASP.NET MVC应用。首先启动Visual Studio 2010,选择文件—新项目。选择C#语言，并且选择建立一个ASP.NET MVC2 空Web应用程序，将项目命名为GridDemosMVC，之后按确定完成，如下图：

▲

　　 一个新的空的ASP.NET MVC2 应用的目录结构如下：

　　Content -这个目录存放的是静态的页面内容，比如CSS文件，图片等。

　　 Controllers -这个目录存放的是应用的控制器及相关文件。在MVC模式中，控制层负责处理用户的请求并选择模型和产生返回的视图。控制器是以类的形式实现的，其中的方法被称为actions,当以约定的URL形式访问控制器时，这些actions方法就会被调用。

　　 Models - 这个目录存放的是实体模型文件。

　　 Scripts -这个目录存放的是包括jQuery和微软的ASP.NET Ajax库的相关Javascript文件。

　　 Views - 这个目录包含了视图层的文件。视图通常包括HTML、Javascript文件和服务端产生的文件。不象传统的ASP.NET Web应用中服务端代码和页面文件是混在一起的(或者代码是单独以code-behind的方式存放),在ASP.NET MVC中，视图层的文件不应该包含业务逻辑代码。

　　 Global.asax –这个文件其实是ASP.NET MVC中一个重要的核心文件。 ASP.NET MVC中广泛使用了ASP.NET的的URL路由选择功能(有关介绍参考: http://www.4guysfromrolla.com/articles/012710-1.aspx一文)。ASP.NET MVC 框架中设定了一个默认的URL路由规则如下: {controller}/{action}/{id},当用户比如以www.yoursite.com/Categories/View/Beverages,访问时，ASP.NET会默认执行名为CategoriesContriller这个控制器的其中的view这个方法，并且将Beverages作为id传进去。

　　步骤2 增加Northwind数据库支持和创建Linq-TO-SQL类

　　在我们开始设计控制器和页面视图前，我们先设置好数据库，本文将以Northwind数据库作为示例，其中的数据库文件在本文的附件中可以下载。在项目中，建立一个App_Data文件夹，将附件中的northwnd.mdf和northwnd.ldf放进去。

　　现在可以开始从数据库中读取数据了，本文中采用的是Linq-to-SQL的方法。它是一种微软设计的ORM对象关系映射工具。之所以选择它，是因为它可能是最快最简便的ORM工具了。实际上，Linq-to-SQL在我们的项目工程中增加了相关的文件，指定我们要访问的数据库或表，接着它创建一个叫DataContext的类，这个类用来更新及从数据库中获取数据。Linq-to-sql允许我们使用简洁的可读性强的代码去操作数据库，这使得我们可以暂时不用去浪费时间在编写底层的SQL代码的编写上。我们推荐阅读Scott Guthire编写的关于Linq-SQL的教程<( http://scottonwriting.net/sowblog/archive/2010/07/27/links-to-scott-guthrie-s-using-linq-to-sql-tutorials.aspx)。

　　首先，我们鼠标右击Models文件夹，选择新增文件，从对话框中，选择Linq to SQl的类模版，并将其命名为Northwind.dbml,就会创建一个新文件，打开后，可以在Linq-to-SQL设计器中看到。具体步骤见如下图：

　　接下来，转到服务资源管理器中，展开northwnd.mdf这个文件，拖拉其表分类下的Categories和Products两个表到设计器中去，并且保存，要做的工作就是这么多，这时系统已经自动为我们构建了数据访问层了。

　　步骤3 为项目增加必要的文件

　　此外，我们要将文中附件解压缩后，将其中的一些文件复制到项目工程中，因为这些是我们项目中要用到的一些资源文件。首先将附件中的工程的rContent目录下的所有内容复制到当前项目的Content目录下，并把附件工程中的Views/Shared目录复制到当前项目中的相同目录中去。注意的是并不需要复制其他文件到当前项目中去，因为其他文件是在今后的教程中有用到的。

　　步骤4 增加ProductsController控制器

　　对于本文，所有的数据展示都是通过一个简单的控制器ProductsController去实现，其中所有的用户请求都会被派发到Products控制器中的Index.action去处理，即比如用户通过URL http://www.yoursite.com/Products/Index，或者www.yoursite.com/Products(因为Index是默认访问的action名,可以省略)，同样象排序或者分页的功能，访问的形式是www.yoursite.com/Products/Sortable和www.yoursite.com/Products/Paged.

　　创建控制器时，在Controllers文件夹中右击，在弹出的菜单中选择新增—控制器ji 即可，将控制器命名为ProductsController，这样将创建一个ProductsController的类和一个Index的方法。

　　当用户访问www.yoursite.com/Products/Index时，我们希望显示产品的名称，分类、数量、单价和折扣。因此我们需要使用NorthwindDataContext这个辅助类，它是由Linq-to-SQL工具自动产生的一个类，辅助我们对数据库的存取。因为我们要在控制器的所有action方法中都要用到这个辅助类，因此可以增加一个叫DataContext的属性去返回这个类的实例。此外，这个属性将对NorthwindDataContext实例进行一些属性的设置，以实现在加载产品的时候同步加载产品所属的目录(注意：Linq-to-SQL默认是使用延迟加载的，所谓的延迟加载，就是比如我们在显示每个产品的时候，并不希望ORM框架同步加载产品所属的分类，因为同步加载的话当数据量大的时候是会很耗费资源的)。代码实现如下：

   
   
   
   

    
    
    
    
    public
    
    
    
     
    
    
    
    class
    
    
    
     ProductsController : Controller
　　{ 
    
    
    
    private
    
    
    
     NorthwindDataContext _DataContext 
    
    
    
    =
    
    
    
     
    
    
    
    null
    
    
    
    ;
　　
    
    
    
    protected
    
    
    
     NorthwindDataContext DataContext
　　{ 
    
    
    
    get
    
    
    
    
　　{ 
    
    
    
    if
    
    
    
     (_DataContext 
    
    
    
    ==
    
    
    
     
    
    
    
    null
    
    
    
    )
　　_DataContext
    
    
    
    =
    
    
    
     
    
    
    
    new
    
    
    
     NorthwindDataContext(); 
    
    
    
    //
    
    
    
     Eager load Category info

    
    
    
     
    
    
    
    　　var options
    
    
    
    =
    
    
    
     
    
    
    
    new
    
    
    
     DataLoadOptions();
　　options.LoadWith(p
    
    
    
    =
    
    
    
     p.Category);
　　_DataContext.LoadOptions
    
    
    
    =
    
    
    
     options;
　　
    
    
    
    return
    
    
    
     _DataContext;
　　}
　　} 
    
    
    
    //
    
    
    
     GET: /Products/
    
    
    
     
    
    
    
    public
    
    
    
     ActionResult Index()
　　{
　　
    
    
    
    return
    
    
    
     View();
　　}
　　}
   
   
   
   

　　控制器实际的工作是两件事：接受用户的请求，访问数据库并将返回的数据决定用什么视图去返回给用户。我们这里仅是简单去对实体模型Product进行ORM操作，因此只需要如下代码就可以访问数据库的Product表了：

   
   
   
   

    
    
    
    
    var model 
    
    
    
    =
    
    
    
     
    
    
    
    this
    
    
    
    .DataContext.Products;
   
   
   
   

　　但如何将结果返回给视图呢?控制器有两种方法返回结果给视图：通过弱类型的ViewData集合或使用强类型的视图。我们这里使用的是后一种方法：

   
   
   
   

    
    
    
    
    public
    
    
    
     
    
    
    
    class
    
    
    
     ProductsController : Controller
　　{
　　... 
    
    
    
    //
    
    
    
     GET: /Products/
    
    
    
     
    
    
    
    public
    
    
    
     ActionResult Index()
　　{
　　var model
    
    
    
    =
    
    
    
     
    
    
    
    this
    
    
    
    .DataContext.Products;
　　
    
    
    
    return
    
    
    
     View(model);
　　}
　　}
   
   
   
   

　　看到了么?这里我们直接将model作为参数传递给View层了。

　　步骤 5 创建视图

　　我们将鼠标移到Index 这个方法上，然后右击鼠标，在弹出的菜单中选择“增加视图”,这就会显示如下图的菜单，我们保持视图的名为Index不变，但选择”创建强类型视图”的复选框，并且在下拉框中选择Web.Models.Product作为返回填充的模型类。然后点“选择master模版页”的复选框，选/Views/Shared/Site.Master作为我们的模版页。

　　完成后，会在Views目录下多了一个名为Products的子目录和一个Index.aspx 的文件。打开Index.aspx文件的代码，观察@Page的部分，由于我们是要在页面中获得产品记录的一个集合再呈现出来，因此需要这里修改一下，修改为：

   
   
   
   

    
    
    
    
    <%
    
    
    
    @ Page Title
    
    
    
    =
    
    
    
    ""
    
    
    
     Language
    
    
    
    =
    
    
    
    "
    
    
    
    C#
    
    
    
    "
    
    
    
     MasterPageFile
    
    
    
    =
    
    
    
    "
    
    
    
    ~/Views/Shared/Site.Master
    
    
    
    "
    
    
    
     
Inherits
    
    
    
    =
    
    
    
    "
    
    
    
    System.Web.Mvc.ViewPage
    
    
    
    "
    
    
    
     
    
    
    
    %
   
   
   
   

　　接下来的工作就简单了，我们就设计HTML的表格头，如下所示：

   
   
   
   

    
    
    
    
    <
    
    
    
    table 
    
    
    
    class
    
    
    
    =
    
    
    
    "
    
    
    
    grid
    
    
    
    "
    
    
    
    <
    
    
    
    tr
    
    
    
    <
    
    
    
    th
    
    
    
    Product
    
    
    
    
    
    
    
    th
    
    
    
    <
    
    
    
    th
    
    
    
    Category
    
    
    
    
    
    
    
    th

    
    
    
    <
    
    
    
    th
    
    
    
    Qty
    
    
    
    /
    
    
    
    Unit
    
    
    
    
    
    
    
    th
    
    
    
    <
    
    
    
    th
    
    
    
    Price
    
    
    
    
    
    
    
    th
    
    
    
    <
    
    
    
    th
    
    
    
    Discontinued
    
    
    
    
    
    
    
    th
    
    
    
    
    
    
    
    tr
   
   
   
   

　　接下来就是遍历获得的数据集合了，可以使用foreach去实现。其中注意学习String.Format的用法，它在这里格式化了单价，而对于如果产品没折扣的话则，折扣列不显示任何东西，而如果是有折扣的话则显示一张小图片。最后，我们通过www.yoursite.com/Products 或者www.yoursite.com/Products/Index就可以看到我们简单的从数据库表中展示的数据记录了。

   
   
   
   

    
    
    
    
    <%
    
    
    
     
    
    
    
    foreach
    
    
    
     (var item 
    
    
    
    in
    
    
    
     Model) { 

    
    
    
    %<
    
    
    
    tr
    
    
    
    <
    
    
    
    td 
    
    
    
    class
    
    
    
    =
    
    
    
    "
    
    
    
    left
    
    
    
    "
    
    
    
    <%
    
    
    
    : item.ProductName 
    
    
    
    %
    
    
    
    td
    
    
    
    
<
    
    
    
    td 
    
    
    
    class
    
    
    
    =
    
    
    
    "
    
    
    
    left
    
    
    
    "
    
    
    
    <%
    
    
    
    : item.Category.CategoryName 
    
    
    
    %
    
    
    
    td
    
    
    
    
<
    
    
    
    td 
    
    
    
    class
    
    
    
    =
    
    
    
    "
    
    
    
    left
    
    
    
    "
    
    
    
    <%
    
    
    
    : item.QuantityPerUnit 
    
    
    
    %
    
    
    
    td
    
    
    
    <
    
    
    
    td 
    
    
    
    class
    
    
    
    =
    
    
    
    "
    
    
    
    right
    
    
    
    "
    
    
    
    
<%
    
    
    
    : String.Format(
    
    
    
    "
    
    
    
    {0:C}
    
    
    
    "
    
    
    
    , item.UnitPrice) 
    
    
    
    %
    
    
    
    td
    
    
    
    <
    
    
    
    td
    
    
    
    <%
    
    
    
     

    
    
    
    if
    
    
    
     (item.Discontinued) { 
    
    
    
    %
    
    
    
    <
    
    
    
    img src
    
    
    
    =
    
    
    
    "
    
    
    
    <%=Url.Content(
    
    
    
    "
    
    
    
    ~/
    
    
    
    Content
    
    
    
    /
    
    
    
    cancel.png
    
    
    
    "
    
    
    
    ) %
    
    
    
    "
    
    
    
     
alt
    
    
    
    =
    
    
    
    "
    
    
    
    Discontinued
    
    
    
    "
    
    
    
     title
    
    
    
    =
    
    
    
    "
    
    
    
    Discontinued
    
    
    
    "
    
    
    
     
    
    
    
    /
    
    
    
    <%
    
    
    
     } 
    
    
    
    %
    
    
    
    
    
    
    
    td
    
    
    
    
    
    
    
    tr
    
    
    
    <%
    
    
    
     } 
    
    
    
    %
   
   
   
   

　　在接下来的几讲中，将会教大家如何对表格功能进行优化，比如增加排序，分页，筛选等功能，请密切期待。