Monday, November 24, 2014

ASP.NET MVC from ASP.NET developer's view

This post is about having first look at the ASP.NET MVC from ASP.NET developer’s view. If you are ASP.NET developer and trying to understand ASP.NET MVC for the first time then this is right post to read. This contains basic understanding for difference between ASP.NET and ASP.NET MVC at very high level. Learn to create first ASP.NET MVC application step by step with explanation. At end will understand some basic difference between ASP.NET and ASP.NET MVC

As an ASP.NET developer wanted to understand why to use ASP.NET MVC. When searching on internet found many article, blog and documentation about MVC and how it works. There are very few that ramps up ASP.NET developer on ASP.NET MVC. Being ASP.NET developer can understand how comfortable it is to create one page with rich set of user controls, wire up with C# code and manage state using different state management techniques. It has full control of events on each element on UI and smooth way to handle each event in code behind. ASP.NET with AJAX add one more point to this list.

Consider requirement to develop simple login page in ASP.NET. Very simple to add controls, Validation controls, JavaScript and code behind to handle database operations. In just few hours one can build quality login page. It should be safe to assume that every ASP.NET developer heard about ASP.NET MVC but not really sure how it works and what is take to build same login page just discussed.

Let’s quickly take an overview of what does MVC means to ASP.NET developer. To understand it think of ASP.NET HttpHandler. ASP.NET MVC is using HttpHandler to make things work. For example, consider creating ASP.NET HttpHandler accepting query string parameter. A query string parameter is nothing but static method returning HTML. So, http://testsite/myhandler.aspk?m=RenderInput will render HTML output on browser by executing code from static method named RenderInput. Similarly other method will return different HTML. So here single HttpHandler (say page) is able to render different HTML based on URL. ASP.NET MVC is built on same concept. Every URL is structure similar to RESTful service. ASP.NET Handler gives great control over HTML rendering in browser but require configuration to register handler, error handling, state management and security. Inside methods, once can use ASP.NET Rich UI control to render expected output.


Here is how to create simple ASP.NET MVC application from scratch?

Let’s skip ASP.NET HttpHandler implementation and straight forward get into practical by creating simple ASP.MVC application. This example is done using ASP.NET MVC 4 but it really does not matter for understanding concept. Below are simple steps to create ASP.NET MVC application having one page displaying “This is my First ASP.NET MVC Application” in browser.

  1. Start Visual Studio (Example is using VS.NET 2012)
  2. Go to File | New | Project
  3. Select ASP.NET MVC 4 Web Application. (Choose project name location to save as per your machine settings) and click OK
  4. Next Select an Empty Template as shown below. Leave View Engine to Razor as default. View Engine is separate topic not converting here. Click OK. We have selected Empty Project Template to build sample from scratch without any readymade stuff. This will give a clear understand of building block of ASP.NET MVC application
  5. Empty Template will have default pages and project structure as shown below. Things to note are is the folders with fixed name. Every ASP.NET MVC application have 3 main folders Controllers, Models and Views.
  6. Open RouteConfig.cs, the default code is Please note default values here. We will see what does it mean as we build the application
  7. To create simple page displaying “This is my First ASP.NET MVC Application”, first we need to create controller. Please watch naming convention carefully because it must be followed for application to work
  8. Right Click Controller folder and select Add | Controller. In Add Controller dialog give name HomeController. Things to note here is that every controller files must end with “Controller”. We gave name HomeController because Home is default controller as specified in RouteConfig.cs
  9. HomeController.cs will have following default content
  10. Update this code as below. This complete our controller
  11. Next step is to create a View. To create View right click Views folder and select Add | New Folder. Give Folder Name same as Controller. i.e. Home. Controller name and folder name inside View folder must match. In this case Home.
  12. Right Click Home folder and select Add | View. In view name enter Index. The name must be Index as it is default action in RouteConfig. Click Add
  13. This will create Index.cshtml file. Update content of file as shown below. @Viewbag.ResponseContent will print content set in HomeController.cs
  14. Run Application and see application is ready
What we have done here is created simple ASP.NET MVC application using empty template to print simple text. So as a ASP.NET developer we have many questions and top most question is what is going on here? Let us look at sequence of events happened when we access http://localhost:49331 in browser in above example
  1. Browser sends request to ASP.NET Server
  2. ASP.NET interrupts request and tries to match with URL structure specified table(s) created in RouteConfig.cs. Remember line url: "{controller}/{action}/{id}"? This URL structure has 3 portions. Controller, Action Inside Controller and Id as optional parameter. Because Home is specified as default controller, it executes even though no controller name is given in URL means Home is Default Controller. Same way Index is default action of controller
  3. So now URL match is done so it time to pass execution to appropriate Controller. This is the time where MVC HttpHandler comes in to picture. HttpHandler will create controller instance, execute action and bring back data
  4. After executing controller’s Action, MVC looks for matching View in Views folder with same name as Controller. Since default view is Index, Index.cshtml is picked up from Home folder
  5. It renders view and sends HTML to Browser
Does it sounds like ASP.NET HttpHandler is working here? It is more than that. It has deferent architecture built on top of ASP.NET.

Here are some basic difference between ASP.NET and ASP.NET MVC

ASP.NET

ASP.NET MVC

ASP.NET ASP.NET MVC Supports View States which renders part of page No View State
UI/View and Code behind is tightly coupled. UI/View and Code are separate. Controller can be used independently
Master pages are for consistent Layout Layouts are for consistent layout
Server and User controls for reusability No server control but partial view and HTML rendering helpers
ASP.NET Forms and Controls renders additional JavaScript and HTML so less control on client side Renders only required HTML so full control on client side
ASP.NET is based on event driven model Follows MVC development model
Every URL point to physical file URL are dynamic and HTML is rendered based on structure
Fixed URL with query string parameter for dynamic are not SEO friendly SEO friendly URLs
Support Web Form based rendering Support ASP.NET and new Razor view engine. Customized view engine can also be created

So, it easy to understand ASP.NET MVC as ASP.NET HttpHandler at high level. Once can surely argue on many detailed difference but this makes easy to understand. It is very easy to create simple ASP.NET MVC application with single page rendering text. There are many difference between ASP.NET and ASP.NET MVC. But keep in mind that ASP.NET MVC is built on top of ASP.NET so all basic feature of ASP.NET is available.

Hope this was useful. Please provide your comments, suggestion and question below.

No comments: