ASP.Net MVC 2 with Entity Framework, JSON, JQuery and JQGrid

 

Download Source Code (Please update attached DB file name in web.config to your download folder)  Application username/password : admin/admin

 

Introduction

Here I am presenting an ASP.MVC 2 ( MVC 3 also released) application with complete working solution ready to download. I have created a sample banner configuration application where you can learn beauty of MVC, Jquery, Jqgrid and entity framework . I have implemented even double click edit for each Grid row. It is a new generation high performance application and also it is very user friendly. Microsoft has taken a good step by underlying three main technologies (ASP.Net MVC, Entity framework and ASP.Net Dynamics) for future. Recent Microsoft updates shows that Microsoft pushing Silverlight to Windows Mobile development since HTML5 is coming almost all silverlight features.  This article guides to learn about ASP.Net MVC2 with following additional technologies

Technologies used in this application

1,  ASP.Net MVC2

2,   JQuery

3,   JQ grid

4,   Entity framework

5,   MVC client side validation

6,   JQuery UI validation

7,   SQL Server 2008 R2

This article contains following important sections

 

1. MVC Routing and folder structure

   I hope many people might have confused with MVC folder structure and naming of controllers, views and actions. Main confusion is whenever user is making an ajax call, he does not need to follow folder structure ( I mean user does not need to create a view with exact action name), it is very straight forward controller/action . This is because of Ajax call does not need a form submit and so view rebinding is not required. Maintain folder structure is required whenever form do a server side submit.

   

 

2. JSON serialization and Value Provider Factory

 

ASP.Net MVC 2 and 3 has provided built in classes for JSON serialization and de-serialisation. Almost everything looks like MVC framework automatically serialising JSON data to corresponding properties of objects given as arguments in action method. If an action is expecting some more values from view like grid settings or kind of operation then create another class or dynamic object and give as an argument in action method.Following Code to configure provider for JSON model binder. JsonValueProviderFactory is a provider class inherits from ValueProviderFactory

protected void Application_Start()
      {
          AreaRegistration.RegisterAllAreas();
          RegisterRoutes(RouteTable.Routes);
          ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
          //ControllerBuilder.Current.SetControllerFactory(new CustomControllerFactory());
      }

 

 

3. JQGrid display and editing

Display data in a Grid and operations add, edit and delete can be done easily with the help of JQ Grid. I do not want to talk more about the source code level since I have given everything in downloadable source code. Below is the screen shot of populating data through JQ grid and Edit Record.

 

4. Form validation

Form validation in MVC application can be done in two ways Jquery validation and MVC client side validation. MVC client validation is one of great feature of MVC2 and it can be done easily based on data notation at the model(Entity) level. Here I would like to talk about MVC client side validation since I hopes everybody knows about JQuery UI validation. Below picure shows MVC client side validation.

It can be done by following steps MVC client side validation can be done. Include following script files

 <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

And add a client validation tag in view as show below

<% Html.EnableClientValidation(); %>

Given Data notation is given below for logon model

public class LogOnModel
    {
        [Required(ErrorMessage= "User Name is required")]
        [DisplayName("User name")]
        public string UserName { get; set; }

        [Required(ErrorMessage = "Password is required")]
        [DataType(DataType.Password)]
        [DisplayName("Password")]
        public string Password { get; set; }
       
    }

 

5. Custom editing in JQGrid

Custom editing is required when user is required to be presented with some more information other than what is there in grid or new form to bring up some other new UI fields to enter or assign some fields. It is definitely possible with overriding JQ grid edit event. Below is the picture shows custom editing form and attached code shows full implementation.

Conclusion

I was really impressed while creating this ASP.Net MVC with JQ grid, the way UI behaves and of course the performance with entity framework. I want to concentrate same area for future and present lot new other articles in same technology area. Hopes everybody will enjoy reading.. Please let me know if anybody have any suggestion and also any issue with running attached code….happy reading….