一起谈.NET技术，ASP.NET MVC 3 Beta初体验之WebGrid 狼人:

　　ASP.NET MVC 3 Beta中除了推出一种新的视图引擎Razor。还推出了几种新的HtmlHelper。我比较关注的是WebGrid，这篇文章将介绍一下WebGrid的使用。WebGrid提供了分页和排序的功能，在此之前在MVC中分页和排序时需要自己去写的。这篇文章将分别介绍在aspx视图引擎和Razor视图引擎中如何使用它。

　　我通过ADO.NET Entity Data Model从NORTHWND的Products中表中取数据。在Controller中取数据：

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            NORTHWNDEntities entity = new NORTHWNDEntities();
            return View( entity.Products.ToList());
        }
     }

　　在aspx视图引擎中使用WebGrid代码如下：

 <div id="grid">
 <% var grid = new WebGrid(source: Model, defaultSort: "ProductName", rowsPerPage: 5); %>
 <%=grid.GetHtml(
     tableStyle: "grid",
     headerStyle: "head",
     alternatingRowStyle: "alt",
     columns: grid.Columns(
               grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),
               grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Employee', '{0}')", item.ProductID), @class = "Delete", href = "JavaScript:void(0)" })),
               grid.Column("ProductName","产品名称"),
               grid.Column("QuantityPerUnit","每单位数量"),
               grid.Column("UnitPrice","单价"),
               grid.Column("UnitsInStock", "库存单位"),
               grid.Column("UnitsOnOrder","订单单位"),
               grid.Column("ReorderLevel","重新排序级别"),
               grid.Column("Discontinued","已停产")
     )
     )

 
   %>
 </div>

　　在Razor中使用WebGrid代码如下：

 <div id="grid">
@{ 
 var grid = new WebGrid(source: Model,
defaultSort: "ProductName", 
rowsPerPage: 10);
}
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),
grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Product', '{0}')", item.ProductID), @class = "Delete", href = "JavaScript:void(0)" })), 
grid.Column("ProductName","产品名称"),
grid.Column("QuantityPerUnit","每单位数量"),
grid.Column("UnitPrice","单价"),
grid.Column("UnitsInStock", "库存单位"),
grid.Column("UnitsOnOrder","订单单位"),
grid.Column("ReorderLevel","重新排序级别"),
grid.Column("Discontinued","已停产")
)
)
</div>

　　WebGrid构造函数如下：

public WebGrid(IEnumerable<dynamic> source, IEnumerable<string> columnNames = null, string defaultSort = null, int rowsPerPage = 10, bool canPage = true, bool canSort = true, string ajaxUpdateContainerId = null, string fieldNamePrefix = null, string pageFieldName = null, string selectionFieldName = null, string sortFieldName = null, string sortDirectionFieldName = null);

　　常见参数意思是：

　　1、source 表示数据源

　　2、columnNames表示显示的列

　　3、defaultSort 默认按什么排序

　　4、rowsPerPage 每页多少行数据

　　5、canPage 是否能排序

　　上面两段代码的意思是定义了一个既分页又能排序的grid。运行：

　　在看看两个view的完整代码：

　　aspx：

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    产品列表
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script  type="text/javascript">
    function deleteRecord(a, b) {
        alert("删除:"+b);
    }
</script>
 <h2>产品列表</h2> 
 <div id="grid">
 <% var grid = new WebGrid(source: Model, defaultSort: "ProductName", rowsPerPage: 5); %>
 <%=grid.GetHtml(
     tableStyle: "grid",
     headerStyle: "head",
     alternatingRowStyle: "alt",
     columns: grid.Columns(
               grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),
               grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Employee', '{0}')", item.ProductID), @class = "Delete", href = "JavaScript:void(0)" })),
               grid.Column("ProductName","产品名称"),
               grid.Column("QuantityPerUnit","每单位数量"),
               grid.Column("UnitPrice","单价"),
               grid.Column("UnitsInStock", "库存单位"),
               grid.Column("UnitsOnOrder","订单单位"),
               grid.Column("ReorderLevel","重新排序级别"),
               grid.Column("Discontinued","已停产")
     )
     )

 
   %>
 </div>


</asp:Content>

　　Razor：

 @model List<WebGridRazor.Models.Products>
 @{
  View.Title = "产品列表";
 }

 <p>
 <h2>产品列表</h2> 
 <div id="grid">
  @{ 
  
  var grid = new WebGrid(source: Model,
  defaultSort: "ProductName", 
  rowsPerPage: 3);
 }
  @grid.GetHtml(
     tableStyle: "grid",
     headerStyle: "head",
     alternatingRowStyle: "alt",
     columns: grid.Columns(
          grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),
          grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Product', '{0}')", item.ProductID), @class = "Delete", href = "JavaScript:void(0)" })), 
          grid.Column("ProductName","产品名称"),
          grid.Column("QuantityPerUnit","每单位数量"),
          grid.Column("UnitPrice","单价"),
          grid.Column("UnitsInStock", "库存单位"),
          grid.Column("UnitsOnOrder","订单单位"),
          grid.Column("ReorderLevel","重新排序级别"),
          grid.Column("Discontinued","已停产")
     )
     )
 </div>
 </p>

　　Razor去掉了那些模板页的代码，使代码看起来更整洁。比较喜欢Razor。

　　总结：本文很简单，介绍了一下ASP.NET MVC 3 Beta中新功能WebGrid，由于这种方式WebGrid是在内存中分页和排序的，所以不适合大数据量。

　　代码：https://files.cnblogs.com/zhuqil/MvcApplication11.rar