What is ViewBag?

Introduction

This article demonstrates an interesting and very useful concept in ASP.NET MVC.

Question: What is ViewBag?

In simple terms "ViewBag is the data holder that enables the definition of a dynamic property and holds the data that can be passed from a controller to a view".

Step 1: Create a new ASP.NET MVC application

ASP.NET MVC application

ASP.NET MVC application

Step 2: Adding new Model

Adding new Model

Adding new Model

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace ViewBagDemoApp.Models  
  7. {  
  8.     public class Addition  
  9.     {  
  10.         [Required(ErrorMessage = "Please Enter FirstNumber")]  
  11.         public int FirstNumber { getset; }  
  12.         [Required(ErrorMessage = "Please Enter SecondNumber")]  
  13.         public int SecondNumber { getset; }  
  14.     }  

Step 3: Adding new Controller

Adding new Controller

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using ViewBagDemoApp.Models;  
  7. namespace ViewBagDemoApp.Controllers  
  8. {  
  9.     public class AdditionController : Controller  
  10.     {  
  11.         //// GET: /Addition/  
  12.         public ActionResult Index(Addition addition)  
  13.         {  
  14.             ViewBag.AddMessage = "Addition Result is: ";  
  15.             ViewBag.Result = addition.FirstNumber + addition.SecondNumber;  
  16.             if (ViewBag.Result < 1)  
  17.             {  
  18.                 ViewBag.AddMessage = string.Empty;  
  19.                 ViewBag.Result = string.Empty;  
  20.             }  
  21.             return View();  
  22.         }  
  23.     }  
  24. }
Step 4: Adding new View

Adding new MVC View
  1. @model ViewBagDemoApp.Models.Addition  
  2. @{  
  3. ViewBag.Title = "Addition Operation Using ViewBag";  
  4. }  
  5. <h2>Addition Operation Using ViewBag</h2>  
  6. <br />  
  7. @using (Html.BeginForm())  
  8. {  
  9. @Html.ValidationSummary(true)  
  10. <fieldset>  
  11. <legend>Addition</legend>  
  12. <div class="editor-label">  
  13. @Html.LabelFor(model => model.FirstNumber)  
  14. </div>  
  15. <div class="editor-field">  
  16. @Html.EditorFor(model => model.FirstNumber)  
  17. @Html.ValidationMessageFor(model => model.FirstNumber)  
  18. </div>  
  19. <div class="editor-label">  
  20. @Html.LabelFor(model => model.SecondNumber)  
  21. </div>  
  22. <div class="editor-field">  
  23. @Html.EditorFor(model => model.SecondNumber)  
  24. @Html.ValidationMessageFor(model => model.SecondNumber)  
  25. </div>  
  26. <p>  
  27. @ViewBag.AddMessage @ViewBag.Result  
  28. </p>  
  29. <br />  
  30. <p>  
  31. <input type="submit" value="Add" />  
  32. </p>  
  33. </fieldset>  
  34. }  
  35. <div>  
  36. @Html.ActionLink("Back to List""Index")  
  37. </div>  
  38. @section Scripts {  
  39. @Scripts.Render("~/bundles/jqueryval")  

Step 5: The output for the application is as in the following

Output7.png

Output8.png

I hope this article was useful for you. I look forward to your comments and feedback. Thanks, Vijay.