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://javaforall.cn/185332.html原文链接：https://javaforall.cn
