Published: 22 Jul 2011
By: Abhijeet Pandit
Download Sample Code

This article explains how to use MVC.Controls 1.4 with MVC3. You can also integrate JQGrid with Razor View – Engine support. For me, this code is a simple way of separating presentation from the controller, and most importantly, use of the Lesser GPL.

Contents [hide]

Introduction

Initially I was finding it difficult to learn what options and features are available and supported for MVC 2 and 3 for JQGrid. And after coming across these MVC.Controls, it was much easier for me to implement the MVC along with JQGrid

Pre-requirements for application

First, download the jQuery ASP.Net MVC Controls from the following site:

http://mvcjquerycontrols.codeplex.com/releases/view/67374

This version supports new features like:

  • Razor View-Engine support
  • Custom pager support
  • Full Search & Ordering support (including multiple filters)
  • Cleaner Controller grid configuration
  • Grid toolbar buttons support

This download provides following 3 items:

  • Content
  • Scripts
  • MVC.Controls.dll

Basic set up of MVC.control for MVC web site

Create a sample ASP.Net MVC 3 Web Application by using Visual Studio 2010:

Further provide reference of "MVC.Controls.dll" to the application:

Figure 2: Reference in the project

Reference in the project

You will further need to overwrite the Content and Scripts folder in the root directory of your application:

Final thing we need to do, is add links to the scripts and styles from our asp.net views.

Instead of manually adding this links to every view, it simpler to go directly to Site.Master (located in the Shared folder) and in the head tag, add the following:

Note

When using the Razor view engine, instead of Site.master, you get a file called _Layout.cshtml under the Shared folder which is basically the Razor equivalent of Site.master.

Database Design:

For this example I am using following Database structure:

Figure 3: Reference in the project

Reference in the project

Entity and Models

In this section you'll add some classes for managing records in a database. These classes will be the "model" part of the ASP.NET MVC application.

We will be using the Model property to access the strongly-typed List of Employee, which we will pass from our Controller. We are doing this just like we would within .aspx view templates.

If using MVC 3 with Razor, it supports a View property which allows us to access un-typed ViewData passed to the view template. View is a dynamic property (a new feature of .NET 4) - which gives us a slightly cleaner syntax when accessing ViewData. Instead of writing ViewData[“Cateogry”] we can now just write View.Category.

We will add EMP and DEPT model in the application. For that you can right click on the Models folder and select Add, and then Class. You can then modify the code as follows:

Listing 1: EMP.cs

Listing 2: DEPT.cs

Create Entity Model

Now to implement the Entity Framework, we will need to create an Entity Data Model. You can take advantage of the Visual Studio Entity Data Model Wizard to generate an Entity Data Model from a database automatically.

Add EMP_Model.edmx by doing right-click on the Models folder in the solution explorer. The Entity Designer generates a set of C# classes. You can view these classes by opening the EMP_Model.Designer.cs file from the Solution Explorer window.

Figure 4: Entity Model Class

Entity Model Class

There is no essential connection between ASP.NET MVC and the Microsoft Entity Framework. There are several alternatives to the Entity Framework that you can use with ASP.NET MVC. For example, you can build your MVC Model classes using other O/RM tools such as Microsoft LINQ to SQL, NHibernate, or SubSonic.

Entity Controller

First include following code so that controller will get compiled properly:

Further we will modify HomeController.cs class to add the List method. This List method will be linked by Grid.SetListUrl in the index page.

Listing 3: HomeController.cs

We have used IQueryable extension method ToGridData, so that our model can be converted into a data structure that can be identified by grid, since grid requires a special formatting of the data.

From Index page, grid code will send the Controller the following 4 arguments: the page requested, the maximum amount of rows the resulting page can show, and the filtering and ordering parameters defined by the user.

We have also defined a list of all the properties bound to columns while converting model to the grid data structure.

This is important to reduce the network overhead of transferring the entire model to the client when we require only a part of its information.

Finally we will update Home/Index.aspx to implement the grid structure. First import the following to assemblies into the page by adding following code:

Next, in the <asp:content> control, add the following code to initiate the grid:

Following are parameters which we have used in the grid:

  • Grid.SetName - (Mandatory) Each grid control must have a unique id.
  • Grid.SetPgeSize - (Optional) Sets the page size of the grid.
  • Grid.SetIsAutoSize - (Optional) Set grid's width can be manually configured, or automatically calculated by size of its container.
  • Grid.SetListUrl - (Optional) The grid data source can be configured in 2 manners: paged using ajax requests to the server, or local data stored in json.
  • The SetListUrl method tells the grid what action to (ajax-ly) invokes in order to populate the grid. we will discuss later the action parameters, and the local data alternative.
  • Grid.SetHeight - (Optional) Sets the grid's height
  • Grid.AddColumn - (Mandatory) Each grid column is modeled using the GridColumnModel class. we will later discuss the GridColumnModel different attributes but the default most simple configuration requires only one argument which will be used both as a title for the column, as well as a binding path (e.g if the grid is bound to a List<Product>, new GridColumnModel(“Name”) will bind the column to Product.Name).

Please note that, In MVC architecture, views are not always bound to a strongly typed model (anonymous types, dynamic classes), so it would be good to have the option to bind a column to a string

However, we can still specify a caption (and any other option) for the column explicitly to allow better flexability, for instance:

Or:

Also, One of the many columns a grid has, must be declared as Primary key using the GridColumnMode.SetAsPrimaryKey() method, though if we don't want this column to be shown, you can use the GridColumnModel.SetHidden(true) method.

There is final look once we get all the code at appropriate places:

Figure 5: Grid View

Grid View

Summary

I have explained the new features and better file structures of ASP.net MVC alogn with JQuery. This new version is completely agnostic to jquery and jqgrid verions thus enabling a better less intrusive project integration. In the next series, I'll explain other functions like Add/Modify/Delete of database.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Abhijeet Pandit

Sorry, no bio is available

This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.

You might also be interested in the following related blog posts


ASP.NET MVC2 Preview 2: Areas and Routes read more
MvcContrib working on Portable Areas read more
Video: DevExpress Plans For ASP.NET MVC read more
ASP.NET have left the track? read more
MvcContrib version control has moved to GitHub read more
The ASP.NET MVC ActionController The controllerless action, or actionless controller read more
Going Controller-less in MVC: The Way Fowler Meant It To Be read more
Binding in ASP.NET MVC read more
ASP.NET MVC 2.0 and VS 2010 plan now public read more
ASP.NET MVC and the templated partial view (death to ASCX) read more
Top
 
 
 

Please login to rate or to leave a comment.