ASP.NET MVC 3 Beta初体验之WebGrid_程序开发

ASP.NET MVC 3 Beta初体验之WebGrid

创始人

2024-07-16 04:31:37

0次

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代码如下：

    
<% 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","已停产")     )     )    %>

在Razor中使用WebGrid代码如下：

  
@{    
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","已停产")))

WebGrid构造函数如下：

public WebGrid(IEnumerable source, 
IEnumerable 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>" %> 
      
产品列表  
 
    
function deleteRecord(a, b) {          
alert("删除:"+b);     
 } 
 产品列表
    
   
<% 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","已停产")     )     )    %>

Razor：

代码

 @model List @{  View.Title = "产品列表"; }  
产品列表
    @{       
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","已停产")     )     )

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

【编辑推荐】

详解ASP.NET MVC 3 beta新特性
.Net平台下的分布式缓存设计
.Net平台开源项目五年发展回顾
.NET平台上Web开发的未来？
.NET开发人员应该关注的七个开源项目

上一篇：10月第3周要闻回顾：Ubuntu 10.10与Windows Phone 7的震撼发布

下一篇：从Google日历宕机事件学到的教训

ASP.NET MVC 3 Beta初体验之WebGrid

产品列表

产品列表

相关内容

热门资讯