Using jQGrid w/ ASP.net MVC

Before we begin, you must have:

  • An MVC 2/3 project ready to go in Visual Studio 2008/2010
  • An existing DB with some data you can query into
  • Latest version of jQuery, jQGrid and jQuery UI scripts referenced

In this post, we will cover:

  • Creating a basic model
  • Creating a view-model for jQGrid
  • Getting data from a data context and return the Json data that will be mapped to the jQGrid columns

We will split this into three parts, as with any MVC application:

  1. The Model
  2. The View
  3. The Controller
Model

Our simple car table is setup as:

Now let us setup a corresponding model for the DB. We will include the table fields as properties, some standard data annotation validations and one custom validation routine as well.

Things to note:

  • Validation won’t really be used until we add some sort of Create or Edit function to our grid
  • Data annotations validations works when data is POST-ed back to the server

 

View

When using the jQGrid, your view is more than just a view, it sort of becomes the view-model as you will have to redefine your model so that they can properly map into your grid columns. For the sake of this example, we will define a simple jQGrid, some options and some custom formatting as well.

Things to note:

  • Always try to use strongly-typed views. That way you won’t have to completely rely on jQuery to get your model values.
  • You will have your MVC Html helpers handy to access your model data elsewhere on the page as well.

Your code for the view should look something like this:

Controller

Finally, the meat of it all goes into the Controller that sets up the grid and returns the data. Here is what your code should look like:

Things you can add:

  • Sorting function – A simple OrderBy(sidx + “ “ + sord) on the LINQ Query should do the trick.

That’s it! This should not be ready to build and run. Here is how this all should come together as:

Tags:
Blog Comments

Great Write up! Saved me hours of headache. Thanks!

I’m glad it helped 🙂

Leave a Comment