Post
Ask Question

Creating Your First ASP.Net MVC Application

This article explains how to create an ASP.NET MVC application using Visual Studio. We create an application that shows "Hello World!" on the UI. If you want to learn what MVC is go through this link:

ASP.NET MVC Introduction 

Now we go step-by-step to create an ASP.NET MVC application.

1. Open Visual Studio.

Click on "New Project" in the Start Page:

MVC-application-1.jpg
or

Go to "File" -> "New" -> "Project...".

MVC-application-2.jpg 
We get the installed templates pane.

2. Click on Web, select "ASP.NET MVC 2 Empty Web Application" from the right pane. Now provide an appropriate name of the application in the Name field at the bottom and provide a location for the application.

MVC-application-3.jpg

3. After completing step 2 we get an ASP.Net MVC application skeleton that has the folder structure (empty folder), static files or publically servable files. Here we have default *.css and *.js files and empty folders consistent with the MVC architecture. 

MVC-application-4.jpg

To learn more about the folder structure above, go through this article:
 
Folder Structure of ASP.NET MVC Project

4. Add controller

Right-click on the "Controllers" folder in Solution Explorer and go to the "Add"  item then click on "Controller".

MVC-application-5.jpg

Now we get the following screen.

MVC-application-6.jpg

Provide the Controller Name. I used the name Home and Controller is a suffix because each controller has it in its named. So the Controller name is HomeController. Leave the checkbox unchecked because we don't want to create these actions in HomeController. Our HomeController has an Index action to get a command and send the view on the Index UI.
  1. using System.Web.Mvc;  
  2. namespace MvcApplication.Controllers  
  3. {  
  4.     public class HomeController : Controller  
  5.     {  
  6.         public ActionResult Index()  
  7.         {  
  8.             return View();  
  9.         }  
  10.     }  
  11. } 

We want to show a message "Hello World!!" on the UI so we modify our action result Index(), in other words we put the message in ViewData so that it can be accessed on the associate view of this action.

  1. public ActionResult Index()  
  2. {  
  3.     ViewData["message"] = "Hello World!!!";  
  4.     return View();  
  5. }

5. Add View

Right-click on ActionResult Index() in HomeController class then click on  Add view.

MVC-application-7.jpg
 
We get the following window. We have ActionResult Index() so the View name will be Index and we can't change it and uncheck the check box Select Master page because we don't have a master page. Then click on the Add button.

MVC-application-8.jpg

We have HomeController and ActionResult Index() in it so after clicking on the Add Button, the Home  folder is created under the Views folder that contains Index.aspx as the view.

MVC-application-9.jpg

We want to show the message "Hello World!!" on the UI so we call the ViewData message on the view to show it.

  1. <%= ViewData["message"] %>
Now our view looks like:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>Index</title>  
  6. </head>  
  7. <body>  
  8.    <%= ViewData["message"] %>  
  9. </body>  
  10. </html>   

Now press F5 to run the application or click on the Start debugging button in Visual Studio toolbar and get the result on the UI.

MVC-application-10.jpg

It is a simple MVC example that explains the basics of MVC application creation. It works as in the following diagram.

MVC-application-11.jpg


Similar Articles