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 { get; set; }
  12. [Required(ErrorMessage = "Please Enter SecondNumber")]
  13. public int SecondNumber { get; set; }
  14. }
  15. }
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")
  40. }
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.