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 Asp.net. Here i will explain how to use MVC Grid in asp.net 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

mvcgrid

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 => model.name).Titled("Name").Filterable(true);
 columns.Add(model => model.email).Titled("Email").Filterable(true);
 columns.Add(model => model.mobile).Titled("Mobile No.").Filterable(true);
 columns.Add(model => model.address).Titled("Address").Filterable(true);
}).WithPaging(4).Sortable(true)

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

mvcGrid1

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