ASP.NET MVC 3 Beta初體驗之WebGrid

作者: 麒麟來源: 博客園發布時間: 2010-11-02 14:33 閱讀: 1318 次推薦: 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代碼如下：

<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://files.cnblogs.com/zhuqil/MvcApplication11.rar