¿Qué son ViewData, ViewBag y TempData en ASP.NET MVC?

A menudo he visto a desarrolladores de nivel básico luchar con las diferencias entre y el uso de ViewData, ViewBag y TempData en ASP.NET MVC. Y aunque hay muchos artículos y publicaciones de blog sobre este tema, intentaré explicarlo de manera simple.

Para empezar, ViewData, ViewBag y TempData son objetos en ASP.NET MVC que se usan para transportar o pasar datos en diferentes escenarios. Es posible que tenga que tener la obligación de pasar datos en los siguientes casos:

• Pasar datos del controlador a la vista;
• Pasar datos de un controlador a otro controlador;
• Pasar datos de una acción a otra;
• Pasar datos entre solicitudes HTTP posteriores

 

En un nivel superior, podemos representar el uso de ViewData, ViewBag y TempData, como se muestra en la imagen siguiente:

Transferencia de datos del controlador a la vista

Consideremos un escenario en el que está pasando datos del controlador a la vista. Por lo general, pasamos datos complejos a la vista utilizando el modelo. Aquí, digamos que tenemos una vista fuertemente tipada que usa la lista del modelo de datos como se muestra en la lista a continuación:

public ActionResult Index()
   {
       List<Product> p = new List<Product>() {
 
       new Product { Id = 1, Name = "Pen", Price = 300 },
       new Product { Id = 2, Name = "Pencil", Price = 100 }
   };
 
   return View(p);
}

En la vista, los datos se muestran representando el modelo como se muestra en la lista a continuación:

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        th>
        <th>th>
    tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        td>
    tr>
}
 
</table>

Ahora tenemos el requisito de pasar datos (que no sean un modelo) a la vista desde el controlador. Hay dos formas posibles de pasar los datos.

Supongamos que queremos pasar una cadena simple a la vista además del modelo de datos del producto. 

Passing data using ViewBag

Podemos pasar datos usando ViewBag como se muestra en el listado a continuación:

public ActionResult Index()
{
    ViewBag.data1 = "I am ViewBag data";
    return View(p);
}

En la vista, los datos de ViewBag se pueden leer como la propiedad de ViewBag, como se muestra en la lista siguiente:

<h2>@ViewBag.data1</h2>

Passing data using ViewData

Podemos pasar datos usando ViewData como se muestra en la lista a continuación:

public ActionResult Index()
{    
    ViewData["data1"] = "I am ViewBag data";
    return View(p);
}

En la vista, los datos de ViewData se pueden leer como el par de valores de cadena de ViewData, como se muestra en la lista siguiente:

<h2>@ViewData["data1"]h2>

Examinemos las diferencias entre ViewData y ViewBag. ViewBag es una propiedad dinámica que se basa en el tipo dinámico, mientras que ViewData es un objeto de diccionario. Podemos leer datos de ViewBag como una propiedad y de ViewData como un par clave-valor. Algunas viñetas sobre ambos son las siguientes:

ViewData

• Es una propiedad de tipo ViewDataDictionary class.
• Los datos se pueden pasar en forma de un par clave-valor.
• Para leer los datos de tipo complejo en la vista, se requiere el encasillamiento.
• Para evitar la excepción, se requiere la comprobación de valores nulos.
• La vida útil de ViewData se restringe a la solicitud actual y se convierte en nula en el redireccionamiento.
• ViewData es una propiedad de la clase ControllerBase

ViewBag

• Es una propiedad del tipo dinámico.
• Los datos se pasan como una propiedad del objeto.
• No hay necesidad de encasillamiento para leer los datos.
• No es necesario realizar una comprobación de valores nulos.
• La vida útil de ViewBag se restringe a la solicitud actual y se convierte en nula en la redirección.
• ViewBag es una propiedad de la clase ControllerBase.

En la clase ControllerBase, ambos se definen como propiedad, como se muestra en la imagen siguiente:

Podemos resumir ViewBag y ViewData como objetos que se utilizan para pasar datos del controlador a la vista en un solo ciclo. El valor asignado en ViewBag y ViewData se anula en la siguiente solicitud HTPP o al navegar a otra vista.

TempData

Uno de los principales atributos de ViewData y ViewBag es que su ciclo de vida se limita a una solicitud HTTP. En la redirección, pierden los datos. Es posible que tengamos otro escenario para pasar datos de una solicitud HTTP a la siguiente solicitud HTTP; Por ejemplo, pasar datos de un controlador a otro controlador o de una acción a otra acción. TempData se usa para pasar datos de una solicitud a la siguiente.

Supongamos que queremos navegar a la acción de lectura desde la acción de índice y, mientras navegamos, pasar los datos a la acción de lectura desde la acción de índice.  Por lo tanto, en la acción Índice, podemos asignar un valor a TempData como se muestra en la lista a continuación:

 public ActionResult Index()
 {
    TempData["data1"] = "I am from different action";
    return RedirectToAction("Read");      
 }

Podemos leer TempData como un par clave-valor. En la acción Leer, TempData se puede leer como se muestra en la lista siguiente:

public string Read()
{
     string str;
     str = TempData["data1"].ToString();
     return str;
}

Al igual que ViewData, TempData también es un objeto de diccionario y, para leer los datos, se requiere la conversión de tipos y la comprobación de valores nulos. Tenga en cuenta que TempData puede conservar los datos solo en la solicitud HTTP posterior. Cuando esté muy seguro de la redirección, use TempData para pasar los datos.

Algunos puntos sobre TempData son los siguientes:

• TempData se usa para pasar datos de una solicitud HTTP a la siguiente solicitud HTTP.
• En otras palabras, TempData se usa para pasar datos de un controlador a otro controlador o de una acción a otra acción.
• TempData es una propiedad de la clase BaseController.
• TempData almacena datos en un objeto de sesión
• TempData es una propiedad de la clase ControllerBase
• Para leer datos, se requiere la conversión de encasillamientos y la comprobación de valores nulos.
• El tipo de TempData es TempDataDictionary.
• TempData funciona con la redirección HTTP como el código de estado HTTP 302/303

Resumen

ViewData, ViewBag y TempData se usan para pasar datos entre el controlador, la acción y las vistas. Para pasar datos del controlador a la vista, se pueden usar ViewData o ViewBag. Para pasar datos de un controlador a otro, se puede usar TempData.

Espero que ahora los conceptos de ViewBag, ViewData y TempData sean un poco más claros, ¡y gracias por leer!

 

Pruebe nuestros controles HTML5 de jQuery para sus aplicaciones web y aproveche de inmediato sus impresionantes capacidades. ¡Descargue la prueba gratuita ahora!