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

 

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:

 

MVC WebGrid_Jquery
 

 

 

use "ajaxUpdateContainerId"
<div id="grid">
    @{
        var grid = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
        @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))
    )
    )
    }
</div>