Adding ASP.NET MVC view for Action Method

Datetime:2016-08-22 22:07:52          Topic: ASP.NET MVC           Share

Do you know how to add the ASP.NET MVC View for a action method in the MVC project? or How does ASP.NET MVC engine searches for a view. Let’s develop a simple ASP.NET MVC application from scratch with controller and action in C# to find answer to these questions.

While we are done with adding a controller and an action method in the controller as shown in the code below. If we run the application and navigate the view we will get the exception The view ‘Index’ or its master was not found or no view engine supports the searched locations ”  as shown in the figure below.

Figure 1

Lets start with creating an empty ASP.NET MVC project. and see why we encountered this error and what is the work around for it.

STEP 1: Open the Visual Studio 2015. Select ASP.NET Web Application project template as shown in the figure below. Name the project as you like. I have named as  “FirstView” and Click “Ok”.

ASP.NET MVC Project

Step 2: In the next step Select Empty under the ASP.NET 4.6 Templates. Check the Check box MVC as shown in the figure below

After you are done with these two steps you will see the project structure as shown in the figure below.

ASP.NET MVC project Structure

Here we have got a empty project template for the ASP.NET MVC application.

Step 3: Adding a controller. Right click on the Controllers folder. Navigate to Add and Controller as shown in the figure below

ASP.NET MVC Controller

and in the next window select “MVC 5 Controller – Empty”. Click on the “Add” button. In the next window add the name of the controller as “HomeController” and again click “Add’ button.

We can see that a new file is added under Controller folder named “HomeController.cs”.

Step 4: Change the code of the HomeController.cs as shown in the code below

    public class HomeController : Controller
    {
        // GET: Home
        public ActionResultIndex()
        {
            ViewBag.BlogName = "Dot Net For All";
            ViewBag.Description = "Best blog for .NET related stuff";
            return View();
        }
    }

In the above code I have added a action named Index() which stores some values in the ViewBag dynamic property.

Now run the application. We will get the error which we have shown in the Figure 1.

Whenever an action is added to the controller which return the View action result. The MVC engine looks for the View in the folder names corresponding to the Controller name in the Views folder. If it is not found in that location, it searches the Shared folder looking for the View.

In our case MVC engine will look for the “Index” view in the “View > Home” Folder.

ASP.NET MVC View

Step 5: Right click on the Home folder under Views folder. Click “Add > View”. A new window will open. Fill the entries as shown below.

ASP.NET MVC View

As you can see in the figure, I have named the ASP.NET MVC View as Index which should be same as the Action method of the controller class. Click Add.

Change the code of the index.cshtml file as shown below

@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport" content="width=device-width" />
    <title>Index</title>
    <h3>@ViewBag.BlogName</h3>
    <p>@ViewBag.Description</p>
</head>
<body>
    <div> 
    </div>
</body>
</html>

Now run the application and we can see the result as shown in the figure below.

ASP.NET MVC View

Take away from the Article:

In this article I have shown how we can create and ASP.NET MVC application from the scratch. We can add views to the action methods of the application.

Further Reading:

Showing Collection Data in ASP.NTE MVC

ASP.NET MVC Routing Exaplined





About List