Creating an ASP.Net MVC 3 application

If you want to explore any software framework the best thing is, just go ahead and create a small project and understand how the framework helps you in your development efforts. Anybody who is into web development must know how an ASP.Net application works. The prior knowledge of ASP.Net application is beneficial to create MVC based application but not necessary. In this article, we will create a MVC 3 application, a Controller and a View.

To create a MVC 3 web application, open VS 2010 and follow the below steps.

Select File - New - Project option. In the New Project dialog, Select the item ASP.Net MVC 3 web applictaion as shown in Figure.

New Project dialog, Select the item ASP.Net MVC 3 web applictaion

Give a name to the project and click the ok button. Another dialog appears displaying 3 project templates.

dialog which displays 3 mvc project templates

They are:
  • Empty
  • Internet application
  • Intranet application

Select Empty project template and view engine as Razor and press ok button. The default directory is created for MVC 3 application and can be seen in the solution explorer.

If you select project template as Empty, the minimum required files (Global.asax, web.config and java script libraries that supports AJAX and JQuery under Script folder) and folders ( Controllers, Models, Views, Scripts) are created to run the MVC 3 application as shown in the Figure.

mvc application project structure in the solution explorer

If Internet application project template is selected, it includes all the files and folders created earlier and also under Controllers directory, the two files AccountController.cs and HomeController.cs and required views for these two controllers are created. These two controllers manage user´s login details and authentication.

The Intranet application project template is chosen to provide windows-based authentication where all users are authenticated by using Active Directory managed by windows server. For this article, I have chosen Empty project template. There is no default controller created in the solution explorer. We will create one controller now.

Creating the Controller

In the solution explorer, select Controllers folder and select Add - Controller option. The Add Controller dialog box appears.

Add Controller dialog box

Give Controller name as HomeController and in the Scaffolding options section, select the Empty controller as template and click the Add button. The name of controller name is suffixed with Controller word. Even though it is not compulsory, it is better to follow the MVC conventions. Visual studio creates the Homecontroller.cs file as shown below. As you can see the HomeController class is derived from Controller class and Index() is the action method.

Homecontroller file derived from Controller class and with the Index() action method

Observe the below picture.

Add Controller dialog box with different Sacffolding options

If you select the option - Controller with empty read/write actions as template in the Sacffolding options section of the Add Controller dialog box, the controller class is created with empty common functionalities like Create, Details, Edit and Delete Action methods.
Note:- 1.Depends on the option selected in the Template dropdownlistbox, the controller class is created with some default Action methods.

Create and render a View

After that, we need to create a view to give HTML response to the browser. When action method Index() is executed, View() method is called and default view is rendered. As we have created an Empty project, there is no default view for the Index action method. We will create a view by right-click on the Index() method and select Add View option. The Add View dialog box is displayed.

The Add View dialog box to create a view in the mvc application

The Index.cshtml file is created under Views sub directory as shown in Figure.

The Index.cshtml file under Views sub directory

Open the Index.cshtml and type the text as shown below.

Index.cshtml with some text typed

Observe that the Index() action method´s return type is ActionResult. This is the general result type that can have several subtypes. Eventhough we have not mentioned any name of View to be rendered in the Index() action method, based on MVC naming conventions, Index method finds the corresponding view with the name as the action method in the Views directory, that is index.cshtml. The next step is run the project and the output is displayed.