Using Dynamic Data In Your ASP.NET Page

Let me start this post by saying if you're already know how to pass data from the backend code to your front end: this post is not for you. This post if for people who are just learning how to do this.

Let's face the facts here. You're most likely creating an ASP.NET App and pages to allow you to take in data and use data dynamically on the front end.

What would be the use of a page written in a dynamic language such as C# and using ASP.NET if it were just static data? You may as well use just HTML to create the webpage.

However, you may be wondering how you can pass this data from the back end code into the front end page.

In this article, we're going to go through 3 ways of getting this data from the code and into your webpage front end.

One more thing I want to note. I am not going to go into the reasons why there are are a few different ways to pass in data. I am just going to show you how to use them. If you want the history of why they exist then this can be an assignment for you. Just know that knowing why they were created doesn't take away from knowing how to use them and visa versa.

Using ViewBag

ViewBag is the first method we are going to be using to pass information/variables from your controller code and into your view.

ViewBag allows you to assign some temporary values in your controller and use them in the view.

You assign the values in your controller method: ViewBag.Title = "My Title" as in the below code snippet:

public IActionResult Index()
{
    ViewBag.Title = "My Webpage App";
    return View();
}

When this controller code is called, when you navigate to the page, the value of "My Webpage App" is assigned to the temporary ViewBag.Title.

Then in the view, to use this you would do something as follows: <h1>@ViewBag.Title</h1>. The below View uses the above title in its page

<div class="text-center">
    <h1>Welcome to @ViewBag.Title</h1>
</div>

When this code runs, on the page you will see the header:

My Webpage App

ViewBag only transfers data from controller to view, not visa-versa. ViewBag values will be null if redirection occurs.

Using ViewData

The next way of passing data into your view that we are going to look at is ViewData.

ViewData is very similar to ViewBag and was created for a specific reason. As I said, I won't go into whys; just the hows.

Like ViewBag, ViewData allows you to pass in temporary values from the controller code into the view.

So, how do we use ViewData? It's quite similar to ViewBag except how you reference the data.

To add some data into ViewData you assign it as follows: ViewData["Title"] = "My Webpage App"

The following code snippet shows it in action.

public IActionResult Index()
{
    ViewData["Title"] = "My Webpage App";
    return View();
}

To use a ViewData in your view you reference it as follows @ViewData["Title"]

The following code snippet is this being used in a view:

<div class="text-center">
    <h1>Welcome to @ViewData["Title"]</h1>
</div>

You may notice a lot of similarity between how you use ViewBag and ViewData. The obvious difference is how you reference the data, one being with a dot and the other enclosed in square brackets and surrounded by quote marks.

You could even use both in a controller and view; however, you would need to use different values of reference. So, in the above example, you could not have them both using "Title", but you could have "ViewBagTitle" and "ViewDataTitle" for example.

Using Model

The third way of passing data into your view that we are going to look at is Models.

You may have already come across models as the ASP.NET applications are MVC - Model, View, Controller applications. You model is the part that contains the data for the application.

In the case of using ViewBag and ViewData you can create temporary data variables as you need them in the controller. Using models are a little more in-depth.

Unlike just assigning a value in a ViewBag or ViewData: for a model you need to first define the model class, then create an object and pass in the data.

For this example, I am going to create a simple model; assigned data and then use it in my view.

First, let us create a very simple model:

using System;
namespace TestMVCApp.Models
{
    public class TitleModel
    {
        public string Title { get; set; }
    }
}

Normally the model would be more complex than this; I would probably never use a model to pass in the title for example. Examination of this simple model shows that it contains one string called Title.

Next, we use this class in our controller, create an object and assign a value as in the following code snippet:

public IActionResult Index()
{
    TitleModel titleModel = new TitleModel();

    titleModel.Title = "My Webpage App";
    return View(titleModel);
}

Notice also, with this example of model, we pass in the model in the View command; something we didn't do for ViewBag and ViewData.

Finally, let us look at the View using this model:

@model TitleModel

<div class="text-center">
    <h1>Welcome to @Model.Title</h1>
</div>

Again, you can see with the model that there is a little more to it. Firstly we have to define the model we are using by using the @model command. Then to get access to the data we need to use @Model.Title.

This may seem like a little more effort, but the great thing about using a model is that it's not just temporary data. You create your object and assign values to it.

In the controller code, you could then pass this model into other methods to manipulate that data; then pass this into the view. You could have list's in your model and do things like @foreach to step through the list of data.

Using a model allows you to pass more complex data into your view and really should be the method you are using to create your dynamic views.

Using more than one method

In practice I find myself using a combination of the above. I tend to use models for passing in my dynamic data - passing information back and forth between the view and controller.

I then use ViewBag (and sometimes ViewData) to pass in smaller items such as the title or some other small data that I don't need to put into a model.

For example, I would not put the title of the page in the model; that I would use ViewBag for.

Using these methods will allow you to pass data from your controller into your views and allow you to create your ASP.NET app using the MVC model.