A Simple Way to Implement Grid Using MVC

Introduction

This article shows the use Grid.MVC for implementing grids. Grid.MVC adds functionalities for controls like sorting, filtering, paging and many more. This gives an easy way to implement HTML tables containing all the data. This Grid.MVC would require a model that would be an IEnumerable type or collection of data. Here I have used hardcoded values for populating the grid. Now a days many grid sources are available, mainly Telerik Kendo Grid has gained the market, but using this for small applications would be easy and light since we do not need any third-party tool as we can directly install Grid.MVC from the Nuget package that I will be showing below.

Let's Get Started

Before getting started, we need to understand what MVC is since everything we are dealing with are MVC components.

Step 1

Add a new project to Visual Studio. Select ASP.Net Web Application. Provide a name for it. I have used "MVCGridDemo".

After adding the project, a new pop-up is shown where we need to choose the type like MVC/Web Forms/Web API. We choose MVC here. Now the project is created with sample folders since a MVC project is created. Mainly of focus is Model, View and Controllers folders. The structure looks as in the following:

Step 2

Now, here we can see the Models, Views and Controllers folder. The next job is to add a controller. So right-click on the controllers folder and add a new controller from the following popup:

We select the empty controller and name it SuperDogController.cs since we know controllers are suffixed with the controller word.

Step 3

Then we add the main part, the Model/ViewModel. Similar to the controller, right-click on the model folder and add a class and name it. Here I have named it SuperDog.cs. The class would look as in the following:

In the preceding image as you can see, I have a Red arrow towards an option called Remove and Sort. What this does is, when we add a class the using statements are added automatically even if they are not being used. So to maintain consistency let's remove them. And we can remove them by right-clicking on the class file and click on the preceding nested route, in other words Remove and Sort, and finally our class SuperDog.cs would look like:

namespace MVCGridDemo.Models
{
public class SuperDogs
{
public string DogName { get; set; }
public string BreedName { get; set; }
public int DogAge { get; set; }
public string DogOwner { get; set; }
}
}

This is the class we have added after removing or sorting the Usings statements. :)

Step 4

Now its time to add/install the Grid.MVC to our project. In the conext of MVC we would rather say add the Grid.MVC reference to the project. Thus for that we can see Reference in the project structure floating in the route of the web project. We then right-click on that, then seelct Manage Nuget package, then we directly search online for the Grid.MVC, we find the package reference with an install button beside. Click on that and wait for the successful installation of the package.

We should also search for the Bootstrap online and install that too.

Step 5

Now after adding the reference of these two, it's time to add hard coded values for the data collection to be shown in the grid or bound to the grid. The list of the model class data would be added as in the following:

/// <summary>
/// This returns the hard code values required for setting the grid
/// </summary>
/// <returns></returns>
public List<SuperDogs> GetHardCodedValues()
{
var returnModel = new List<SuperDogs>();
var firstDog = new SuperDogs
{
BreedName = "Labrador",
DogAge = 1,
DogName = "HACHIKO",
DogOwner = "SURAJ SAHOO",
};
var secondDog = new SuperDogs
{
BreedName = "Labrador",
DogAge = 2,
DogName = "STEFFY",
DogOwner = "XYZ",
};
var thirdDog = new SuperDogs
{
BreedName = "Golden Retriever",
DogAge = 3,
DogName = "LOVELY",
DogOwner = "PQrS",
};
var forthDog = new SuperDogs
{
BreedName = "German Spitz",
DogAge = 5,
DogName = "CANDY",
DogOwner = "ABCD",
};
var fifthDog = new SuperDogs
{
BreedName = "German Sheperd",
DogAge = 10,
DogName = "CAPTAIN",
DogOwner = "Mota",
};
var sixthDog = new SuperDogs
{
BreedName = "British BullDog",
DogAge = 10,
DogName = "BILL",
DogOwner = "AUTA",
};
for (var i = 0; i < 10; i++)
{
returnModel.Add(firstDog);
returnModel.Add(secondDog);
returnModel.Add(thirdDog);
returnModel.Add(forthDog);
returnModel.Add(fifthDog);
returnModel.Add(sixthDog);
}
return returnModel;
}

The preceding piece of code is added inside the model class SuperDog.cs only.

Step 6

Now the action on the Controller starts. When we double-click and open SuperDogController.cs we can see a default action method of return type ActionResult is already added. Let's add a code block into that method only. Let's add and then look into it line by line:

