Grid in MVC Using Grid.MVC

By | January 6, 2016

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

In below HomeController, we are passing user details data to view.

public class HomeController : Controller
public ActionResult Index()
TestingEntities objDB = new TestingEntities();
return View(objDB.userdatas.ToList());


Now, we need to show all data in MVC Grid in view so install the package via Nuget Package Manager as below:

PM> Install-Package Grid.Mvc


Now, after successfully installed Grid.MVC we need to call css and js files in view and then add all required columns with title name in @Html.Grid as below code.

@model IEnumerable<WebMVCapp.userdata> 

@using GridMvc.Html

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
<h2>MVCGrid Example in Asp.Net MVC</h2>

@Html.Grid(Model).Columns(columns =>
 columns.Add(model =>"Name").Filterable(true);
 columns.Add(model =>"Email").Filterable(true);
 columns.Add(model =>"Mobile No.").Filterable(true);
 columns.Add(model => model.address).Titled("Address").Filterable(true);

Now finally run the application and see how the grid is displayed.


I hope you will enjoy how to use MVCGrid 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