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是在內存中分頁和排序的，所以不適合大數據量。

源碼下載地址：http://down.51cto.com/data/134994

原文標題：ASP.NET MVC 3 Beta之WebGrid的使用

鏈接：http://www.cnblogs.com/zhuqil/archive/2010/10/17/ASP-NET-MVC-3-Beta-WebGrid.html

【編輯推薦】

1. 詳解ASP.NET MVC 3 beta新特性
2. .Net平臺下的分布式緩存設計
3. .Net平臺開源項目五年發展回顧
4. .NET平臺上Web開發的未來？
5. .NET開發人員應該關注的七個開源項目