Creating the First MVC 3 Application Using Razor View

I am going to start from the new MVC 3 application by opening Visual Studio and selecting "New | Project..." from the File menu, in order to open the new project dialog box. Now from the web template select ASP.NET MVC 3 Web Application and give the application a name in the Name textbox and location in the Location textbox, then click the Ok button:

razor1.gif

Then a dialog box appears. In it select the Empty template from the templates and select Razor from the View engine. Leave the Use HTML5 semantic markup checkbox unchecked and click ok.

razor2.gif

In this the Empty option creates the project with only the minimum number of files and folders that are required for the MVC 3 application. If I select the internet option then it will create the small application and we can modify it and build on it. The intranet option is the same as the internet application, but it is designed for the environment where the users connect through the domain. If I run this application by pressing F5 the output looks like:

razor3.gif

Now we add a controller which is inherited from the System.Web.Mvc.Controller. This can be added to the controller folder in the Solution Explorer. The public method of the controller is called the action method, so that we can invoke it from the web via some URL to perform an action. We can add it as:

razor4.gif

Now the "Add Controller" dialog box will appear; in this set the ControllerName to "HelloController" and click "Add" to add the controller. The controller is simply a C# file in the Controller folder.

razor5.gif

Now modify the HelloController class as:

using System.Web.Mvc;

 

namespace MvcApplication3.Controllers

{

    public class HomeController : Controller

    {

        public string Index()

        {

            return "Hello, Richa Garg..!!";

        }

    }

} 

 

Now Run the application by pressing F5; the output looks like:

razor6.gif
In this example we only generate the string "Hello,Richa Garg..!!". To produce an HTML response to a browser request, we need to create the view. So we can modify the Index action method as:
 

using System.Web.Mvc;

 

namespace MvcApplication2.Controllers

{

    public class HomeController : Controller

    {

        public ViewResult Index()

        {

            return View();

        }

    }

}

 

If we run this the output will look like:

razor7.gif

Now right-click on the ViewResult method and add the view as:

razor8.gif

The window will appear to add the view so give the name of the view and click the "Add" button.

razor9.gif

Now add the code to the index.cshtml file as:
 

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>Index</title>

</head>

<body>

    <div>

        Hello!!! How are you?

    </div>

</body>

</html>

 

Now run the application and the output looks like:

razor10.gif
Summary : In this article I discussed how to work on the Razor view and add a controller and view.