Displaying Data in ASP.NET MVC using ViewData, ViewBag, and TempData


In Asp.Net MVC Model, View, and Controller are the main components. Controller is the responsible to handle the all data flow, View is the responsible to display the data. Controller passes the data from Model to View and View actually displays the data.

Asp.Net MVC provides ViewData, ViewBag, and TempData to pass data from Controller to View. All these three objects are dictionary objects means key & Value pair. In this article we discuss about each one of these.

ViewData: ViewData is a key-value pair object as dictionary object derives from ViewDataDictionary and is used to pass the data from Controller to View in next Request. ViewData lost its value when redirection happens, that means ViewData holds its value only between Controller to corresponding View after that it gets destroyed.

Open Microsoft Visual Studio 2013 => Create simple Asp.Net MVC application and store some values in ViewData as shown below.

using System.Web.Mvc;

 

namespace MVCDisplayData.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public ActionResult Index()

        {

            ViewData["EmpId"] = "1001";

            ViewData["EmpName"] = "ABC";

            ViewData["EmpSal"] = "$5000";

 

            return View("Index");

        }

 

    }

}

 

As shown above HomeController action method Index() returns ViewData to view Index. We can use these ViewData in View as shown below. ViewData is accessible by using string as key.

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

        Employee Id: @ViewData["EmpId"] <br />

        Employee Name: @ViewData["EmpName"] <br />

        Employee Salary: @ViewData["EmpSalary"] <br />

    </div>

</body>

</html>

 

As shown above we display the ViewData using Code Nuggests. These ViewData values available only in Index view, if any redirection happens from this view all these ViewData will get destroyed.

ViewBag: ViewBag is also same as ViewData other than couple of differences. ViewBag is dynamic property that takes C# 4.0 advanced features and ViewBag does not requires type casting for Complex objects whereas ViewData requires type casting for complex objects.

As shown below we can store values in ViewBag.

public ActionResult Index()

{

        ViewBag.EmpId = "1001";

        ViewBag.EmpName = "ABC";

        ViewBag.EmpSal = "$5000";

         

        return View("Index");

 }

As shown created the dynamic properties EmpId, Empname, and EmpSal for ViewBag. Use these ViewBag dynamic properties in view as shown below.

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

        Employee Id: @ViewBag.EmpId<br />

        Employee Name: @ViewBag.EmpName<br />

        Employee Salary: @ViewBag.EmpSalary<br />

    </div>

</body>

</html>

TempData: TempData is also dictionary object derives from TempDataDictionary class. TempData holds the value for short life session and it also holds value for 302/303 redirection because it is also in same HTTP request.

Save values in TempData as shown below. TempData object also key-value pair like ViewData.

public ActionResult Index()

        {

            TempData["EmpId"] = "1001";

            TempData["EmpName"] = "ABC";

            TempData["EmpSal"] = "$5000";

         

            return View("Index");

        }

Access the TempData object values through string as key as shown below.

<div>

    Employee Id: @TempData["EmpId"] <br />

    Employee Name: @TempData["EmpName"] <br />

    Employee Salary: @TempData["EmpSalary"] <br />

</div>


If you have any questions on this topic please post here https://www.techinfocorner.com/forum/cat/asp-net-mvc