13.3. 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.

13.3.1. Passing Data to a Template

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

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:

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.

13.3.1.1. 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.

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.

13.3.2. 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>