Saturday, July 12, 2008

Web MVC Design Pattern and ASP.NET MVC Framework

Even though MVC was designed as a framework for desktop applications three decades ago - it fits quite well in web applications which require URL mapping or/and direct handling of http messages (requests/response); this article reviews the implementation of MVC in web applications of that nature and shows how MVC is used as base architecture in ASP.NET MVC Framework.

MVC for Desktop Applications

MVC design pattern was introduced in the early 80's as a framework for desktop applications; at the time, widgets didn't had the ability to process user inputs (e.g. mouse click, keyboard press) so MVC introduced the controller entity to act as a bridge between the user and the application; in the late 80's widgets came out of the box with the ability to process user inputs so the controller screened-out and MVC twisted into MVP. Even though MVP presenter has been often referred to as controller - the real controller (the one that process user inputs) stayed in the shadows until the introduction of browser based web applications.

MVC for Web Applications

In web applications the user interact with client side browser that summarize his activities as http request (POST or GET) and send it to the server, the server process the request (i.e. pulls data from the URL or from the request message body), performs some business operation and create response stream (HTML page) at which it send back to the client that renders it to the screen.

image

Collaboration

MVC components reside in the server - the model stores data and handles business logic like always, the view generates response stream (HTML page) according to model data, the controller processes user inputs summarized as http requests (POST and GET), commands the model, changes model state, creates the proper view that is downloaded to the client and rendered to the screen.  

image

Interaction

The 'Votes Counter' UI that is shown bellow has one simple use-case. [Trigger:] The user click on the 'Vote' button [Main Success Scenario:] the DB votes field is increased by one and the text-box display is updated with the current votes value.

image

MVC design for this UI will have one view object to generate the HTML shown above, one model object to increase the votes count and to hold the total votes amount, and one controller to process the post request initiated by the 'Vote!' button, command the model to increase vote, create the view to generate updated HTML and return the response to the client.

The diagram bellow shows how MVC objects interact.

image

MVC in ASP.NET

Quick way to get familiar with ASP.NET MVC framework if through this video.

ASP.NET MVC framework enables rapid implementation of MVC based web applications; it was designed specially for applications which require more control over the HTTP input/output than the traditional ASP.NET Web Forms allows. In the Web Forms model, the input goes into the page (view) that's responsible for both handling the input and generating the output, in MVC, the input goes into the controller that's responsible for handling the input, and the page (view) is responsible for generating the output. You can read more about 'Building Web Apps without Web Forms' here.

ASP.NET MVC Framework includes a URL mapping component that enables building applications with clean URLs; The application defines controllers that contains number of predefined actions where each action process specific request, the process sequence includes executing application logic and retrieving data from the domain model up to generating the response through a view component. The framework automatically maps URL's with friendly names ("/controller name/controller action/action parameters") to action in the controller class and invokes the action with the proper parameters.

image

Let's say that the URL '/Home/About/4l' is submitted from the browser, the framework will map the URL to 'About' action of the 'HomeController' class and invoke the action with the parameter '4', the action will do whatever application logic that it requires to do, gets some 'about' data from the model, creates the proper view and post back to the browser. 

Of course,  ASP.NET MVC Framework has a lot more features than I've mentioned, it supplies generic base classes for the views, it automatically bind the views to the domain objects, it supports using the existing ASP.NET .ASPX, .ASCX files and a lot more.

Interesting links

http://osteele.com/archives/2004/08/web-mvc

http://www.hanselman.com/blog/ASPNETMVCWebFormsUnplugged.aspx

Chris Tavares - Building Web Apps without Web Forms

7 comments:

  1. Hi g8 info.....

    more info http://anupravindran.blog.co.in/

    Thanks,
    Nikhil.

    ReplyDelete
  2. Hi I found few good tutorails on this blog.

    you can see them if you like

    http://aspnetcsharp4.blogspot.com/2009/05/first-look-vs2010.html
    http://aspnetcsharp4.blogspot.com/2009/05/c40-new-features-list.html
    http://aspnetcsharp4.blogspot.com/2009/05/variance-in-c-40.html
    http://aspnetcsharp4.blogspot.com/2009/05/whats-new-in-aspnet-40.html
    http://aspnetcsharp4.blogspot.com/2009/05/aspnet-40-core-services.html
    http://aspnetcsharp4.blogspot.com/2009/05/auto-start-web-applications.html
    http://aspnetcsharp4.blogspot.com/2009/05/ajax-and-new-template-engine-in.html
    http://aspnetcsharp4.blogspot.com/2009/05/shrinking-session-state.html
    http://aspnetcsharp4.blogspot.com/2009/05/routing-of-urls-capability-is-added.html

    http://aspnetcsharp4.blogspot.com/2009/06/access-twitter-api-using-c.html
    http://aspnetcsharp4.blogspot.com/2009/06/free-aspnet40-hosting-available.html
    http://aspnetcsharp4.blogspot.com/2009/06/lazy-evaluation-feature-in-c.html
    http://aspnetcsharp4.blogspot.com/2009/06/difference-between-shadowing-and.html

    http://aspnetcsharp4.blogspot.com/2009/07/microsoft-aspnet-40-data-access.html
    http://aspnetcsharp4.blogspot.com/2009/07/microsoft-aspnet-40-whats-next.html
    http://aspnetcsharp4.blogspot.com/2009/07/ajax-client-side-templating-in-aspnet.html
    http://aspnetcsharp4.blogspot.com/2009/07/jquery-in-aspnet.html
    http://aspnetcsharp4.blogspot.com/2009/07/c-interview-questions.html
    http://aspnetcsharp4.blogspot.com/2009/07/using-ajax-control-toolbox-with-jquery.html
    http://aspnetcsharp4.blogspot.com/2009/07/microsoft-interview-questions.html
    http://aspnetcsharp4.blogspot.com/2009/07/json-and-aspnet.html
    http://aspnetcsharp4.blogspot.com/2009/07/aspnet-questions-with-detailed-answers.html

    Thanks

    ReplyDelete
  3. Hi,

    It looks like the MVP link is misdirected (below the first picture). The MVP concepts are in:
    http://aviadezra.blogspot.com/2008/09/mvp-model-view-presenter-design-pattern.html

    While the current link points directly to the MVP Example Implementation in .Net (http://aviadezra.blogspot.com/2008/10/model-view-presenter-design-pattern.html).

    (the diference between the links is the "mvp" prefix in the article I suppose to be correct).

    nice article!

    ReplyDelete
  4. .net is one of the most user friendly software development platforms. ASP.net development gives the way to develop complex web applications and web pages. Even most of the Business Intelligence software are being made on .net platforms with integrating ASP.net as an essential functional part.

    ReplyDelete
  5. Hello there...Your post is so informative..
    Thank you for sharing such intereating article!..
    Keep it up!

    ReplyDelete
  6. I was looking Asp.net MVC Arch Class Diagram, and stumble upon this useful information. Thank you for sharing this.

    ReplyDelete