Day #2: Learn ASP.Net MVC 5, Adding a View

Day #1: Learn ASP.NET MVC 5- Adding Controller
 
On Day 1, we learned about Adding a Controller. Today we will learn how to add a View to a MVC project. Let us start with understanding what a View is.

A View is a part of MVC that renders the user interface. The View contains markup that is rendered with ViewEngines. ViewEngines generate a View in an ASP.NET MVC framework. There are two kinds of View Engines. One is the aspx engine and the other is the Razor engine.
 
We can say the View is the User Interface in a MVC application and it never talks to the database or model directly. It does not contain any business or application logic. A Controller returns a View to be rendered.

You can add a View, right-click on the Product subfolder and select Add from the context menu and then select the template MVC 5 View Page with Layout.

There are four options for Views:

1. MVC 5 View Page
2. MVC 5 View Page with Layout
3. MVC 5 Layout Page
4. MVC5 Partial Page

Let us start with adding a MVC5 View Page with a Layout. Provide the name of the View as of the action name. For example, if we have an action in the controller as below:

public ActionResult Index() 
{ 
    return View(); 
} 

Then we will create a View with the name Index since the action name is Index and it is returning a view. Next we need to select the layout page. Let us proceed and select a Layout.cshtml from the Shared folder.

After adding the View, you will find that inside the "Views" -> "Product" folder index.cshtml is being added.

By default the following code is created in the Index view:

Let us explore the code above line by line.

• We are setting the layout of the view as "_Layout.cshtml" from the Shared folder.
• ViewBag is used to pass parameters. We are setting the Title of the View as Index.
• On DOM creation some HTML elements like <h2> and <p>

Now let us proceed to run the application. On navigating the Index action in the Product controller, you will get an index view rendered in the browser.

Let us proceed to explore "_Layout.cshtml". We are passing the title from the View to the layout using a ViewBag.

On running the application, you may notice that the browser title is set to "Index-My" of the ASP.NET Application. On further exploring of "_Layout.cshtml", you will find the navigation links and footer. If required you can change the content of the layout as well.

Next let us see how to pass data from the Controller to a View. Before we get into the demo section, let us understand that the View will never interact with the Model directly and do any business logic. The Controller will talk to the Model and perform the business operation on the data and then pass that to the View to be rendered.

Some of the important points are as follows:

1. The View never does the business logic
2. The View never interacts with the Model
3. The Controller talks to the Model, performs the business logic and passes data to the View

So let us say we want to pass data from the Controller to the View. The Controller has an Action named Data as below:

 public ActionResult Data(string fruit, int eatingtimes)
 {
     ViewBag.fruit = fruit;
     ViewBag.times = eatingtimes;
     return View();
 }

From the Data action, we are passing fruit and times as parameters from the Controller to the View. We are using a ViewBag property to pass data from the Controller to the View. Now this passed data can be used on the View as below. We have created a View named data without any layout.

<div>
     <h2>
         Data</h2>
     <ul>
         @for (int i = 0; i < ViewBag.times; i++) {
         <li>@ViewBag.fruit</li>
         }
     </ul>
 </div>

In the Route we have added a new Route as below:

routes.MapRoute(

    name: "Product",

    url: "{controller}/{action}/{fruit}/{eatingtimes}"

);

Let us proceed to run application. We are passing mango as fruit and 9 as eatingtimes. As output Mango will get rendered 9 times on the View.

This is the way you can pass parameters from a Controller to the View. In further posts, we will see the complexity of Views and work with various kinds of Views. I hope you find this article useful. Thanks for reading.