Sunday, 27 November 2016

MVC Part 4

How to Create MVC Empty Template Application

Start Visual Studio and Select File --> New Project  (shown in screenshot)
Select Project Window

Visual C# --> Web --> ASP.NET MVC (Version) Web Application --> Enter Our Project Name --> Press OK Button(shown in screenshot)

Select Template Window

Select Empty Template --> Press OK Button(shown in screenshot).

Project Creation Status Window
By this, Visual Studio will create our MVC project like this (shown in screenshot):
Project Solution Window
Add Home Controller in Our Empty Project(show in screenshot):

Method:
         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 HomeContoller and click Add.

Add Controller Window

This will create a class file HomeController.cs under the Controllers folder with the following default code.
using System;
using System.Web.Mvc;

namespace MVCApplication.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.

Now we will add a new View to our Home Controller. To add a new View, right click view folder and click Add->View.

Add View Window

Name the new View as Index and View Engine as Razor (SCHTML). Click Add
This will add a new cshtml file inside Views/Home folder
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>
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 gives the output.

In Step 6, the output we received was based on the content of our View file and had no interaction with the Controller. Moving a step forward, now we will now create a small example to display a Welcome message with current time using interaction of View and Controller.
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(Show in Snapshoot).
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 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.
Now 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 @ (which would be set from the Controller).
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. The output would look like below:

No comments:

Post a Comment