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中取数据:

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



(全文完)


以下为广告部分

您部署的HTTPS网站安全吗?

如果您想看下您的网站HTTPS部署的是否安全,花1分钟时间来 myssl.com 检测以下吧。让您的HTTPS网站变得更安全!

SSL检测评估

快速了解HTTPS网站安全情况。

安全评级(A+、A、A-...)、行业合规检测、证书信息查看、证书链信息以及补完、服务器套件信息、证书兼容性检测等。

SSL证书工具

安装部署SSL证书变得更方便。

SSL证书内容查看、SSL证书格式转换、CSR在线生成、SSL私钥加解密、CAA检测等。

SSL漏洞检测

让服务器远离SSL证书漏洞侵扰

TLS ROBOT漏洞检测、心血漏洞检测、FREAK Attack漏洞检测、SSL Poodle漏洞检测、CCS注入漏洞检测。

作者:朱祁林 出处:http://zhuqil.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。  
posted @ 2010-10-17 23:28  麒麟  阅读(10406)  评论(14编辑  收藏  举报