This control provides functionality for displaying, paging, filtering and sorting data from a collection of your Model objects.

As a developer I have used various controls for displaying data in MVC such as Webgrid for displaying and sorting and paging data. I have also used normal for and foreach loops for Iterating Model data and displaying it. Finally I have also used PagedList.Mvc for paging with a Webgrid but in all of this I found the Grid.MVC Control to be the easies to use and less to code.

Agenda

The following are the tables we will use for the demo.

Tables

Let's start with creating a basic MVC application and naming it GridDemo.

application

Creating Application

Creating Application

After creating the application you need to select the project template. In this template we will use the Basic template.

template

Finally click on the Ok button.

After creating the application here is the application view.

After Creating application

We have completed creating the application. We will add an Entity Framework entity to the application.

Installing Entity Framework

For adding Entity Framework just right-click on your application and from the preceding list select “Manage NuGet Packages”.

Manage NuGet Packages

After select a new dialog will popup of “Manage NuGet Packages”.

Inside the search box enter “Entity Framework”.

After getting the search results select Entity Framework then click on the Install button.

install

After adding it, it will show in the Installed packages.

EntityFramework

After adding Entity Framework now we will add an ADO.NET Entity Data Model.

For ADO.NET Entity Data Model just right-click on the Model folder and select Add inside that select ADO.NET Entity Data Model to our solution.

Data Model to our solution

Then a small dialog will pop up asking for the ADO.NET Entity Data Model name. I will name it MyTestDB.

MyTestDB

Then a new Wizard will popup where we will configure the Entity Data Model. In this we will use Database First.

Entity Data Model

From that select Generate from database and click on the Next button.

After clicking on the Next button a new wizard will po pup for choosing the Data Connection.

Choosing Data Connection

Choosing Data Connection

Now click on New Connection and a new dialog will popup.

We need to configure it.

In Server name you need to add your SQL Server Name.

Using SQL Server Authentication then you need to enter User name and Password of SQL Server.

Last I will select the database name: EmployeeDB.

Lastly click on the OK button.

click on OK butto

Here is the final wizard after completing the configuration.

After adding the Entity Data Model the wizard will look as in the following snapshot.

Selecting database objects

Selecting database objects

Now click on the Next button.

A new wizard will pop up for selecting a database object and in this you will see all the table that we have created in the database.

created in database

Finally clicking on the Finish button after adding the ADO.NET Entity Data Model.

Bootstrap from Nuggets

The connection string as generated after adding Entity Framework.

  1. <addname="GYMONEDBMVCEntities"connectionString="metadata=res://*/Models.MyTestDB.csdl|res://*/Models.MyTestDB.ssdl|res://*/Models.MyTestDB.msl;
  2. provider=System.Data.SqlClient;provider
  3. connection string="
  4. data source=sai-pc;
  5. initial catalog=GYMONEDBMVC;
  6. user id=sa;
  7. password=Pass$123;
  8. MultipleActiveResultSets=True;
  9. App=EntityFramework""
  10. providerName="System.Data.EntityClient" />
Adding Grid.MVC and Bootstrap from Nuggets

For adding Grid.MVC just right-click on your application and from the preceding list select “Manage NuGet Packages”.

MVC

A new wizard will pop up and inside that there is search box, just type Grid.MVC.

Then click on the Install Button.

search box

The following is the View after adding Grid.MVC:

View after Adding

Completed with adding Grid.MVC.

Adding Bootstrap

The following is a similar step for adding Bootstrap from Nuget.

In the search box just type Bootstrap.

Bootstrap

View after adding Bootstrap.

View after Adding Bootstrap

Completed with adding Bootstrap.

Let's add the Controller.

Adding simple controller

To add a controller just right-click on the Controller folder then select Add from the list and inside that select controller.

After selecting controller a new dialog will popup with the name Add Controller.

Now let's change the name of the Controller to HomeController.

HomeController

Code Snippet After Adding
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace GridDemo.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  12. public ActionResult Index()
  13. {
  14. return View();
  15. }
  17. }
  18. }
Now let's change the name of the Index Action Method to Details and then get data from the database and send the Model to the View.

Here I have just wrote a simple LINQ query for getting the data from the SchemeMasters table.
  1. public class HomeController : Controller
  2. {
  4. public ActionResult Details()
  5. {
  7. GYMONEDBMVCEntities GVDB = new GYMONEDBMVCEntities();
  9. var SchemeList = (from scheme in GVDB.SchemeMasters
  10. select scheme).ToList();
  13. return View(SchemeList);
  14. }
  16. }
Adding View and Using Grid.MVC in it

For adding the View just right-click inside the Details Action Method and then select Add View. A new wizard will pop up with the same name as that of the Action Method and in the Model select SchemeMaster Model and the scaffold template will be empty. Finally click on the Add Button.

Adding View

Using Grid

After adding the view, the following is the complete View of Details.cshtml that is generated.
  1. @model GridDemo.Models.SchemeMaster
  2. @{
  3. ViewBag.Title = "Details";
  4. }
  6. <h2>Details</h2>
After adding the View now let's change the Model declaration from simple Model to IEnumerable<Model>.
  1. @model IEnumerable<GridDemo.Models.SchemeMaster>
Code snippet of Details View
  1. @model IEnumerable<GridDemo.Models.SchemeMaster>
  3. @using GridMvc.Html
  4. @{
  5. ViewBag.Title = "Details";
  6. }
  7. @{
  8. Layout = null;
  9. }
  11. <h2>Details</h2>
  13. <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
  14. <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
  15. <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
  16. <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
  18. <div class="code-cut">
  19. @Html.Grid(Model).Columns(columns =>
  20. {
  21. columns.Add(c => c.SchemeID).Titled("Scheme ID").Filterable(true);
  22. columns.Add(c => c.SchemeName).Titled("SchemeName").Filterable(true);
  23. columns.Add()
  24. .Encoded(false)
  25. .Sanitized(false)
  26. .SetWidth(30)
  27. .RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.SchemeID }));
  29. }).WithPaging(10).Sortable(true)
  30. </div>
Code of Grid in Part

Declaring the namespace of GridMVC and then make the layout null.
  1. @using GridMvc.Html
  3. @{
  4. Layout = null;
  5. }
Adding Scripts on View
  1. <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
  2. <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
  3. <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
  4. <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
Adding Columns in Grid

In Grid.MVC we will use a lamba expression for displaying columns in the Grid.

Example:
  1. columns.Add(c => c.SchemeID).Titled("Scheme ID");
Adding Filter to Column

If you want to add a filter to the Grid then set the fliter to true.

Example
  1. .Filterable(true);
  2. columns.Add(c => c.SchemeName).Titled("SchemeName").Filterable(true);
Adding Button or Action Link

Here I have added an Edit button Action link in Grid.MVC. We usually require a button in the grid for editing or deleting and for other purposes.
  1. columns.Add()
  2. .Encoded(false)
  3. .Sanitized(false)
  4. .SetWidth(30)
  5. .RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.SchemeID }));
The following is a snapshot of the Grid displaying all the properties.

Grid displaying all Properties

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

URL for Accessing: http://localhost:1364/home/details

Final output of Grid.MVC

Final output of Grid

How to use Filter of Grid.MVC

How to use Filter of Grid

After Filtering records in Grid

After Filtering records in Grid