Introduction to ASP.NET MVC

You may have read a lot of Model View Controller (MVC). I won’t explain the same thing here again. Rather I would like to explain how these M, V & C work in ASP.NET MVC. Note that words given in Italics are words that may not be technically correct, but used for explanation.

The Basic Components

Model (Database/Data source):

Models are classes used to represent Entities, Database Connection, etc. In MVC, Entity Framework is widely used to deal with the databases/data sources. Entity framework is a very advanced framework that allows using tightly coupled database entities in your code. There are two approaches to create Models in your MVC site.

• Create the Classes for required entities, and then generate the Database based on those Classes. This approach is called Code First Approach.
• Using a VS Add-in, called Entity Framework Power Tools, you can generate models based on your current database.

Controller (Business Logic/Data Processing):

Controllers are basically C# pages in which you write your business logic/data processing code, use models to interact with database, send data to Views, and receive data from Views. A controller has methods that return an ActionResult object i.e., a View to browser. Each method is somewhat similar to an event in a code behind page you are familiar with in ASP.NET Web Forms. A view has at least one associated method that is invoked when you type the address in URL to view a particular page. This method is similar to a page load event. Button clicks/form submits are handled with different type of methods in Controller for a View.  Controller passes data to Views using ViewBag, a dynamic object to which you can assign multiple dynamic properties. ViewBag is directly accessible in View associated to that particular Controller method.

View (User Interface):

If you like Classic ASP style coding to develop simple, clean and crisp UI rather than using Designers and Wizards, you will love Views in ASP.NET MVC. Views in ASP.NET are created by Code only. There is no designer for Views. Views are coded in HTML5 and one of the View Engines, either ASPX or Razor (cshtml or vbhtml, a new language for web pages). Razor is extremely simple and fun to work on. Learn more about Razor.

An MVC Page (a View) is viewed in browser using link in the format:

[http://hostname/MVCApplicationName/ControllerName/ActionName]

Let us create a simple example to understand ASP.NET MVC

1. Open Visual Studio 2012
2. Go to File > New > Project
3. Select "ASP.NET MVC4 Web Application"

You will see a Dialog that gives you options to select an MVC Template.

There are 6 MVC Templates:

1. Empty: Is totally Empty template without any models, controllers and views.
2. Basic: Has some basic stuff in the project.
3. Internet Application: Is used for an Application that is to be used over internet and needs user authentication. It uses Forms Authentication. It has stuff for login, authentication, etc.
4. Intranet Application: Is used for an Application to be used in your Intranet and uses Windows Authentication. It has all the configurations for windows authentication.
5. Mobile Application: Is used for Mobile.
6. Web API: Is used for RESTful Services.

There is an option to select View Engine. It provides two options viz., Razor and ASPX.

Let’s begin with a Basic Template, not to complicate things. For View Engine, Select Razor.

The Solution Explorer looks like this:

• No Models, Controllers or Views.
• _Layout.cshtml is a Layout View, just like MasterPages in ASP.NET Web Applications.
• Error.chstml is an Error page that can be used to display custom error messages by redirecting users on errors.
• _ViewStart.chstml is a special View page which is automatically appended at the beginning of all Views in the current folder. This helps a lot when you have some common things to be in place for all the views at the beginning.

Let’s create a basic page to learn how data flows between Controller and View:

• In Solution Explorer, Right-Click on Controllers > Add > Controller.
• Change the name "Default1Controller" to "HomeController", and leave the rest to defaults for now.
• Right Click anywhere in Index() method in Code Window, Select "Add View".
• In Add View Dialog, just click on "Add" leaving the defaults.
• Now if you hit F5, it should show a plain page with Index in bold as heading. And "Index" as Document Title.
• In controller within Index() method, add the following line of code:

• As I said, ViewBag is a dynamic object to which you can assign any type of value to a dynamic property with any name. All the data assigned to ViewBag properties is accessible in View.
• Now let’s read this value in View and display it on page. In razor code, @ symbol is used to begin writing razor code, like you used <% and %> in ASP. But in Razor, you need not close the @ symbol. It will automatically switch to HTML where the code ends.

• Hit F5, you will see a page like the one below:

• Now let’s pass data from View to Controller. Make the following code changes. [Note: Click the image below to view it in actual size.]

• The Index() method associated with the Index view is executed when the page is requested with GET method, i.e., by typing the URL in Address Bar. But with [HttpPost] verb, the second Index() method is executed when the Index view is requested with post method.
• Remember that the controller method name and view file name should be same always to associate a controller method with a view.
• Data from the html form is received by controller method as parameters with same name as given for input tags in HTML.

Resources:

• http://www.asp.net/mvc/mvc4
• http://www.asp.net/mvc/tutorials
• http://www.asp.net/mvc/videos
• http://www.asp.net/mvc/samples
• http://www.w3schools.com/aspnet/mvc_intro.asp
• http://en.wikipedia.org/wiki/ASP.NET_MVC_Framework