@html.grid mvc 5

Step by step process to bind MVC.Grid in MVc application

Grid will be display like below

In build filter and paging will work like below.

1.       Create an MVC application select the web application from the new Project.

2.       New MVC application has created now add MVC grid from Nuget package.

Open the managenuget by doing the right click on the project.

3.       Search for grid now add the GRID.MVC from search result. Click on Install from right side window.

4.       Now you can see that Gridmvc.css in content folder and Gridmvc.js and gridmvc.min.js in script folder that is JS and CSS help to build the MVC application.

5.       Creating a class as location which will use to display that collection into grid.

public partial class Location     {            public int LocationId { get; set; }         public string Location1 { get; set; }         public string Description { get; set; }         public Nullable<System.DateTime> CreatedDate { get; set; }         public Nullable<int> CreatedBy { get; set; }      }

6.       Now take the reference of MVC grid javascript and CSS files into your page as like below.

<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>

7.       Take the references in page for displaying the MVC grid.

@model IEnumerable<gridbindSample.eframework.Location> @using GridMvc.Html

8.       Code for cshtml with binding of MVC.grid.

@{     ViewBag.Title = "Home Page"; } @model IEnumerable<gridbindSample.eframework.Location> @using GridMvc.Html   <div class="row">     <div class="col-md-12">  @Html.Grid(Model).Columns(columns => {     columns.Add(c => c.Location1).Titled("Location");     columns.Add(c => c.Description).Titled("Description").Filterable(true);     columns.Add(c => c.CreatedDate)             .Titled("Created Date")             .SetWidth(110)             .Sortable(true)             .RenderValueAs(c => Convert.ToDateTime(c.CreatedDate).ToString("d"));     columns.Add()             .Titled("")             .SetWidth(10)             .Filterable(true)             .Sanitized(false)             .Encoded(false)             .RenderValueAs(c => Html.ActionLink(" ", "Edit", "Home", new { id = c.LocationId }, new {  @class = "glyphicon glyphicon-edit" })             .ToHtmlString());     columns.Add()             .Titled("")             .SetWidth(10)             .Filterable(true)             .Sanitized(false)             .Encoded(false)             .RenderValueAs(c => Html.ActionLink(" ", "Delete", "Home", new { id = c.LocationId }, new { onclick = "return confirm('Are you sure you wish to delete this Location?');", @class = "glyphicon glyphicon-trash" })             .ToHtmlString()); }).WithPaging(10).Sortable(true)             </div>    </div>

9.       Code for controller to bind the MVC.grid as; It will be in Index action.

public ActionResult Index()         {             var loc = db.Locations.ToList();             return View(loc);         }

10.   Code for Edit action that will call from grid as. Add a cshtml and call to load the edit page.

// GET: home/Edit/5         public ActionResult Edit(int? id)         {             if (id == null)             {                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);             }             Location loc = db.Locations.Find(id);             if (loc == null)             {                 return HttpNotFound();             }             return View(loc);         }

11.   Calling the deletion controller and functionality for deletion in MVC.Grid.

// GET: home/Delete/5         public ActionResult Delete(int? id)         {             if (id == null)             {                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);             }             var loc = db.Locations.Find(id);             if (loc == null)             {                 return HttpNotFound();             }             else             {                 var loc = db.Locations.Find(id);                 db.Locations.Remove(loc);                 db.SaveChanges();             }             return RedirectToAction("Index");         }

                                   

For documentation you can see

https://gridmvc.codeplex.com/wikipage?title=Filtering