作者：josh-jw

介绍

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

WebGrid主要属性：

Source -数据来自哪里。 通常情况下，通过controller action传递model

DefaultSort -定义如何将数据排序。只要在这里提供列名。

RowsPerPage -每页表格显示的记录数。

CanPage -允许分页。

CanSort -允许通过点击列标题排序。

SelectedFieldName -获取查询字符串字段，用于指定所选行WebGrid实例的全名。

代码使用

在这篇文章中， 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 inventoryList =

new ObservableCollection();

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允许我们添加页眉，页脚，行和交替行元素的样式。

.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}

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

为了浏览选定的项目，我使用了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;

Id @product.Id

Name @product.Name

Description @product.Description

Quantity @product.Quantity

}

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

ajaxUpdateContainerId: "gridContent"

添加jQuery引用：