锋利的C#

  程序员博客 :: 首页 :: 新随笔 :: 订阅 :: 管理 :: 登录 ::
访问csharp的空间

随笔分类

随笔归档

个人相册

阅读排行榜

评论排行榜

最新评论

csharp 阅读(7471) 评论(1)

作者:josh-jw

介绍
我们可以在web页面用HTML表格元素定义WebGrid显示数据,它以非常简单的方式呈现表格数据,支持自定义格式列,分页,排序,并通过AJAX异步更新。

WebGrid主要属性:
Source -数据来自哪里。 通常情况下,通过controller action传递model
DefaultSort -定义如何将数据排序。只要在这里提供列名。
RowsPerPage -每页表格显示的记录数。
CanPage -允许分页。
CanSort -允许通过点击列标题排序。
SelectedFieldName -获取查询字符串字段,用于指定所选行WebGrid实例的全名。

代码使用

在这篇文章中,我将解释如何在ASP.NET MVC 4应用程序中使用WebGrid。 首先,我要创建一个名为Product的Model。

Product.cs

public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public long Quantity { get; set; }
}



我使用Razor视图引擎,InventoryController包含下面的action:
InventoryController.cs

public ActionResult WebgridSample()
{
ObservableCollection<Product> inventoryList = 
new ObservableCollection<Product>();
inventoryList.Add(new Product { Id = "P101", 
Name = "Computer", Description = "All type of computers", Quantity = 800 });
inventoryList.Add(new Product { Id = "P102", 
Name = "Laptop", Description = "All models of Laptops", Quantity = 500 });
inventoryList.Add(new Product { Id = "P103", 
Name = "Camera", Description = "Hd cameras", Quantity = 300 });
inventoryList.Add(new Product { Id = "P104", 
Name = "Mobile", Description = "All Smartphones", Quantity = 450 });
inventoryList.Add(new Product { Id = "P105", 
Name = "Notepad", Description = "All branded of notepads", Quantity = 670 });
inventoryList.Add(new Product { Id = "P106", 
Name = "Harddisk", Description = "All type of Harddisk", Quantity = 1200 });
inventoryList.Add(new Product { Id = "P107", 
Name = "PenDrive", Description = "All type of Pendrive", Quantity = 370 });
return View(inventoryList);
} 



在WebgridSample视图里,我创建了WebGrid并在调用GetHtml时指定列。

WebgridSample.cshtml:

@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, 
selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);
} 



WebGrid helper允许我们添加页眉,页脚,行和交替行元素的样式。

<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #389DF5}
</style>

 

添加列到表格中并指定列名、排序方式、字段绑定。

<div id="gridContent">
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),
grid.Column("Name", " Name"),
grid.Column("Description", "Description", style: "description"),
grid.Column("Quantity", "Quantity")
)) 
</div>


为了浏览选定的项目,我使用了Id列的format参数。Oolumn方法的format参数,允许我们自定义数据项的渲染。

grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)) 



下面的代码展示了如何以HTML代码方式显示选中的列,为此,我创建了一个Product模型实例。

@{
InventoryManagement.Models.Product product = new InventoryManagement.Models.Product();
}

@if (grid.HasSelection)
{
product = (InventoryManagement.Models.Product)grid.Rows[grid.SelectedIndex].Value;
<b>Id</b> @product.Id<br />
<b>Name</b> @product.Name<br />
<b>Description</b> @product.Description<br />
<b>Quantity</b> @product.Quantity<br />
}



为了避免页面分页时刷新,我们可以添加AJAX参数ajaxUpdateContainerId,包含网格的DIV标记。在这里,我们可以指定ajaxUpdateContainerId为div的id。

ajaxUpdateContainerId: "gridContent"



添加jQuery引用:

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>



下载源代码:外链网址已屏蔽www.okbase.net/file/item/23152


评论列表
Jhon
I'm not quite sure how to say this; you made it extelmery easy for me!

发表评论
切换编辑模式