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.

image

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.

image

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.

image

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

image

By default following code gets created in Index view

image

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.

image

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

image

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.

image

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.

image

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.

Advertisements

2 thoughts on “Day #2: Learn ASP.NET MVC 5- Adding View

  1. Hi friend, good post, but I only want to say that exists more than two types Of view engine, aspx and razor are the two default options, but you can use another engine like parrot, spark… Or you can do your own view engine Thanks to the MVC extensibility.

    Regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s