ASP.NET MVC 3 and jQuery – Two cookies for a <geek>

The evolution of the technology has always been on the radar for all the technocrats working in any technology vertical. The techies working on windows/.NET platform are no exceptions to it. The .NET framework supports the development of websites right from its inception. Today the ASP.NET has completely replaced ASP 3.0 with its numerous new features that easily facilitated the increase in the performance and responsiveness of the websites.

With the increase in popularity of the web, it became a challenge for many organizations to direct and nourish its technical talent towards web development who were writing win32 application previously. The developers and architects started writing business applications using ASP.NET webforms. The concept of code-behind and .aspx page followed the principle of separation of concerns by isolating the C# code from the HTML/server scripplets. This helped the HTML designers and C# coders to write their code simultaneously without being dependent on each other. This paradigm was widely accepted with the compromise on the code reusability. It wasn’t very easy to reuse the page or the part of the page with ASP.NET webform application.

ASP.NET MVC framework, being very close to ASP.NET, gives the cleaner and better separation of the UI (View), the event wiring/UI rendering code (Controller) and the data (Model). This framework gives the ability of reusing the UI (partial views) to a greater extent without worrying about duplicating the server-side code. The view can be visualized as the page or the user controls that is modified/updated independent of other controls on the same page.

View and partial views: The view/partial view is the user interface screen that is operated by the user of an application. Views are generally written using HtmlHelpers which are often understood as a wrapper over the intrinsic HTML/Server controls. The view usually contains HTML code, javascript/jquery code or quite a few partial views that shows different set of information from the rest of the view. The partial views usually have different controllers and model data. The sample view code looks as below:

Razor view (ASP.NET MVC 3): Razors are the new view engine that is available as a part of MVC v3 framework. It gives the easy and consistent way to write code. The scripplets (<% %>) are replaced by @. It reduces the keyboard strokes for a developer to focus more on its logic and functionality. The sample razor is shown below:

Controller: The controllers are the means of communication between views and application data. It captures the event raised by the user actions on the view and takes proper actions. It also helps the view to display data that are often referred to as an application domain model. The controller is a plain C# class which is inherited from Controller base class. It contains methods known as “Actions”. By default, the name of the view is same as the name of the action method. E.g.: The action method Create will render the view named Create, by default. Based on the type of HTTP method (verbs) the action method can be of two types: Get and Post. The Get action method gets executed when the user request particular URL and the view gets rendered. The Post method gets executed when user submits the form with the Submit button. The form data is encapsulated in FormCollection class and passed as the parameter to the respective Post method. The sample code is shown below:

Model: These are plain C# classes that represents the database entities. It is the actual data that are fetched by the controllers and/or repository layer from the database and shown on the view using ViewModels. ViewData is the ASP.NET MVC intrinsic object that facilitates the data communication between controller and view. Apart from this, ViewData can also acts as dictionary object that allows controller to add the custom data with the unique key.

Exception handling: ASP.NET MVC gives a mechanism to identify whether or not the model is in the valid state before operating on it. The AddModelError() adds the model specific error to the model and sets the state of the model (ModelState) to invalid.

The ASP.NET MVC framework does not have any limitations as compared to conventional ASP.NET webforms. It does not replace ASP.NET webforms. This essentially means that all the intrinsic controls and objects that are available in ASP.NET are also available in ASP.NET MVC framework. MVC comes with the advantage of flexibility and decent coding style. ASP.NET MVC partial views, if programmed as a widgets/web part, can be reused across multiple views/partial views analogous to gadgets in iGoogle! E.g.: The view for search can be reused for searching multiple domain entities in your system viz. it can be used to search the employees as well as the contacts without any major changes. The concept of the views gives a cleaner separation from the rest of the code so that the views can be changed/plugged in easily. There are other numerous articles on internet that gives a good insight of the ASP.NET MVC framework. It is a developer and product stakeholder's choice as to what framework to use for their web development.

jQuery – the open source javascript framework – has gained lot of popularity recently for developing large scale web products with very rich user interface. The jQuery gives the wide set of API’s to the UI developer to program against individual HTML elements. E.g.: With the power of jQuery the UI developer can manipulate table rows very easily (certainly “write less, do more”). Being an open source community framework there are lots of improvements happening on it to make it better and more robust. jQuery follows the javascript coding style. The sample jQuery code is shown as below:

[The code binds the click event on input element with the ID=’cmdSearch’ as soon as the view is rendered. The Search() gets the value of input element with the ID=’txtSearch’ and makes the ajax call].

The $(document).ready() [jQuery(document).ready()] event gets executed with the page’s body is loaded on the browser. jQuery is often abbrevated as $ symbol. Like .NET controls, jQuery also works on selectors (handle) of the UI elements. In above figure, two event handlers are wired to their respective UI elements in $(document).ready(). The developer may like to include the reference of jquery-1.5.1-vsdoc.js file on the view to get jQuery intellisense in the VS.NET IDE. Notice the usage of jQuery ajax api ($.ajax) that executes the action on the controller and fetches the data. Here, the searchFilter is passed to the HomeController’s Search() which is decorated with Post verb. The success callback function gets executed upon successful return from the controller’s action method. The callback function renders the view as the html to refresh the UI after returning search results. jQuery framework is the real-world example of lot of code.

</geek>