Creating Simple Grid in MVC Using Grid.MVC

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

• Creating simple application in MVC.
• Adding Entity Framework and configuring it.
• Adding Grid.MVC and Bootstrap from Nuget.
• Adding simple controller.
• Adding View and using Grid.MVC in it.
• Lastly how to use the filter properties of Grid.MVC.

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



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



Creating Application



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



Finally click on the Ok button.

After creating the application here is the application view.



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



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.



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



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.



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



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



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



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.



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



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.



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



The connection string as generated after adding Entity Framework.

<addname="GYMONEDBMVCEntities"connectionString="metadata=res://*/Models.MyTestDB.csdl|res://*/Models.MyTestDB.ssdl|res://*/Models.MyTestDB.msl;
         provider=System.Data.SqlClient;provider
         connection string="
         data source=sai-pc;
         initial catalog=GYMONEDBMVC;
         user id=sa;
         password=Pass$123;
         MultipleActiveResultSets=True;
         App=EntityFramework""
         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”.



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

Then click on the Install Button.



The following  is the View after adding Grid.MVC:



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.



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.



Code Snippet After Adding

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace GridDemo.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

    }
}

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.

public class HomeController : Controller
{

    public ActionResult Details()
    {

        GYMONEDBMVCEntities GVDB = new GYMONEDBMVCEntities();

        var SchemeList = (from scheme in GVDB.SchemeMasters
                         select scheme).ToList();


        return View(SchemeList);
    }

}

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.





After adding the view, the following is the complete View of Details.cshtml that is generated.

@model GridDemo.Models.SchemeMaster
@{
   ViewBag.Title = "Details";
}

<h2>Details</h2>

After adding the View now let's change the Model declaration from simple Model to IEnumerable<Model>.

@model IEnumerable<GridDemo.Models.SchemeMaster>

Code snippet of Details View

@model IEnumerable<GridDemo.Models.SchemeMaster>

@using GridMvc.Html
@{
    ViewBag.Title = "Details";
}
@{
    Layout = null;
}

<h2>Details</h2>

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

<div class="code-cut">
    @Html.Grid(Model).Columns(columns =>
                    {
                        columns.Add(c => c.SchemeID).Titled("Scheme ID").Filterable(true);
                        columns.Add(c => c.SchemeName).Titled("SchemeName").Filterable(true);
                        columns.Add()
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(30)
                        .RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.SchemeID }));

                    }).WithPaging(10).Sortable(true)
</div>

Code of Grid in Part

Declaring the namespace of GridMVC and then make the layout null.

@using GridMvc.Html

@{
   Layout = null;
}

Adding Scripts on View

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

Adding Columns in Grid

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

Example:

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

.Filterable(true);
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.

columns.Add()
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.SchemeID }));

The following is a snapshot of the Grid displaying all the 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



How to use Filter of Grid.MVC



After Filtering records in Grid