Introduction

Today we'll learn to work with the wizard interface in ASP.NET MVC Web Applications. A wizard is used to allow to logically divide and group the data so that any user can enter the data or information gently in a step-by-step manner. In this article you'll see that the implementation of the wizard is so easy in the ASP.NET MVC Application and you can also develop it in the Web Forms application. There are various way to create the wizard in the MVC application and here you can learn the one among them.

In that context, I am creating the wizard in the MVC Web Application in Part 1 of this article and here you will learn to develop the wizard that stores the data in the ASP.NET Session and wizard works on the traditional form submission.

You will see the following approach to develop the wizard in the application:

You now have some idea of the development of the application, let's develop the application using the following sections:

Create MVC Web Application

I am creating the ASP.NET Web Application in Visual Studio 2013 using MVC 5. Proceed with the following procedure.

Step 1: Open Visual Studio 2013 and click on "New Project".

Step 2: Select the ASP.NET Web Application and enter the name as "MVC Wizard".

Create ASP.NET Web Application

Step 2: In the "One ASP.NET" wizard, select the "MVC" Project Template.

Mvc Project Template in VS 2013

Visual Studio creates the application automatically and adds the files and folders to the application. Now proceed with the next section.

Working with Entity Data Model

In this section, we'll generate the entity data model from the database. I've created the table in the database and I assume that you have the table for generating the model or you can create a new one. So, let's proceed with the following procedure.

Step 1: In Solution Explorer, just right-click on the Models folder to add a ADO.NET Entity Data Model.

Adding ADO.NET Entity Data Model

Step 2: Enter the name for the model as "MyCricketerModel".

Entity Data Model

Step 3: Select the "Generate from Database" in the Entity Data Model Wizard.

Specifying the Model

Step 4: Create a "New Connection" to connect with the database and click on "Next".

DataConnection in Model

Step 5: Select the table of the database.

Database Objects in Model

Visual Studio creates the Entity Data Model and generates the diagram of the table. As you can see in the "Cricketer" entity diagram below:

Cricketer Model

Working with the Model

Now as you can see in the preceding screenshot that there are various properties defined in the entity and for the sake of creating the wizard let's group them into the two steps as follows:

So, you need to create the model class for each of the wizard steps defined above. So let's work with the model with the following procedure.

Step 1: In Solution Explorer, just right-click on the Models folder to add a class as in the following:

Adding Class in Model

Step 2: Enter the class name as "CricketerDetails" and replace the code with the code below:

  1. using System.ComponentModel.DataAnnotations;
  2. namespace MvcWizard.Models
  3. {
  4. public class CricketerDetails
  5. {
  6. [Required]
  7. public int ID { get; set; }
  8. [Required]
  9. public string Name { get; set; }
  10. [Required]
  11. public string FullName { get; set; }
  12. [Required]
  13. public int Age { get; set; }
  14. [Required]
  15. public string Team { get; set; }
  16. }
  17. }

Step 3: Add another class named "CricketerStatistics" and replace the code with the code below:

  1. using System.ComponentModel.DataAnnotations;
  2. namespace MvcWizard.Models
  3. {
  4. public class CricketerStatistics
  5. {
  6. [Required]
  7. public int OdiRuns { get; set; }
  8. [Required]
  9. public int TestRuns { get; set; }
  10. [Required]
  11. public int Century { get; set; }
  12. [Required]
  13. public int HalfCentury { get; set; }
  14. [Required]
  15. public int Wickets { get; set; }
  16. [Required]
  17. public int Catches { get; set; }
  18. }
  19. }

In both steps, we defined the properties for creating the steps in the wizard. We've also defined the DataAnnotations for the properties to validate. That's all for the model. Now we'll proceed with the next section.

Working with Controller

In this section, we'll create the controller and create various action methods using the following procedure.

Step 1: In Solution Explorer, just right-click on the Controllers folder to add a "New Scaffolded Item".

Adding New Scaffolded Item in Controller

Step 2: Select the "MVC Controller - Empty".

Scaffolding Mvc Empty Controller

