Using a Template

Now that we know a little bit about views, we can start talking about how to pass data between MVC elements. Models are a key component of this, but for now, we will focus on how to pass data between the view and the controller.

Passing Data to a Template

The controller class contains methods that send data to different templates. These methods have a structure similar to:

Example
1
2
3
4
5
6
7

  public IActionResult ActionMethod()
  {
     // method code here

     ViewBag.property = Data;
     return View();
  }

ViewBag is an object that passes data into a template. Data can be a variable of any type, a number, a collection of some sort, or an object. A ViewBag property is created and given a value as simply as is done on line 5 above. In fact, we can just as easily create a second property on ViewBag as follows:

Example
ViewBag.anotherNewProperty = someOtherData;

You can think of ViewBag as like an empty container object who exists for the purpose of carrying variables from the controller into the view.

Accessing Data in a Template

The data assigned to properties on ViewBag is available inside of Razor templates. It can be accessed with the syntax @ViewBag.propertyName.

Example

For example, if the controller stores a vegetable name as string in ViewBag.vegetable, then the template can display that value like so:

<p>@ViewBag.vegetable</p>

Let’s say that @ViewBag.vegetable stores the string “Rutabaga”. When the program runs, the application interprets <p>@ViewBag.vegetable</p> as:

<p>Rutabaga</p>

By using @ViewBag.vegetable, we make our webpage dynamically display data within the p element. Changing the value of vegetable leads to a corresponding change in the text in the view after refreshing.

Try It Out in HelloASPDotNET

We started refactoring the Welcome method in the previous section , but we did not update the return statement. Currently, Welcome is still returning Content.

Update the Welcome method by doing the following:

  1. Change the return statement of Welcome to return a View instead of Content.

  2. Create a ViewBag variable to store the name value.

    Check your code
    19
20
21
22
23

    public IActionResult Welcome(string name)
{
  ViewBag.person = name;
  return View();
}

  3. Make sure to add HTML to the Welcome View that will greet a user with the name they provided.

    Check your code
    8

    <h1>Welcome, @ViewBag.person!</h1>

    Your Welcome method will now pass the value of ViewBag to the view.

  4. Run HelloASPDotNET to see your new views.

Check Your Understanding

Question

Given the code:

<p>Name: @ViewBag.name</p>

What will be displayed on the screen if the controller sends in a name variable with a value of “Blake”?

  1. Name: name
  2. Blake
  3. Blake: Blake
  4. Name: Blake
Question

We want a list element to read, “Item name: ______, Price: ______”, where the blanks need to be filled in with name and price values sent from the controller.

Which of the following will produce the desired result?

  1. <li>Item name: @ViewBag.name, Price: @ViewBag.price</li>
  2. <li>@ViewBag("Item name: name, Price: price")</li>
  3. <li>@Item name: , @Price = </li>
  4. <li>Item name: @name, Price = @price</li>