Click here to Skip to main content
15,115,261 members
Articles / Web Development / ASP.NET
Tip/Trick
Posted 23 May 2013

Tagged as

Stats

495.3K views
20.6K downloads
62 bookmarked

Using the Grid.MVC in ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.68/5 (33 votes)
23 May 2013CPOL2 min read
How to use the Grid.MVC in ASP.NET MVC

Introduction 

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.

Background

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:

C#
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:

C#
public class ClientController : Controller
{
    private readonly List clients = new List()
    {
        new Client { Id = 1, Name = "Julio Avellaneda", Email = "julito_gtu@hotmail.com" },
        new Client { Id = 2, Name = "Juan Torres", Email = "jtorres@hotmail.com" },
        new Client { Id = 3, Name = "Oscar Camacho", Email = "oscar@hotmail.com" },
        new Client { Id = 4, Name = "Gina Urrego", Email = "ginna@hotmail.com" },
        new Client { Id = 5, Name = "Nathalia Ramirez", Email = "natha@hotmail.com" },
        new Client { Id = 6, Name = "Raul Rodriguez", Email = "rodriguez.raul@hotmail.com" },
        new Client { Id = 7, Name = "Johana Espitia", Email = "johana_espitia@hotmail.com" }
    };
 
    public ActionResult Index()
    {
        return View(clients);
    }
} 

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

 Image 1

Also add Boostrap:

Image 2

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

Image 3 

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

 Image 4

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

Image 5 

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

C#
@model IEnumerable<Grid.Models.Client>
@using GridMvc.Html
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<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/jquery-1.9.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    <title>Index</title>
</head>
<body>
    <h1>Grid.MVC</h1>
    <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");
                    }).WithPaging(3).Sortable(true)
    </div>
</body>
</html>

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:


Image 6


I hope this post will be useful for you!

Best regards!

License

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

Share

About the Author

julitogtu
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 http://julitogtu.com/

Comments and Discussions

 
QuestionHow do I get NEW values from cell Pin
Member 1394405413-Jun-19 10:12
MemberMember 1394405413-Jun-19 10:12 
QuestionHow to make a conditional column? Pin
streezer1-Nov-16 1:00
Memberstreezer1-Nov-16 1:00 
QuestionIs it absolutely necessary to include Bootstrap? Pin
Rod at work24-Oct-16 8:49
MemberRod at work24-Oct-16 8:49 
PraiseBest Grid component for ASP.NET MVC Pin
streezer19-Oct-16 5:39
Memberstreezer19-Oct-16 5:39 
QuestionSeems the logic behind this component is not as I thought Pin
Pentamentum23-Sep-16 9:56
professionalPentamentum23-Sep-16 9:56 
QuestionFilter Columns not rendering. Pin
maninder198719-Jul-16 20:08
Membermaninder198719-Jul-16 20:08 
GeneralNicely explained. Pin
NaibedyaKar29-Feb-16 22:39
professionalNaibedyaKar29-Feb-16 22:39 
GeneralMy vote of 5 Pin
Dan Randolph22-Jan-16 12:16
MemberDan Randolph22-Jan-16 12:16 
Good advice on using the basic template. I also recommend starting with Visual Studio 2012. I tried the internet template for VS 2015 and I could not get it to work. Also "List clients" in the sample code should be List<client> clients ...

modified 29-Jan-16 15:32pm.

PraiseThanks everyone Pin
Dan Randolph22-Jan-16 12:06
MemberDan Randolph22-Jan-16 12:06 
QuestionSorting Not as expected Pin
Member 121197588-Nov-15 17:04
professionalMember 121197588-Nov-15 17:04 
QuestionPaging Problem Pin
Member 118788944-Nov-15 20:28
MemberMember 118788944-Nov-15 20:28 
AnswerRe: Paging Problem Pin
Member 1072063925-Dec-19 23:46
MemberMember 1072063925-Dec-19 23:46 
QuestionHow to call java script when we click on edit button Pin
Member 118057023-Jul-15 11:28
MemberMember 118057023-Jul-15 11:28 
QuestionNot working with MVC5 Pin
Member 1178858423-Jun-15 23:48
MemberMember 1178858423-Jun-15 23:48 
AnswerRe: Not working with MVC5 Pin
Alexandro Maceiras31-Aug-15 18:51
MemberAlexandro Maceiras31-Aug-15 18:51 
QuestionIs there a way to make the grid responsive? Pin
PhatKiwi2-Jun-15 8:47
MemberPhatKiwi2-Jun-15 8:47 
AnswerRe: Is there a way to make the grid responsive? Pin
Kiebor19-Nov-15 3:10
MemberKiebor19-Nov-15 3:10 
QuestionVB Syntax Pin
Lus Oliveira1-May-15 11:57
MemberLus Oliveira1-May-15 11:57 
AnswerRe: VB Syntax Pin
Lus Oliveira1-May-15 12:27
MemberLus Oliveira1-May-15 12:27 
AnswerRe: VB Syntax Pin
Kiebor10-Nov-15 23:56
MemberKiebor10-Nov-15 23:56 
Questionerror in jquery Pin
Member 1154251220-Mar-15 12:54
MemberMember 1154251220-Mar-15 12:54 
AnswerRe: error in jquery Pin
Lus Oliveira1-May-15 12:33
MemberLus Oliveira1-May-15 12:33 
QuestionNo GridMvc found when writing the @using Pin
GearWorld21-Feb-15 2:56
MemberGearWorld21-Feb-15 2:56 
AnswerRe: No GridMvc found when writing the @using Pin
Ju on Ice26-Feb-15 0:44
MemberJu on Ice26-Feb-15 0:44 
Questionpagentation lenth Pin
Member 1145842617-Feb-15 2:57
MemberMember 1145842617-Feb-15 2:57 

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

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