ASP.NET MVC 3 Beta初体验之WebGrid

开发 后端
在ASP.NET MVC 3 Beta发布后很多.NET程序员关心他的一些新功能。不过今天我们要讲的,却是WebGrid,将分别介绍在aspx视图引擎和Razor视图引擎中如何使用它

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

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

  1. public class HomeController : Controller      
  2. {        public ActionResult Index()         
  3.  {             
  4.  NORTHWNDEntities entity = new NORTHWNDEntities();              
  5. return View( entity.Products.ToList());        
  6.   }     }  

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

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

在Razor中使用WebGrid代码如下:

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

WebGrid构造函数如下:

  1. public WebGrid(IEnumerable<dynamic> source, 
  2. IEnumerable<string> columnNames = null
  3. string defaultSort = null
  4. int rowsPerPage = 10, 
  5. bool canPage = truebool canSort = true
  6. string ajaxUpdateContainerId = null
  7. string fieldNamePrefix = null
  8. string pageFieldName = null
  9. string selectionFieldName = null
  10. string sortFieldName = null
  11. string sortDirectionFieldName = null);  
  12.  

常见参数意思是:

1、source 表示数据源

2、columnNames表示显示的列

3、defaultSort 默认按什么排序

4、rowsPerPage 每页多少行数据

5、canPage 是否能排序

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

运行:

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

aspx:

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<WebGridAspx.Models.Products>>" %> 
  2. <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">      
  3. 产品列表  
  4. </asp:Content> 
  5. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  6. <script  type="text/javascript">    
  7. function deleteRecord(a, b) {          
  8. alert("删除:"+b);     
  9.  }</script> 
  10.  <h2>产品列表</h2>    
  11. <div id="grid">   
  12. <% var grid = new WebGrid(source: Model, defaultSort: "ProductName", rowsPerPage: 5); %>   
  13. <%=grid.GetHtml(       
  14. tableStyle: "grid",       
  15. headerStyle: "head",       
  16. alternatingRowStyle: "alt",       
  17. columns: grid.Columns(                
  18.  grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),                 
  19. grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Employee', '{0}')", item.ProductID), @class = "Delete"href = "JavaScript:void(0)" })),                 
  20. grid.Column("ProductName","产品名称"),               
  21. grid.Column("QuantityPerUnit","每单位数量"),                 
  22. grid.Column("UnitPrice","单价"),               
  23. grid.Column("UnitsInStock", "库存单位"),               
  24. grid.Column("UnitsOnOrder","订单单位"),               
  25. grid.Column("ReorderLevel","重新排序级别"),               
  26. grid.Column("Discontinued","已停产")     )     )    %> 
  27. </div></asp:Content> 

Razor:

代码 

  1.  @model List<WebGridRazor.Models.Products> @{  View.Title = "产品列表"; } <p> 
  2. <h2>产品列表</h2>  <div id="grid">  @{       
  3. var grid = new WebGrid(source: Model,  defaultSort: "ProductName",   rowsPerPage: 3); }  @grid.GetHtml(       
  4. tableStyle: "grid",       
  5. headerStyle: "head",       
  6. alternatingRowStyle: "alt",       
  7. columns: grid.Columns(            
  8. grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ProductID })),          
  9. grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", null, new { onclick = string.Format("deleteRecord('Product', '{0}')", item.ProductID), @class = "Delete"href = "JavaScript:void(0)" })),             
  10. grid.Column("ProductName","产品名称"),          
  11. grid.Column("QuantityPerUnit","每单位数量"),          
  12. grid.Column("UnitPrice","单价"),            
  13. grid.Column("UnitsInStock", "库存单位"),          
  14. grid.Column("UnitsOnOrder","订单单位"),          
  15. grid.Column("ReorderLevel","重新排序级别"),          
  16. grid.Column("Discontinued","已停产")     )     )   
  17. </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开发人员应该关注的七个开源项目
责任编辑:彭凡 来源: 博客园
相关推荐

2010-10-12 09:52:02

ASP.NET MVC

2010-10-20 09:05:16

ASP.NET MVC

2009-07-23 10:08:24

asp.net mvc

2009-07-20 16:44:56

ASP.NET MVCIValueProvi

2010-12-07 09:38:15

ASP.NET MVC

2010-06-23 15:44:03

ASP.NET MVC

2009-07-24 13:20:44

MVC框架ASP.NET

2011-09-28 13:48:06

Visual Stud

2010-06-25 08:51:46

ASP.NET MVC

2014-07-29 10:00:30

ASP.NETMVCAutoFac

2009-07-31 12:43:59

ASP.NET MVC

2011-01-15 23:07:59

2011-04-14 09:19:22

ASP.NET MVC

2009-07-23 14:31:20

ASP.NET MVC

2009-07-20 10:53:59

ASP.NET MVC

2009-07-22 13:24:24

ASP.NET MVC

2009-07-22 10:09:59

ASP.NET MVC

2009-07-23 15:44:39

ASP.NET MVC

2009-07-28 17:17:19

ASP.NET概述

2010-06-23 08:56:58

ASP.NET MVC
点赞
收藏

51CTO技术栈公众号