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.