Over a million developers have joined DZone.

Using MVC Grid In MVC

DZone's Guide to

Using MVC Grid In MVC

Using the MVC grid, which uses bootstrap and jQuery, to create dynamic data and manipulate it.

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

In this post we will see how we can develop an MVC grid in our MVC application. Here we are going to use a grid called MVC grid, which uses bootstrap and jQuery. We will create some dynamic data using list first, and once it is done we will send this data to the MVC grid. 

Download Source Code

Download the source code from here: MVC_GRID_IN_MVC.rar


I have been working with Grid controls for a long time. So far I have worked with jQX Grid, jQ Grid, jQuery Datatables, Pivot tables, KO grid, and others. It is always interesting to work with some controls. Recently I worked with MVC grid so I thought to share that experience.

Create an MVC application

First, we will start with creating an MVC application. Open your Visual Studio, then click File->New->Project. Name your project.

Install MVC Grid

The next step we are going to do is, installing the MVC grid to our project. To install, please right click your solution and click on Manage NuGet packages.

Image title

Select NuGet Package

Now you can see a new window. Search for MVC grid in the search box. And then click Install.

Image title


Once you installed, you can see a new reference file has been added (GridMVC), and you also notice that two views are created (_Grig.cshtml,_GridPager.cshtml) and one CSS file and some scripts. Now we will move to our next step.


As I said before, MVC grid uses Bootstrap for design. Next we need to install Bootstrap in our project. For that, go to NuGet packages again and search for Bootstrap.

Image title


You can see some new CSS files and scripts has been added to our project. So the set up has been done, and now we need to move on to the coding.

Create a Controller

Now we can create a new controller, in my case I created a controller ‘HomeController’. In my controller I am going to call a model action which will return some dynamic data. See the code below.

public class HomeController : Controller
        // GET: /Home/

        public ActionResult Index()
            Test t = new Test();
            var myList= t.GetData();
            return View(myList);


As you can see I am creating an instance of my model Test. Now we will create our model class. 

Create Model

I have created a model class with the name Test. Here I am creating some data dynamically using a for loop and assigning those values to a list. See the code below.

namespace AsyncActions.Models
    public class Test
        public List<Customer> GetData()
                List<Customer> cst = new List<Customer>();
                for (int i = 0; i < 100; i++)
                    Customer c = new Customer();
                    c.CustomerID = i;
                    c.CustomerCode = "CST" + i;
                return cst;
            catch (Exception)
                throw new NotImplementedException();

    public class Customer
        public int CustomerID { get; set; }
        public string CustomerCode { get; set; }

As you can see I am creating a list of type Customer. What's next? Yes, a view.

Create a Strongly Typed View

Now we are going to create a strongly typed view.

Image title


Our view is ready, so now we can do some coding in our view to populate our grid. Are you ready? First thing is to include the needed references to our view, which you can do in the file called Layout.cshtml. Here I am going to add those references directly to the view.

<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>

Add the Grid Namespace

You can add the grid namespace as follows.

@using GridMvc.Html

To add a MVC grid as our requirement, you need to add the codes as below:

@Html.Grid(Model).Columns(columns =>
               columns.Add(foo => foo.CustomerID).Titled("Customer ID").SetWidth(50).Sortable(true).Filterable(true);
               columns.Add(foo => foo.CustomerCode).Titled("Customer Code").SetWidth(50).Sortable(true).Filterable(true);

As you can see we are using the columns Customer.CustomerID and Customer.CustomerCode.


Image title


Add More Grid features

To set the paging we can use the option WithPaging(20).
To add title we can use Titled property.
To set width we can use SetWidth property.
To set sort we can use Sortable property.
To set filter we can use Filterable property.

You can always see the additional options here .

#1 for location developers in quality, price and choice, switch to HERE.

mvc ,bootstrap ,javascript ,jquery

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}