ASP.NET MVC 3 Beta初體驗(yàn)之WebGrid
作者：朱祁林
在ASP.NET MVC 3 Beta發(fā)布后很多.NET程序員關(guān)心他的一些新功能。不過(guò)今天我們要講的，卻是WebGrid，將分別介紹在aspx視圖引擎和Razor視圖引擎中如何使用它
ASP.NET MVC 3 Beta中除了推出一種新的視圖引擎Razor。還推出了幾種新的HtmlHelper。我比較關(guān)注的是WebGrid，這篇文章將介紹一下WebGrid的使用。WebGrid提供了分頁(yè)和排序的功能，在此之前在MVC中分頁(yè)和排序時(shí)需要自己去寫(xiě)的。這篇文章將分別介紹在aspx視圖引擎和Razor視圖引擎中如何使用它。
我通過(guò)ADO.NET Entity Data Model從NORTHWND的Products中表中取數(shù)據(jù)。在Controller中取數(shù)據(jù)：
- 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","產(chǎn)品名稱(chēng)"),
- grid.Column("QuantityPerUnit","每單位數(shù)量"),
- grid.Column("UnitPrice","單價(jià)"),
- grid.Column("UnitsInStock", "庫(kù)存單位"),
- grid.Column("UnitsOnOrder","訂單單位"),
- grid.Column("ReorderLevel","重新排序級(jí)別"),
- grid.Column("Discontinued","已停產(chǎn)") ) ) %>
- </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","產(chǎn)品名稱(chēng)"),
- grid.Column("QuantityPerUnit","每單位數(shù)量")
- ,grid.Column("UnitPrice","單價(jià)"),
- grid.Column("UnitsInStock", "庫(kù)存單位"),
- grid.Column("UnitsOnOrder","訂單單位"),
- grid.Column("ReorderLevel","重新排序級(jí)別"),
- grid.Column("Discontinued","已停產(chǎn)")))</div>
WebGrid構(gòu)造函數(shù)如下：
- 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);
常見(jiàn)參數(shù)意思是：
1、source 表示數(shù)據(jù)源
2、columnNames表示顯示的列
3、defaultSort 默認(rèn)按什么排序
4、rowsPerPage 每頁(yè)多少行數(shù)據(jù)
5、canPage 是否能排序
上面兩段代碼的意思是定義了一個(gè)既分頁(yè)又能排序的grid。
運(yùn)行：
在看看兩個(gè)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">
- 產(chǎn)品列表
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
- <script type="text/javascript">
- function deleteRecord(a, b) {
- alert("刪除:"+b);
- }</script>
- <h2>產(chǎn)品列表</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","產(chǎn)品名稱(chēng)"),
- grid.Column("QuantityPerUnit","每單位數(shù)量"),
- grid.Column("UnitPrice","單價(jià)"),
- grid.Column("UnitsInStock", "庫(kù)存單位"),
- grid.Column("UnitsOnOrder","訂單單位"),
- grid.Column("ReorderLevel","重新排序級(jí)別"),
- grid.Column("Discontinued","已停產(chǎn)") ) ) %>
- </div></asp:Content>
Razor：
代碼
- @model List<WebGridRazor.Models.Products> @{ View.Title = "產(chǎn)品列表"; } <p>
- <h2>產(chǎn)品列表</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","產(chǎn)品名稱(chēng)"),
- grid.Column("QuantityPerUnit","每單位數(shù)量"),
- grid.Column("UnitPrice","單價(jià)"),
- grid.Column("UnitsInStock", "庫(kù)存單位"),
- grid.Column("UnitsOnOrder","訂單單位"),
- grid.Column("ReorderLevel","重新排序級(jí)別"),
- grid.Column("Discontinued","已停產(chǎn)") ) )
- </div> </p>
Razor去掉了那些模板頁(yè)的代碼，使代碼看起來(lái)更整潔。比較喜歡Razor。
總結(jié)：本文很簡(jiǎn)單，介紹了一下ASP.NET MVC 3 Beta中新功能WebGrid，由于這種方式WebGrid是在內(nèi)存中分頁(yè)和排序的，所以不適合大數(shù)據(jù)量。
源碼下載地址：http://down.51cto.com/data/134994
原文標(biāo)題：ASP.NET MVC 3 Beta之WebGrid的使用
鏈接：http://www.cnblogs.com/zhuqil/archive/2010/10/17/ASP-NET-MVC-3-Beta-WebGrid.html
【編輯推薦】
責(zé)任編輯：彭凡
來(lái)源：
博客園
