MVC Framework - First Apppcation

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

Create First MVC Apppcation

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

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

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

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

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

using System; 
using System.Web.Mvc;  

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

The above code basically defines a pubpc 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, rightcpck view folder and cpck Add → View.

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

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> 
      <span> 
      
      </span> 
   </body> 
</html>

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

<body> 
   <span> 
      Welcome to My First MVC Apppcation (<b>From Index View</b>) 
   </span> 
</body>

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

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.

pubpc 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> 
   <span> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </span> 
</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 apppcation 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 Framework - First Apppcation

Create First MVC Apppcation

友情链接