Step 3: Enter the controller name as "MyCricketerController".

Adding Controller

Step 4: Just replace the code with the following code:

  1. using MvcWizard.Models;
  2. using System.Web.Mvc;
  3. namespace MvcWizard.Controllers
  4. {
  5. public class MyCricketerController : Controller
  6. {
  7. //
  8. // GET: /MyCricketer/
  9. public ActionResult Index()
  10. {
  11. return View("CricketerDetails");
  12. }
  13. private Cricketer GetCricketer()
  14. {
  15. if (Session["cricketer"] == null)
  16. {
  17. Session["cricketer"] = new Cricketer();
  18. }
  19. return (Cricketer)Session["cricketer"];
  20. }
  21. private void RemoveCricketer()
  22. {
  23. Session.Remove("cricketer");
  24. }
  25. [HttpPost]
  26. public ActionResult CricketerDetails(CricketerDetails DetailsData, string BtnPrevious, string BtnNext)
  27. {
  28. if (BtnNext != null)
  29. {
  30. if (ModelState.IsValid)
  31. {
  32. Cricketer CricObj = GetCricketer();
  33. CricObj.ID = DetailsData.ID;
  34. CricObj.Name = DetailsData.Name;
  35. CricObj.FullName = DetailsData.FullName;
  36. CricObj.Age = DetailsData.Age;
  37. CricObj.Team = DetailsData.Team;
  38. return View("CricketerStatistics");
  39. }
  40. }
  41. return View();
  42. }
  43. [HttpPost]
  44. public ActionResult CricketerStatistics(CricketerStatistics StatisticsData, string BtnPrevious, string BtnNext)
  45. {
  46. Cricketer CricObj = GetCricketer();
  47. if (BtnPrevious != null)
  48. {
  49. CricketerDetails DetailsObj = new CricketerDetails();
  50. DetailsObj.ID = CricObj.ID;
  51. DetailsObj.Name = CricObj.Name;
  52. DetailsObj.FullName = CricObj.FullName;
  53. DetailsObj.Age = CricObj.Age;
  54. DetailsObj.Team = CricObj.Team;
  55. return View("CricketerDetails",DetailsObj);
  56. }
  57. if (BtnNext != null)
  58. {
  59. if (ModelState.IsValid)
  60. {
  61. CricObj.OdiRuns = StatisticsData.OdiRuns;
  62. CricObj.TestRuns = StatisticsData.TestRuns;
  63. CricObj.Century = StatisticsData.Century;
  64. CricObj.HalfCentury = StatisticsData.HalfCentury;
  65. CricObj.Wickets = StatisticsData.Wickets;
  66. CricObj.Catches = StatisticsData.Catches;
  67. CricketerDbEntities db = new CricketerDbEntities();
  68. db.Cricketers.Add(CricObj);
  69. db.SaveChanges();
  70. RemoveCricketer();
  71. return View("Success");
  72. }
  73. }
  74. return View();
  75. }
  76. }
  77. }

In the code above the Index() method simply returns a view that represents the CricketerDetails that is the first step of the wizard. The GetCricketer() method is used to check the stored cricketer in the Session and if the cricketer object existsthen that object is returned, otherwise a new cricketer object is created and stored in the Session with a key. The RemoveCricketer() simply removes the cricketer key and Session object.

The CricketerDetails() action method has three parameters named CricketerDetails object, BtnNext and BtnPrevious. The CricketerDetails object contains the value of the properties defined in CricketerDetails. If BtnNext and BtnPrevious is not null then that indicates that the button was clicked.

In the CricketerDetails() action method, the ModelState.IsValid property determines that the model contains the valid data and returns true and GetCustomer() retrieves the cricketer object from the Session. The code then returns to the next view named CricketerStatistics and if there are no validation errors, then the Entity Framework context is instantiated and the cricketer object is added to the Cricketers DbSet. SaveChanges() method to save the data in the database. Finally, the Success view is returned from the method.

Working with View

As I said earlier that I am using the MVC 5 so that here I am using the Razor syntax to define the view. Let's proceed with the following procedure.

