MVC Framework - First Application

Advertisements

Previous Page
Next Page  

Let us jump in and create our first MVC application using Views and Controllers. Once we have a small hands-on experience on how a basic MVC application works, we will learn all the individual components and concepts in the coming chapters.

Create First MVC Application

Step 1 − Start your Visual Studio and select File → New → Project. Select Web → ASP.NET MVC Web Application and name this project as FirstMVCApplicatio. Select the Location as C:\MVC. Click OK.

Create New MVC Project Step 1 Create New MVC Project Step 2

Step 2 − This will open the Project Template option. Select Empty template and View Engine as Razor. Click OK.

Select MVC Template

Now, Visual Studio will create our first MVC project as shown in the following screenshot.

MVC Project Structure

Step 3 − Now we will create the first Controller in our application. Controllers are just simple C# classes, which contains multiple public methods, known as action methods. To add a new Controller, right-click the Controllers folder in our project and select Add → Controller. Name the Controller as HomeController and click Add.

Add MVC Controller Create Home Controller

This will create a class file HomeController.cs under the Controllers folder with the following default code.

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

The above code basically defines a public method Index inside our HomeController and returns a ViewResult object. In the next steps, we will learn how to return a View using the ViewResult object.

Step 4 − Now we will add a new View to our Home Controller. To add a new View, rightclick view folder and click Add → View.

Add MVC View

Step 5 − Name the new View as Index and View Engine as Razor (SCHTML). Click Add.

Create Index View

This will add a new cshtml file inside Views/Home folder with the following code −

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 − Modify the above View's body content with the following code −

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7 − Now run the application. This will give you the following output in the browser. This output is rendered based on the content in our View file. The application first calls the Controller which in turn calls this View and produces the output.

mvc_welcome_message

In Step 7, the output we received was based on the content of our View file and had no interaction with the Controller. Moving a step forward, we will now create a small example to display a Welcome message with the current time using an interaction of View and Controller.

Step 8 − MVC uses the ViewBag object to pass data between Controller and View. Open the HomeController.cs and edit the Index function to the following code.

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

In the above code, we set the value of the Greeting attribute of the ViewBag object. The code checks the current hour and returns the Good Morning/Afternoon message accordingly using return View() statement. Note that here Greeting is just an example attribute that we have used with ViewBag object. You can use any other attribute name in place of Greeting.

Step 9 − Open the Index.cshtml and copy the following code in the body section.

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

In the above code, we are accessing the value of Greeting attribute of the ViewBag object using &commat; (which would be set from the Controller).

Step 10 − Now run the application again. This time our code will run the Controller first, set the ViewBag and then render it using the View code. Following will be the output.

MVC Example
Advertisements