MVC WebGrid 的简单使用

最新推荐文章于 2024-07-21 17:23:08 发布

weixin_34380781

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量297

点赞数

原文链接：http://blog.51cto.com/kebin/664450

版权

Source:http://www.dotnetcurry.com/ShowArticle.aspx?ID=615

http://weblogs.asp.net/andrebaltieri/archive/2010/11/01/asp-net-mvc-3-working-with-webgrid.aspx

http://msdn.microsoft.com/en-us/magazine/hh288075.aspx <==

http://www.cnblogs.com/jack86514/archive/2010/12/23/1915211.html --

What is the WebGrid?

The WebGrid is a helper that was included on the new Beta 1 version of ASP.NET MVC 3 (Changes can happens since it is a beta version) that enable us to show data easily.

With a simple command @grid.getHtml() we have as return a populated table, with paging, sorting and alternated lines. Want more? yes, it follows the webstandards.

The WebGrid constructor takes a number of parameters. Only one is mandatory. Here’s an explanation of all of them:

System.Collections.Generic.IEnumerable<dynamic> source
The collection of objects

System.Collections.Generic.IEnumerable<string> columnNames = null
The names of the columns appearing in the grid

string defaultSort = null
The name of the column to sort the grid by default

int rowsPerPage = 10
The number of rows to display per page is paging is enabled

bool canPage = true
Determines if the WebGrid can be paged

bool canSort = true
Determines if the WebGrid can be sorted

string ajaxUpdateContainerId = null
The id of the containing element for Ajax paging and sorting support

string ajaxUpdateCallback = null
The callback function for Ajax paging and sorting support

string fieldNamePrefix = null
The value which prefixes the default querystring fields

string pageFieldName = null
A value that replaces the default querystring page field

string selectionFieldName = null
A value that replaces the default querystring row field

string sortFieldName = null
A value that replaces the default querystring sort field

string sortDirectionFieldName = null
A value that replaces the default querystring sortdir field

The GetHtml method renders the grid. To render a simple grid with no formatting, use the following code. I’m using the model that’s being passed in to the view for these examples.

Controller:

public ActionResult WebGrid()

{

return View(VideoRepository.FindAll().OrderByDescending(v=>v.CreateTime));

}

View:

@model IEnumerable<Funny.Models.Video>

ViewBag.Title = "WebGrid";

Layout = "~/Areas/Admin/Views/Shared/Layout.cshtml";

}

<h2>

WebGrid</h2>

var grid = new WebGrid(Model, rowsPerPage: 2);

@grid.GetHtml(

tableStyle: "data-table",

columns: grid.Columns(

grid.Column("Title"),

grid.Column(header: "Image", format: (item) => Html.Raw(string.Format("<img src=\"/Content/videos/{0}\" class=\"fancybox\" />", item.ImageName))),

grid.Column("CreateTime", format: (item) => string.Format("{0:d}", item.CreateTime))

)

}

CSS:

/* data-table */

.data-table

{

border: #DDDDDD 1px solid;

width: 100%;

background:#FFF;

}

.data-table thead th

{

padding: 5px 10px;

text-align: left;

border: 1px solid #DDDDDD;

border-bottom: 1px solid #C1C8D2;

background-color: #F2F4F6;

font-size: 13px;

}

.data-table td

{

line-height: 20px;

padding: 5px 10px;

border: 1px solid #DDDDDD;

}

.data-table tr:hover

{

background-color: #F3F3F3;

}

.data-table td a

{

text-decoration: underline;

}

.data-table tfoot td

{

font-weight: bold;

padding: 10px 0;

text-align: center;

}

.data-table tfoot a

{

border: 1px solid #9AAFE5;

color: #2E6AB1;

display: inline-block;

margin: 0 2px;

padding: 0 5px;

text-decoration: none;

}

Result:

use "ajaxUpdateContainerId"

<div id="grid">

var grid = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "grid");