Step 1: The MyCricketer folder is created automatically in the Views folder because you've created a New Scaffolded Item with the same name in the Controller, so just right-click on it to add the view.

Adding View in MVC

Step 2: Enter the name as "CricketerDetails".

Creating View in Mvc

Step 3: Replace the code with the following code:

  1. using MvcWizard.Models;
  2. using System.Web.Mvc;
  3. namespace MvcWizard.Controllers
  4. {
  5. public class MyCricketerController : Controller
  6. {
  7. //
  8. // GET: /MyCricketer/
  9. public ActionResult Index()
  10. {
  11. return View("CricketerDetails");
  12. }
  13. private Cricketer GetCricketer()
  14. {
  15. if (Session["cricketer"] == null)
  16. {
  17. Session["cricketer"] = new Cricketer();
  18. }
  19. return (Cricketer)Session["cricketer"];
  20. }
  21. private void RemoveCricketer()
  22. {
  23. Session.Remove("cricketer");
  24. }
  25. [HttpPost]
  26. public ActionResult CricketerDetails(CricketerDetails DetailsData, string BtnPrevious, string BtnNext)
  27. {
  28. if (BtnNext != null)
  29. {
  30. if (ModelState.IsValid)
  31. {
  32. Cricketer CricObj = GetCricketer();
  33. CricObj.ID = DetailsData.ID;
  34. CricObj.Name = DetailsData.Name;
  35. CricObj.FullName = DetailsData.FullName;
  36. CricObj.Age = DetailsData.Age;
  37. CricObj.Team = DetailsData.Team;
  38. return View("CricketerStatistics");
  39. }
  40. }
  41. return View();
  42. }
  43. [HttpPost]
  44. public ActionResult CricketerStatistics(CricketerStatistics StatisticsData, string BtnPrevious, string BtnNext)
  45. {
  46. Cricketer CricObj = GetCricketer();
  47. if (BtnPrevious != null)
  48. {
  49. CricketerDetails DetailsObj = new CricketerDetails();
  50. DetailsObj.ID = CricObj.ID;
  51. DetailsObj.Name = CricObj.Name;
  52. DetailsObj.FullName = CricObj.FullName;
  53. DetailsObj.Age = CricObj.Age;
  54. DetailsObj.Team = CricObj.Team;
  55. return View("CricketerDetails",DetailsObj);
  56. }
  57. if (BtnNext != null)
  58. {
  59. if (ModelState.IsValid)
  60. {
  61. CricObj.OdiRuns = StatisticsData.OdiRuns;
  62. CricObj.TestRuns = StatisticsData.TestRuns;
  63. CricObj.Century = StatisticsData.Century;
  64. CricObj.HalfCentury = StatisticsData.HalfCentury;
  65. CricObj.Wickets = StatisticsData.Wickets;
  66. CricObj.Catches = StatisticsData.Catches;
  67. CricketerDbEntities db = new CricketerDbEntities();
  68. db.Cricketers.Add(CricObj);
  69. db.SaveChanges();
  70. RemoveCricketer();
  71. return View("Success");
  72. }
  73. }
  74. return View();
  75. }
  76. }
  77. }

In the code above, the model has been set to the CricketerDetails. The view renders the form using the BeginForm() HTML helper that posts the CricketerDetails action method of MyCricketerController. The fields for ID, Name and so on are rendered from the LabelFor() and TextBoxFor() helpers. Validations are emitted from the ValidationMeaageFor() helper.

