In this blog I am going to explain how to add data in web grid control in asp.net MVC and how to do paging in web grid control. In order to do paging in web grid control you have to pass the page no in the controller to view the page data.
Now I am going to give a simple demo how to do it. I am using razor view in asp.net MVC 3 for creating demo.
· Create a Model to store the data as I create below named (PageModel):
public class PageModel
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
· After creating the model, add data in the model (PageModel). I have
added data in the model in the constructor of controller.
List<PageModel> _idsContain;
public HomeController()
{
_idsContain = new List<PageModel>();
_idsContain.Add(new PageModel() { Id = 1, Name = "Rohit", Age = 20 });
_idsContain.Add(new PageModel() { Id = 2, Name = "Rahul", Age = 21 });
_idsContain.Add(new PageModel() { Id = 3, Name = "Arun", Age = 22 });
_idsContain.Add(new PageModel() { Id = 4, Name = "Amit", Age = 23 });
_idsContain.Add(new PageModel() { Id = 5, Name = "Rati", Age = 19 });
_idsContain.Add(new PageModel() { Id = 6, Name = "Hemant", Age = 24 });
_idsContain.Add(new PageModel() { Id = 7, Name = "Harshit", Age = 25 });
_idsContain.Add(new PageModel() { Id = 8, Name = "Anil", Age = 22 });
_idsContain.Add(new PageModel() { Id = 9, Name = "Kashif", Age = 21 });
_idsContain.Add(new PageModel() { Id = 10, Name = "Mahfooz", Age = 21 });
}
· You also have to add the following namespace in your controller:
using System.Linq;
using System.Web.Helpers;
· Create Index action as parameterized that takes a page no and return the
list of data to the Index View:
public ActionResult Index(int? page)
{
return View(_idsContain);
}
· Now create a method to do paging and add data in web grid on the basis
of page no:
[HttpGet]
public JsonResult EfficientPaging(int? page)
{
int skip = page.HasValue ? page.Value - 1 : 0;
var data = _idsContain.OrderBy(o => o.Id).Skip(skip * 5).Take(5).ToList();
var grid = new WebGrid(data);
var htmlString = grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
htmlAttributes: new { id = "DataTable" });
return Json(new
{
Data = htmlString.ToHtmlString(),
Count = _idsContain.Count() / 5
}, JsonRequestBehavior.AllowGet);
}
· Now add an Index view (Index.cshtml) and create a web grid in that View
to display data:
@model List<PagingMVC.Models.PageModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
@grid.GetHtml(tableStyle: "webGrid",
htmlAttributes: new { id = "DataTable" },
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Age"),
grid.Column("Id"),
grid.Column("Name")
));
}
</div>
</body>
</html>
After doing the above process you can easily know how to add data and
paging in web grid control in asp.net MVC using razor view.
Anonymous User
04-Apr-2019Thank you for the informative post.
Samuel Fernandes
25-Jul-2017It was really helpful to read this post.