Click here to Skip to main content
Click here to Skip to main content

Using the Grid.MVC in ASP.NET MVC

, 23 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to use the Grid.MVC in ASP.NET MVC


Most of times we will have to show data in our apps, but we need to provide different features like paging, filtering, sorting and much more, so the Grid.MVC provides amazing tools for that goal when we develop applications using ASP.NET MVC.


This article shows how through the Grid.MVC you can use features like paging, filtering and sorting.

Using the code   

Firts step: create a new ASP.NET MVC 4 application, I recommended to use the basic template.

Next, lets create a new class Client, this class will be the model:

public class Client
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }

Now that you have the model done, lets create the Client controller. This controller have only on action, and the data source will be a List, but here you can connect to a database, the action returns the data:

public class ClientController : Controller
    private readonly List clients = new List()
        new Client { Id = 1, Name = "Julio Avellaneda", Email = "" },
        new Client { Id = 2, Name = "Juan Torres", Email = "" },
        new Client { Id = 3, Name = "Oscar Camacho", Email = "" },
        new Client { Id = 4, Name = "Gina Urrego", Email = "" },
        new Client { Id = 5, Name = "Nathalia Ramirez", Email = "" },
        new Client { Id = 6, Name = "Raul Rodriguez", Email = "" },
        new Client { Id = 7, Name = "Johana Espitia", Email = "" }
    public ActionResult Index()
        return View(clients);

Before create the view, will need to add a Grid.MVC package using Nuget:


Also add Boostrap:

When the Grid.MVC package is installed, you can found some new views in the Views/Shared folder:


In the scripts folder, tree new JavaScript files will be found:


And in the content folder now you see the css file for the Grid:


Next step now is to create a new View for the action Index of the controller Client, like this: 

@model IEnumerable<Grid.Models.Client>
@using GridMvc.Html
    Layout = null;
<!DOCTYPE html>
    <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/jquery-1.9.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    <hr />
    <div style="width:500px;">
        @Html.Grid(Model).Columns(columns => 
                        columns.Add(c => c.Id).Titled("Client ID");
                        columns.Add(c => c.Name).Titled("Name").Filterable(true);
                        columns.Add(c => c.Email).Titled("Email");

The key parts on the code are:

  • Add: @using GridMvc.Html 
  • Add the references to the css files
  • Add the references to the JavaScript files

To use the Grid, use the HTML Helper @Html.Grid, some important properties for the helper:

  • Titled: The column title
  • Filterable: Define if the column has the feature to be filterable
  • Sortable: Define if the column has the feature to be sortable
  • WithPaging: Define the number of rows to show for page 

Finally, you have the following cool Grid:

I hope this post will be useful for you!

Best regards!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) BDotNet
Colombia Colombia
Microsoft ASP.NET MVP, I love software development, especially web development, I have worked with Microsoft technologies for about five years in the development of large scale enterprise applications, co-creator of several Carreras for the Microsoft Virtual Academy (MVA), speaker at events Microsoft Colombia and member of the Core Group BDotNet community. You can see some of my contributions in
Follow on   Twitter   LinkedIn

Comments and Discussions

Questionerror in jquery PinmemberMember 1154251220-Mar-15 12:54 
QuestionNo GridMvc found when writing the @using PinmemberGearWorld21-Feb-15 2:56 
AnswerRe: No GridMvc found when writing the @using PinmemberMember 1148159726-Feb-15 0:44 
Questionpagentation lenth PinmemberMember 1145842617-Feb-15 2:57 
QuestionCustom Filter Widget PinmemberMember 1079137331-Jan-15 8:15 
QuestionClick on Page PinmemberHenrique Bueno27-Jan-15 5:55 
GeneralMy vote of 5 PinprofessionalAbhishek Pant31-Dec-14 22:33 
QuestionRe: How to perform Edit and Delete operations to it? PinmemberMember 112973949-Dec-14 1:55 
AnswerRe: How to perform Edit and Delete operations to it? Pinmemberjulitogtu17-Dec-14 6:55 
GeneralRe: How to perform Edit and Delete operations to it? PinmemberShravan13717-Dec-14 18:57 
QuestionNice PinmemberNavin Pandit8-Dec-14 4:38 
QuestionSounds Great .. PinmemberMember 1127118628-Nov-14 2:32 
GeneralMy vote of 2 PinmemberLyubomir Rumenov Velchev26-Nov-14 8:21 
SuggestionNo added value... PinmemberLyubomir Rumenov Velchev26-Nov-14 8:20 
QuestionNullpointer at paging/ reload PinmemberPixelparker23-Sep-14 23:55 
QuestionSelected Row on the Grid PinmemberMember 1081881817-May-14 6:09 
QuestionHi, I'm having a great headache with this. PinmemberGabriel Battista29-Apr-14 11:58 
AnswerRe: Hi, I'm having a great headache with this. PinmemberMember 1102362319-Aug-14 21:57 
QuestionDisplaying # of items Pinmembercss294-Apr-14 15:06 
QuestionHow to refresh the Grid using jquery. PinmemberSaurabh Shekhar0524-Mar-14 3:47 
Questionsearch textbox and paging? Pinmemberdjramc21-Mar-14 8:28 
QuestionWeb Forms PinmemberLus Oliveira2-Mar-14 0:06 
Questioninner join with grid mvc. Pinprofessionalravikhoda25-Feb-14 21:12 
QuestionRetrieve record from the displayed list PinmemberMember 105720025-Feb-14 7:55 
QuestionHow to add a column for display purpose? PinmemberMember 1055601128-Jan-14 10:25 
GeneralMy vote of 5 PinmemberMember 1032399326-Jan-14 0:06 
QuestionGrid.MVc Pinprofessionalravikhoda1-Jan-14 1:48 
QuestionSQL Database part in controller Pinmemberjasket12329-Aug-13 5:20 
AnswerRe: SQL Database part in controller Pinmemberjulitogtu2-Nov-13 9:37 
QuestionNeed Help Pinmemberrocky00519-Aug-13 13:40 
QuestionActionLink PinmemberMember 13432712-Aug-13 14:47 
AnswerRe: ActionLink PinmemberArkady Geltzer4-Oct-13 4:32 
GeneralRe: ActionLink Pinmembertncchairman12-Dec-13 17:56 
QuestionAbout Row Modification Pinmemberdeo cabral5-Aug-13 18:52 
AnswerRe: About Row Modification Pinmemberjulitogtu2-Nov-13 9:42 
AnswerRe: About Row Modification Pinmemberdeo cabral14-Nov-13 13:48 
QuestionGrid.MVC scrooling large datasets.. [modified] Pinmemberflyingfishnm4-Jul-13 5:38 
AnswerRe: Grid.MVC scrooling large datasets.. Pinprofessionaljulitogtu15-Jul-13 8:13 
QuestionRe: Grid.MVC scrooling large datasets.. PinmemberLeBarros27-Jul-14 8:19 
QuestionBootstrap PinmemberJohn B Oliver6-Jun-13 13:25 
AnswerRe: Bootstrap Pinprofessionaljulitogtu7-Jun-13 7:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150326.1 | Last Updated 23 May 2013
Article Copyright 2013 by julitogtu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid