Question

How can i implement Ajax for this Grid i have?

@{
var grid = new WebGrid(source: Model, defaultSort: "FirstName", rowsPerPage: 5);
}
@if (Model.Count() > 0)
{
<div id="grid">
    @grid.GetHtml(
 tableStyle: "grid",
 headerStyle: "head",
 alternatingRowStyle: "alt",
 columns: grid.Columns(
 grid.Column("FirstName", "First Name"),
 grid.Column("LastName", "Last Name"),
 grid.Column("Address"),
 grid.Column("DOB"),
 grid.Column("Gender")
 )
    )
</div>
}

I tried adding ajaxUpdateContainerId but it is giving some error.
I couldn’t understand it.

I have created my grid like below

var grid = new WebGrid(canPage: true, rowsPerPage: 2, defaultSort: "FirstName", canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(Model, rowCount:Model.Count(), autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);

But it showing all the records in the grid where i want to show only 5 records in grid then paging

Answer 1

There is a great article on the subject here http://www.unboxedsolutions.com/sean/archive/2011/01/23/15964.aspx

@using AdventureWorks.Common
@using ThisController = MvcDemo.Controllers.GridExampleController
@model GridExampleViewModel

@{ ViewBag.Title = "Index"; }

@{
    var grid = new WebGrid(canPage: true, rowsPerPage: ThisController.PageSize, canSort: true, ajaxUpdateContainerId: "grid");
    grid.Bind(Model.Employees, rowCount: Model.TotalRecords, autoSortAndPage: false);
    grid.Pager(WebGridPagerModes.All);
    @grid.GetHtml(htmlAttributes: new { id="grid" },
        columns: grid.Columns(
            grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.EmployeeID, ContactID = item.ContactID })),
            grid.Column("FullName"),
            grid.Column("Title")
        ));
}