Dhananjay Kumar

Day #1: Learn ASP.NET MVC 5- Adding Controller

On Day1 we learnt about Adding Controller. Today we will learn to add View in MVC project. Let us start with understanding with is View?

View is part of MVC that renders user interface. View contains markup that gets render with ViewEngines. ViewEngines generates View in ASP.NET MVC framework. There are two kinds of View Engines. One is aspx engine and other Razor engine.

We can say View is User Interface in MVC application and it never talks to database or model directly. It does not contain any business or application logic. Controller returns a View to be rendered.

You can add a View, right click on Product subfolder and select Add from context menu and then select 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 Layout. Give name of the View as of the action name. For example, if we have action in controller as below,

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

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

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

By default following code gets created in Index view

Let us explore above code line by line,

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

Now let us go ahead and run application. On navigating Index action in Product controller, you will get index view rendered in browser.

Let us go ahead and explore _Layout.cshtml. We are passing title from View to layout using ViewBag.

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

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

Some of the important points are as follows,

1. View never perform business logic
2. View never interacts with Model
3. Controller talk to Model , performs business logic and pass data to View

So let us say we want to pass data from Controller to View. Controller got an Action named Data as below,

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

        }

From Data action, we are passing fruit and times as parameter from Controller to View. We are using ViewBag property to pass data from Controller to View. Now these passed data can be used on 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 Route we have added a new Route as below,

  routes.MapRoute(
               name: "Product",
               url: "{controller}/{action}/{fruit}/{eatingtimes}"
           );

Let us go ahead and run application. We are passing mango as fruit and 9 as eatingtimes. As a output Mango will get render 9 times on View.

This is the way you can pass parameters from Controller to View. In further posts, we will complexity around Views and working with different kind of Views. I hope you find this post useful. Thanks for reading.