Introduction

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

Question: What is ViewData?

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

Step 1: Create a new ASP.NET MVC application

MVC-ViewData-1.jpg

MVC-ViewData-2.jpg

Step 2: Adding New Model

MVC-ViewData-3.jpg

MVC-ViewData-4.jpg

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel.DataAnnotations;
  4. using System.Linq;
  5. using System.Web;
  6. namespace ViewDataDemoApp.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
  14. {
  15. get;
  16. set;
  17. }
  18. }
  19. }
Step 3: Adding New Controller

MVC-ViewData-5.jpg

MVC-ViewData-6.jpg

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

MVC-ViewData-7.jpg

  1. @model ViewDataDemoApp.Models.Addition@
  2. { ViewBag.Title = "Addition Operation Using ViewData"; }<h2>
  3. Addition Operation Using ViewData</h2>
  4. <br />
  5. @using (Html.BeginForm()) {@Html.ValidationSummary(true)<fieldset>
  6. <legend>Addition</legend>
  7. <div class="editor-label">@Html.LabelFor(model => model.FirstNumber)</div>
  8. <div class="editor-field">@Html.EditorFor(model => model.FirstNumber)@Html.ValidationMessageFor(model => model.FirstNumber)</div>
  9. <div class="editor-label">@Html.LabelFor(model => model.SecondNumber)</div>
  10. <div class="editor-field">@Html.EditorFor(model => model.SecondNumber)@Html.ValidationMessageFor(model => model.SecondNumber)</div>
  11. <p>@ViewData["AddMessage"] @ViewData["Result"]</p>
  12. <br />
  13. <p>
  14. <input type="submit" value="Add" /></p>
  15. </fieldset> }<div>@Html.ActionLink("Back to List", "Index")
  16. </div>
  17. @section Scripts {@Scripts.Render("~/bundles/jqueryval")
  18. }

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