ASP.Net MVC2 - All in One with JSON and Entity Framework

Introduction

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 has almost done with WPF and Silverlight and they do not see much future in same since HTML5 is coming almost all features. Some of the HTML 5 features are already available in IE 9 and have a look. This article guides to learn about ASP.Net MVC2 and also probably can do a comparison between scope of two main web technologies (ASP.Net MVC, JSON, HTML5) and (Silverlight).

Technologies used in this application

1, ASP.Net MVC2

2, JQuery

3, JQ grid

4, Entity framework

5, MVC client side validation

6, JQeury UI validation

7, SQL Server 2005

This article contains following important sections

1. Future of ASP.Net MVC and Silverlight

Silverlight application is mainly used to create rich user interface applications easily and it has lots of advantages from a developer point of view but sometime end user will hate Silverlight application when seeing “Loading…” message on web page. But one big advantage for Developers is that they do not need to worry about different browser compatibility and can create rich UI easily in with XAML and MS Blend. One disadvantage of Silverlight application is zap file size, suppose 5mb zap file that has to be download to client side for first time and also each time whenever there is a change in silver light application (for each build) and also same time if Silverlight is not installed then even that has to be downloaded and installed in client side. But compare to Silverlight an average page size of an MVC application will be around 100kb that means user can navigate 50 pages compare to download Silverlight 5 mb zap file. I am just not telling that Silverlight is so bad as we all know it has lots of nice features.

MVC application with JSON is much lighter than Silverlight and it doesn’t need any client installation or any download. For an example Gmail is very fast and stable and it is completely working on JSON. So once HTML 5 is lunched with almost all Silverlight features then for sure, Microsoft will not concentrate much on Silverlight and they will come up with something new as their marketing strategy. Below picture shows the continuous improvement in script engine, browser, HTML, web technologies like ASP.Net MVC and Silverlight and how do they work together to deliver best web application.

2. 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 doesn’t need a form submit and it is a asynchronous call from a view. Maintain folder structure is required whenever form do a server side submit

3. 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

public class JsonValueProviderFactory : ValueProviderFactory
{
public JsonValueProviderFactory();

public override IValueProvider GetValueProvider(ControllerContext controllerContext);
}

It has the flexibility to configure custom model binder as well.

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

4. 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 don’t 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.

5. 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; }

}

6. Custom editing in JQGrid

• Download Banner - 1.01 MB

<Data base script file is added in same folder. Create DB by executing script and update web.config before running the application. This solution is not good to use for any application directly as it has lots of junk code>

Conclusion

I was really impressed with 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....