Click here to Skip to main content
Click here to Skip to main content
Go to top

Using a SlickGrid within an ASP.NET MVC 3 Application

, 12 Apr 2012
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to use SlickGrid within an ASP.NET MVC 3 application.

Introduction

This article is intended to be a quick start guide to implementing a grid within an ASP.NET MVC application. Keeping it simple is key here so I don't want to get distracted with code that's not related to the grid, so with this in mind a number of best-practice design liberties have been taken.

I've tried to use as little code as possible to demonstrate how to drive the grid from an MVC controller by passing JSON-encoded data.

The source code was created with Visual Studio 2010 and tested on Windows 7 but it should compile with Mono and run on Linux/OS X machines too.

Background

There are many excellent JavaScript grid components available that I could have used but I've chosen SlickGrid as it is established, actively developed, and has great documentation. In addition to this, SlickGrid has a reputation for being lightning fast.

Create a new ASP.NET MVC Web Application

Open Visual Studio and create a new ASP.NET MVC 3 Application:

Create the ASP.NET MVC project

When prompted, select "Internet Application" as the template and the view engine as "Razor".

Add SlickGrid to the project

SlickGrid is currently hosted on GitHub and can be downloaded from here.

Download and extract the archive and copy the following files into the project Scripts directory and add them to the project:

  • slick.core.js
  • slick.grid.js

SlickGrid also has a dependency on jquery.event.drag, this should be included in the above archive so copy that into the Scripts folder and add it to the project as well:

  • jquery.event.drag-2.0.min.js

Finally add the SlickGrid stylesheet to the Content directory and add it to the project:

  • slick.grid.css

Create some dummy data in the Controller (HomeController.cs)

The first thing to do is define a class for the data type we want to display in the grid. To keep things simple, the following class is defined in HomeController.cs:

[Serializable]
public class Player
{
	public int ShirtNo { get; set; }
	public string Name { get; set; }
}

Now a dummy method is implemented to return data that can be displayed in the grid. Again this is implemented in the HomeController class within HomeController.cs:

public string ArsenalX11()
{
    List<Player> theSquad = new List<Player>{
        new Player{ShirtNo=4, Name="Mertesacker"},
        new Player{ShirtNo=5, Name="Vermaelen"},
        new Player{ShirtNo=7, Name="Rosicky"},
        new Player{ShirtNo=8, Name="Arteta"},
        new Player{ShirtNo=10, Name="Van Persie"},
        new Player{ShirtNo=11, Name="Santos"},
        new Player{ShirtNo=13, Name="Szczesney"},
        new Player{ShirtNo=14, Name="Walcott"},       
        new Player{ShirtNo=17, Name="Song"},
        new Player{ShirtNo=19, Name="Wilshere"},
        new Player{ShirtNo=28, Name="Gibbs"}
        };
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(theSquad);
}

JavaScriptSerializer requires System.Web.Script.Serialization, to add this, right click on JavaScriptSerializer and Resolve.

We're returning JSON data here as it's a simple format that can be fed directly into SlickGrid so this takes us nicely onto the next step.

Define the grid in a JavaScript file

Create a new JavaScript file in the Scripts directory and call it SlickGridTest.js.

This JavaScript in the SlickGridTest.js file will do the following:

  • Define the grid columns
  • Request the data from the HomeController

The JSON encoded data from the controller is loaded via the jQuery call getJSON().

var grid;
var columns = 	[
					{ id: "ShirtNo", name: "ShirtNo", field: "ShirtNo" },
					{ id: "Name", name: "Name", field: "Name" },          
                ];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

$(function () {
    var myData = [];
    $.getJSON('/Home/ArsenalX11', function (data) {
        myData = data;
        grid = new Slick.Grid("#teamGrid", myData, columns, options);
    });
});

Note that the columns are hard coded for simplicity, but they could easily be setup via data received from the controller as per the content. Refer to the SlickGrid documentation for more information.

With the JavaScript in place, the last task is to define the grid in the Home View.

Add the grid to the View (Home\Index.cshtml)

The final step is to display the grid within the view, this requires adding the references to SlickGrid and the above SlickGridTest.js file:

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.event.drag-2.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridTest.js")" type="text/javascript"></script>

Adding the grid is now simply a case of specifying it within a div:

<table width="100">
  <tr>
    <td>
      <div id="teamGrid" style="width:400px;height:300px;"></div>
    </td>
  </tr>
</table>

Finished!

Press F5 to run the application and see the grid in action:

Run the Application

History

  • 11 April 2012: Initial post.

License

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

Share

About the Author

Matthew Laver
Software Developer
United Kingdom United Kingdom
No Biography provided
Follow on   Google+

Comments and Discussions

 
Questiondynamic column names PinmemberAnish Man Shrestha1-Sep-14 1:03 
QuestionExcellent for Started Pinmemberhk_hector5-Jun-13 12:51 
QuestionExcellent for Started Pinmemberhk_hector5-Jun-13 12:49 
QuestionThanks! PinmemberArsenalFan90924-Apr-13 4:57 
QuestionQuestion about ? PinmemberChamiss18-Mar-13 10:17 
QuestionExcellent Article Pinmemberraajesshh4-Feb-13 1:33 
Questionhi Pinmembershalinibharani1-Jun-12 1:56 
BugDidn't work with IE8, no problem with IE9, Firefox or Chrome. Fixed after some testing and thinking. [modified] PinmemberEffice10-May-12 10:26 
Questiongood article PinmemberMember 87543775-May-12 0:08 
AnswerRe: good article PinmemberMatthew Laver7-May-12 22:13 
SuggestionRe: good article PinmemberHalDiggs28-Jun-12 10:02 
GeneralRe: good article Pinmemberase69s29-Nov-12 0:29 
AnswerRe: good article PinmemberMember 97024538-Jan-13 6:41 

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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 12 Apr 2012
Article Copyright 2012 by Matthew Laver
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid