DEV Community

Azizul Arif
Azizul Arif

Posted on

"Understanding ViewBag, ViewData, and TempData in ASP.NET Core MVC: When and How to Use Them"

ViewBag

ViewBag is a dynamic object used to pass data from the controller to the view. It’s easy to use but not strongly typed, and it's specific to the current request.
Controller (Index action)

public IActionResult Index()
{
    var villaNumberList = _db.VillaNumberss.ToList();

    // Using ViewBag to pass a simple message
    ViewBag.Message = "Welcome to the Villa Number List page!";

    return View(villaNumberList);
}
Enter fullscreen mode Exit fullscreen mode

View(Index.cshtml):

@model IEnumerable<WhiteLagoon.Domain.Entity.VillaNumber>

<div class="card">
    <div class="card-header text-center">
      <!-- Displaying the ViewBag message -->
        <h3>@ViewBag.Message</h3> 
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Villa Id</th>
                    <th>Villa Number</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Villa_Id</td>
                        <td>@item.Villa_Number</td>
                        <td>@item.SpecialDetails</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

ViewData

ViewData is a dictionary object used to pass data between the controller and view. Like ViewBag, it's specific to the current request but is slightly different as it uses key-value pairs.
Controller (Index action)

public IActionResult Index()
{
    var villaNumberList = _db.VillaNumberss.ToList();

    // Using ViewData to pass a simple message
    ViewData["Title"] = "Villa Number List";

    return View(villaNumberList);
}
Enter fullscreen mode Exit fullscreen mode

View (Index.cshtml)

@model IEnumerable<WhiteLagoon.Domain.Entity.VillaNumber>

<div class="card">
    <div class="card-header text-center">
      <!-- Displaying the ViewData value -->
        <h3>@ViewData["Title"]</h3> 
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Villa Id</th>
                    <th>Villa Number</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Villa_Id</td>
                        <td>@item.Villa_Number</td>
                        <td>@item.SpecialDetails</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

TempData

Controller (Index action)

public IActionResult Index()
{
    var villaNumberList = _db.VillaNumberss.ToList();

    // Using TempData to pass a message for the next request
    TempData["SuccessMessage"] = "Data retrieved successfully!";

    return View(villaNumberList);
}
Enter fullscreen mode Exit fullscreen mode

View(Index.cshtml)

@model IEnumerable<WhiteLagoon.Domain.Entity.VillaNumber>

<div class="card">
    <div class="card-header text-center">
        <h3>Villa Number List</h3>
        @if (TempData["SuccessMessage"] != null)
        {
            <!-- Displaying TempData message -->
        <div class="alert alert-success">
           @TempData["SuccessMessage"] 
        </div> 
        }
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Villa Id</th>
                    <th>Villa Number</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Villa_Id</td>
                        <td>@item.Villa_Number</td>
                        <td>@item.SpecialDetails</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Key Differences:

ViewBag:

Ideal for passing temporary data in the same request, it is dynamic and
easy to use.

ViewData:

A bit more structured than ViewBag, using a key-value dictionary.

TempData:

Useful for passing data across requests (e.g., after a redirect).

Top comments (0)