WebGrid 詳解

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>