Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 22 Jul 2011
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.
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:
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:
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
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:
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.
For this example I am using following Database structure:
Figure 3: 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
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
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.
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.
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
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:
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
There is final look once we get all the code at appropriate places:
Figure 5: Grid View
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.
Sorry, no bio is available
This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.