Step 4: Add another view named "CricketerStatistics" and replace the code with the following code:

  1. @model MvcWizard.Models.CricketerStatistics
  2. @{
  3. ViewBag.Title = "Cricketer Statistics";
  4. }
  5. <h2>Cricketer Statistics</h2>
  6. @using (Html.BeginForm("CricketerStatistics", "MyCricketer", FormMethod.Post))
  7. {
  8. @Html.AntiForgeryToken()
  9. <div class="form-horizontal">
  10. <h4>Step 2: Cricketer Statistics</h4>
  11. <hr />
  12. @Html.ValidationSummary(true)
  13. <div class="form-group">
  14. @Html.LabelFor(model => model.OdiRuns, new { @class = "control-label col-md-2" })
  15. <div class="col-md-10">
  16. @Html.TextBoxFor(model => model.OdiRuns)
  17. @Html.ValidationMessageFor(model => model.OdiRuns)
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. @Html.LabelFor(model => model.TestRuns, new { @class = "control-label col-md-2" })
  22. <div class="col-md-10">
  23. @Html.TextBoxFor(model => model.TestRuns)
  24. @Html.ValidationMessageFor(model => model.TestRuns)
  25. </div>
  26. </div>
  27. <div class="form-group">
  28. @Html.LabelFor(model => model.Century, new { @class = "control-label col-md-2" })
  29. <div class="col-md-10">
  30. @Html.TextBoxFor(model => model.Century)
  31. @Html.ValidationMessageFor(model => model.Century)
  32. </div>
  33. </div>
  34. <div class="form-group">
  35. @Html.LabelFor(model => model.HalfCentury, new { @class = "control-label col-md-2" })
  36. <div class="col-md-10">
  37. @Html.TextBoxFor(model => model.HalfCentury)
  38. @Html.ValidationMessageFor(model => model.HalfCentury)
  39. </div>
  40. </div>
  41. <div class="form-group">
  42. @Html.LabelFor(model => model.Wickets, new { @class = "control-label col-md-2" })
  43. <div class="col-md-10">
  44. @Html.TextBoxFor(model => model.Wickets)
  45. @Html.ValidationMessageFor(model => model.Wickets)
  46. </div>
  47. </div>
  48. <div class="form-group">
  49. @Html.LabelFor(model => model.Catches, new { @class = "control-label col-md-2" })
  50. <div class="col-md-10">
  51. @Html.TextBoxFor(model => model.Catches)
  52. @Html.ValidationMessageFor(model => model.Catches)
  53. </div>
  54. </div>
  55. <div class="form-group">
  56. <div class="col-md-offset-2 col-md-10">
  57. <input type="submit" name="BtnPrevious" value="Previous" class="btn btn-default" />
  58. <input type="submit" name="BtnNext" value="Finish" class="btn btn-default" />
  59. </div>
  60. </div>
  61. </div>
  62. }

Step 5: Add another view named "Success" and replace the code with the following code:

  1. @{
  2. ViewBag.Title = "Success";
  3. }
  4. <h3>Cricketer Saved Successfully! Thanks</h3>
  5. <div>
  6. @Html.ActionLink("Add Another Cricketer", "Index", "MyCricketer")
  7. </div>

Step 6: Open the Views\Shared-_Layout.cshtml file to modify the code as shown in the highlighted code below:

  1. <title>@ViewBag.Title - Mvc Wizard App</title>
  1. <ul class="nav navbar-nav">
  2. <li>@Html.ActionLink("Home", "Index", "Home")</li>
  3. <li>@Html.ActionLink("About", "About", "Home")</li>
  4. <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  5. <li>@Html.ActionLink("Cricketer", "Index", "MyCricketer")</li>
  6. </ul>

  1. <footer>
  2. <p>© @DateTime.Now.Year - Mvc Wizard Application</p>
  3. </footer>

That's all for the Model, View and Controller.

Run the Application

Step 1: Press Ctrl+F5 or F5 to run the application and click on the Cricketer link.

Accessing Controller in Mvc

Step 2: Enter the details of cricketer in the first step of the wizard and click on "Next".

Mvc Wizard First Step

Step 3: Fill in the rest of the statistics of cricketer in the second step of the wizard and click on "Finish".

Mvc Wizard Second Step

You can also click on the Previous button to edit in the Details view.

Step 4: The Success View opens and the data saved successfully. You can add another cricketer also from here.

Add Another Cricketer

You can also see the Validation Message, if the wrong data was inserted.

Data Annotation in MVC

Summary

This articles has described how to create the wizard in the MVC Web Application. We learned in the second part how to create a wizard using Ajax. Thanks for reading and Happy Coding!