A Simple Way to Implement Grid using MVC

5.00 avg. rating (97% score) - 1 vote

Introduction

We would be using Grid.MVC for implementing grids. Grid.MVC adds functionalities for having controls like Sort, filter, paging and many more. This gives an easy way to implement HTML tables containing all the data. This Grid.MVC would require a model which would be IEnumerable type or collection of data. Here I have used hardcoded values for populating the grid. Now a days many grids source are available mainly Telerik Kendo Grid has gained market, but using this for small applications would be easy and light as we donot need any third party tool as we can directly install Grid.MVC from the nuget package which I will be showing below.

Lets Get Started

Pre-Requisites:

Before getting started, we need to know what is MVC. As we would be dealing everything with MVC components.

Step 1:

Add a new project to Visual Studio. Select Asp.Net Web Application. Give a name to it. I have used “MVCGridDemo”.

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

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 Add a new controller from the below popup:

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

Step 3:

Then we add the main part i.e. 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 like below:

In the above image as you can see, I have red arrowed towards an option called Remove & 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 the consistency lets remove them. And we can remove them by right clicking on the class file and click on the above nested route i.e. Remove & 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; }  
    }  
}

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 mvc language 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 Manage Nuget package, then we directly search online for the Grid.MVC, we find the package reference with a install button beside. Click on that and wait for the successfully installed package.

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

Step 5:

Now after adding the reference of these two, its time to add hard coded values for the data collection to be shown in the grid or binded to the grid.

The list of the model class data would be added as below:

/// <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;  
       }

/// <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 above 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. Lets add code block into that method only. Lets add and then look into 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);  
        }   
       
    }  
}

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 above 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 lets discuss the codes inside the Action method.

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

Then we add and initialize the List of SuperDogs or the List of model class which 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 which we have hardcoded. Then as the view expects an IEnumerable/List of the SuperDog model we return the same into the view. Lets have a look at the view below:

@model IEnumerable<MVCGridDemo.Models.SuperDogs>

This is the model used in the view.

Now its 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))

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

The above using statement is required in the viewpage where the Grid would be used to make that accessible through 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 like below:

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

@using GridMvc.Html

@model IEnumerable<MVCGridDemo.Models.SuperDogs>

ViewBag.Title = "Index";

}

<html>

<head>

</head>

<body>

<hr />

@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() accepting a boolean value WithPaging() the value parameter suggests the number of records in the grid & the Titled() is used to add the title of the respective column. You can also see the reference for the StyleSheets(.css) & Scripts(.js) for the gridmvc and bootstrap too. Finally when we run the application using the url : “/SuperDog/Index” we get the below result:

The above is the final grid for the Page 1.

The above 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 below: 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.