WebGrid In MVC3 using Ajax

In MVC3 Webgrid leverages showing data in grid format.This helper is found in the System.Web.Helpers.dl.
If your are using Visual Studio 2010 and MVC3 project then this dll is automatically added you need to refer in your controller .

Work Flow:
 On page load using AJAX Action method that return webgrid JSON is returned Which is placed inside a div to show grid format data.
Here is project structure:

Index.aspx

This page is loaded first time because of default routing you can find in Global.asax

routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults );

Which tell aspxengine that index action in home controller is the default action.

<%Html.RenderPartial("WebGridPV"); %>

This will load partial view webGridPV ,This partial view contains script for loading webgrid.


webGridPV.ascx

$(document).ready(function () { Loadgrid(); });
 function Loadgrid() { $.ajaxSetup({ cache: false });
 var pageIndex = $('#hdPageIndex').val();
 $.getJSON("../Home/LoadGrid", null, function (d) { var data = eval(d); $("#divWebgrid").html(data.data); }); }

HomeController.cs

public JsonResult LoadGrid()
{

  IList<UsersGridViewModel> lstusersVM = new List<UsersGridViewModel>();
  lstusersVM=GetUserList();
  WebGrid grid = new WebGrid(lstusersVM);
  var htmlString = grid.GetHtml(caption: "Users", tableStyle: "wide",
  headerStyle: "Header", rowStyle: "grey", alternatingRowStyle: "white",
  htmlAttributes: new { id = "Datatable" },
   columns: grid.Columns(
   grid.Column(columnName: "", format: x => x.HiddenTemplateId),          
   grid.Column(columnName: "FirstName", header: "First Name", canSort: false),
   grid.Column(columnName: "LastName", header: "Last Name", canSort: false),
   grid.Column(columnName: "Address", header: "Address", canSort: false),
   grid.Column(columnName: "ZipCode", header: "ZipCode", canSort: false),
   grid.Column(columnName: "PhoneNumber", header: "Phone Number", canSort: false)));      
  return Json(new { data = htmlString.ToHtmlString() }, JsonRequestBehavior.AllowGet);

}

//function for returning user list
private List<UsersGridViewModel> GetUserList()
{
List<UsersGridViewModel> lstResult = new List<UsersGridViewModel>();
UsersGridViewModel objitem = new UsersGridViewModel();
objitem.Address = "212,Flane";
objitem.FirstName = "Greesh";
objitem.LastName = "Kumar";
objitem.PhoneNumber = "781544403";
objitem.UserId = 1;
objitem.ZipCode = "6974521";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "611,Love dale";
objitem.FirstName = "Sathya";
objitem.LastName = "Kumar";
objitem.PhoneNumber = "745746213";
objitem.UserId = 2;
objitem.ZipCode = "597412";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "Karthika,Kollam";
objitem.FirstName = "Rani";
objitem.LastName = "Kumar";
objitem.PhoneNumber = "774155785";
objitem.UserId = 3;
objitem.ZipCode = "694224";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "67, Nila";
objitem.FirstName = "Kumar";
objitem.LastName = "Ramesh";
objitem.PhoneNumber = "742642156885";
objitem.UserId = 4;
objitem.ZipCode = "69841263";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "K lane,Rose Nagar";
objitem.FirstName = "Sumesh";
objitem.LastName = "Kumar";
objitem.PhoneNumber = "78411268541";
objitem.UserId = 5;
objitem.ZipCode = "6974521";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "K lane";
objitem.FirstName = "Gulshan";
objitem.LastName = "Kumar";
objitem.PhoneNumber = "741354";
objitem.UserId = 6;
objitem.ZipCode = "698712";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "Rose nagar";
objitem.FirstName = "Kamal";
objitem.LastName = "Malhotra";
objitem.PhoneNumber = "7854263564";
objitem.UserId = 7;
objitem.ZipCode = "9661125";
lstResult.Add(objitem);
objitem = new UsersGridViewModel();
objitem.Address = "Mg Road ,211 Nila";
objitem.FirstName = "Kunal";
objitem.LastName = "kapoor";
objitem.PhoneNumber = "7458999925";
objitem.UserId = 8;
objitem.ZipCode = "369445";
lstResult.Add(objitem);
return lstResult;

}

Here is the output

Click here to download full sourcecode