Web Grid in ASP.NET MVC

By | December 20, 2015

In ASP.NET MVC, the new concept begins WebGrid. WebGrid is lightweight for showing data in tabular format like GridView in Asp.net. Here i will explain how to use WebGrid in asp.net MVC with entity framework.

In below HomeController, we used ViewBag  to store user data and use this ViewBag in WebGrid(in View)  to show.

 public class HomeController : Controller
 {
 // GET: Home
 public ActionResult Index()
 {
 using (blogEntities dobj = new blogEntities())
 {
 ViewBag.allusers = dobj.sp_get_alluser().ToList();// get all record
 return View();
 }
 }
 }

View :

<h2>WebGrid Example in MVC</h2>

<div>

 @{
 var grid = new WebGrid(ViewBag.allusers, canPage: true, rowsPerPage: 5,
 selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
 grid.Pager(WebGridPagerModes.All);
 }
 @grid.GetHtml(tableStyle: "webGrid",
 headerStyle: "header",
 alternatingRowStyle: "alt",
 selectedRowStyle: "select",
 columns: grid.Columns(
 grid.Column("id", " ID "),
 grid.Column("name", " User Name"),
 grid.Column("email", "Email address"),
 grid.Column("mobile", "Mobile No.")))

</div>

Capture666

I hope you will enjoy how to use WebGrid in Asp.Net MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome

 

Like it? Share it