using MVCGridDemo.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace MVCGridDemo.Controllers
{
public class SuperDogController : Controller
{
/// <summary>
/// This method returns the list of dogs
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
var model = new SuperDogs();
List<SuperDogs> dogGrid = model.GetHardCodedValues();
return View(dogGrid);
}
}
}

Our controller finally looks like the preceding code block. You can see the required using statements are bieng used here and are sorted alphabetically. The Green lines above the Action method Index are XML comment lines, that can be added by just typing "///" just above the action. Then we just need to add a description like this method does what.

Now let's discuss the codes inside the Action method.

The first line is the instantiation of the model class that we added. This we are instantiating since we need to access the collection of data objects that we have created inside the method GetHardCodedvalues().

Then we add and initialize the List of SuperDogs or the List of model classes that we will be using inside the view (IEnumerable<SuperDogs>) and set it to access the list method that returns a list of objects of type SuperDog that we have hardcoded. Then since the view expects an IEnumerable/List of the SuperDog model we return it into the view. Let's have a look at the view below:

@model IEnumerable<MVCGridDemo.Models.SuperDogs>

This is the model used in the view.

Now it's time to add the Grid code block into our view. The MVC Grid is used using:

@using GridMvc.Html
@Html.Grid(Model).Columns(columns =>columns.Add(c=>c.ID))

The preceding using statement is required in the viewpage where the Grid would be used to make that accessible using HTML, like @Html.Grid(ModelName) with the column names/properties of the model. "@" is used in Razor syntax.

Finally the view with the html MVC Grid looks as in the following:

@using GridMvc.Html
@model IEnumerable<MVCGridDemo.Models.SuperDogs>
@{
ViewBag.Title = "Index";
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
<title>Dog List</title>
</head>
<body>
<h1>Dog List</h1>
<hr />
<div style="width:500px;">
@Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.DogName).Titled("Dog Name");
columns.Add(c => c.BreedName).Titled("Breed").Filterable(true);
columns.Add(c => c.DogAge).Titled("Age");
columns.Add(c => c.DogOwner).Titled("Owner Name");
}).WithPaging(3).Sortable(true)
</div>
</body>
</html>

The functionalities like Sortable() accept a boolean value WithPaging() the value parameter that suggests the number of records in the grid and the Titled() is used to add the title of the respective column. You can also see the reference for the StyleSheets(.css) and Scripts(.js) for the gridmvc and bootstrap too. Finally when we run the application using the URL : "/SuperDog/Index" and we get the following result:

The preceding is the final grid for the Page 1.

The preceding is the grid results for the Page 2.

Conclusion

This is a very simple article that shows the basic implementation and installation of the grid in MVC . We can also download the grid.MVC from the link: Codeplex Link .

In the next article or Part 2 I will show how to create a record and dynamically get the records from the database and bind the Grid.

I hope this would help in creating the grid. You can also download the source code file.

17 Comments

Join the conversation! Your thoughts help the community grow.

Patience Soul8y ago
How to put a horizontal scroll so it could fix well on the page?
sonu kumar Amarjeet8y ago
Thanks a lot, Suraj it's too good very easy to use
Tamer Yousef9y ago
How do you nest a grid inside another?
angappan s10y ago
How to dynamic bind in grid mvc. ? when i tried i got error "attempted to access an element as a type incompatible with the array" ? how to solve this?
shyam kushwah11y ago
column filter is not working. help me
shyam kushwah11y ago
be yar ye to cheting hai bhai..
Himanshu Gupta11y ago
but every time page is refreshed when click on the Paging. Any Solution ?
Surya Prakash Pandey11y ago
hello.. how to get selected row recoreds in mvc grid ..??
madusanka dharmarathna11y ago
Hi,I want to apply filter with input box that appeared in the grid all the time rather than a pop up.how can i apply that.
Antariksh11y ago
Very Nice . Thanks for the Article !!. Filter on column is not working .Please suggest.
- Suraj Sahoo11y ago
  Thanks a lot Antariksh. The filterable has not been mentioned in the article. I apologize for this. For having filter option, you need to add ".WithPaging(3).Filterable(true).Sortable(true)". Then the filterable will work.
- sonu kumar Amarjeet8y ago
  For me also filter was not working due to jquery it was not loading please check jquery is loading or not
Saineshwar Bageri11y ago
cool
Bhushan Gawale11y ago
Thanks for sharing!!
- Suraj Sahoo11y ago
  Thanks Bhushan
Manish Kumar Choudhary11y ago
Nice one..
- Suraj Sahoo11y ago
  Thanks Manish