Getting Started With Wizard in ASP.Net MVC 5: Part 1

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:

Each step of the wizard has the action method and the corresponding view.
The data is stored in a view model class in each step.
All action methods have three parameters.
The Action method gets the data and stores it in the Session until the final step.
The action method returns the view for the next step if the "Next" button is clicked.
The validations are checked after the "Next" button is clicked.

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

Create MVC Web Application
Working with Entity Data Model
Working with Model
Working with Controller
Working with View
Run the application

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:

Cricketer Details: ID, Name, FullName, Age and Team
Cricketer Statistics: OdiRuns, TestRuns, Century, HalfCentury, Wickets and Catches

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:

using System.ComponentModel.DataAnnotations;
namespace MvcWizard.Models
{
public class CricketerDetails
{
[Required]
public int ID { get; set; }
[Required]
public string Name { get; set; }
[Required]
public string FullName { get; set; }
[Required]
public int Age { get; set; }
[Required]
public string Team { get; set; }
}
}

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

using System.ComponentModel.DataAnnotations;
namespace MvcWizard.Models
{
public class CricketerStatistics
{
[Required]
public int OdiRuns { get; set; }
[Required]
public int TestRuns { get; set; }
[Required]
public int Century { get; set; }
[Required]
public int HalfCentury { get; set; }
[Required]
public int Wickets { get; set; }
[Required]
public int Catches { get; set; }
}
}

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:

using MvcWizard.Models;
using System.Web.Mvc;
namespace MvcWizard.Controllers
{
public class MyCricketerController : Controller
{
//
// GET: /MyCricketer/
public ActionResult Index()
{
return View("CricketerDetails");
}
private Cricketer GetCricketer()
{
if (Session["cricketer"] == null)
{
Session["cricketer"] = new Cricketer();
}
return (Cricketer)Session["cricketer"];
}
private void RemoveCricketer()
{
Session.Remove("cricketer");
}
[HttpPost]
public ActionResult CricketerDetails(CricketerDetails DetailsData, string BtnPrevious, string BtnNext)
{
if (BtnNext != null)
{
if (ModelState.IsValid)
{
Cricketer CricObj = GetCricketer();
CricObj.ID = DetailsData.ID;
CricObj.Name = DetailsData.Name;
CricObj.FullName = DetailsData.FullName;
CricObj.Age = DetailsData.Age;
CricObj.Team = DetailsData.Team;
return View("CricketerStatistics");
}
}
return View();
}
[HttpPost]
public ActionResult CricketerStatistics(CricketerStatistics StatisticsData, string BtnPrevious, string BtnNext)
{
Cricketer CricObj = GetCricketer();
if (BtnPrevious != null)
{
CricketerDetails DetailsObj = new CricketerDetails();
DetailsObj.ID = CricObj.ID;
DetailsObj.Name = CricObj.Name;
DetailsObj.FullName = CricObj.FullName;
DetailsObj.Age = CricObj.Age;
DetailsObj.Team = CricObj.Team;
return View("CricketerDetails",DetailsObj);
}
if (BtnNext != null)
{
if (ModelState.IsValid)
{
CricObj.OdiRuns = StatisticsData.OdiRuns;
CricObj.TestRuns = StatisticsData.TestRuns;
CricObj.Century = StatisticsData.Century;
CricObj.HalfCentury = StatisticsData.HalfCentury;
CricObj.Wickets = StatisticsData.Wickets;
CricObj.Catches = StatisticsData.Catches;
CricketerDbEntities db = new CricketerDbEntities();
db.Cricketers.Add(CricObj);
db.SaveChanges();
RemoveCricketer();
return View("Success");
}
}
return View();
}
}
}

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:

using MvcWizard.Models;
using System.Web.Mvc;
namespace MvcWizard.Controllers
{
public class MyCricketerController : Controller
{
//
// GET: /MyCricketer/
public ActionResult Index()
{
return View("CricketerDetails");
}
private Cricketer GetCricketer()
{
if (Session["cricketer"] == null)
{
Session["cricketer"] = new Cricketer();
}
return (Cricketer)Session["cricketer"];
}
private void RemoveCricketer()
{
Session.Remove("cricketer");
}
[HttpPost]
public ActionResult CricketerDetails(CricketerDetails DetailsData, string BtnPrevious, string BtnNext)
{
if (BtnNext != null)
{
if (ModelState.IsValid)
{
Cricketer CricObj = GetCricketer();
CricObj.ID = DetailsData.ID;
CricObj.Name = DetailsData.Name;
CricObj.FullName = DetailsData.FullName;
CricObj.Age = DetailsData.Age;
CricObj.Team = DetailsData.Team;
return View("CricketerStatistics");
}
}
return View();
}
[HttpPost]
public ActionResult CricketerStatistics(CricketerStatistics StatisticsData, string BtnPrevious, string BtnNext)
{
Cricketer CricObj = GetCricketer();
if (BtnPrevious != null)
{
CricketerDetails DetailsObj = new CricketerDetails();
DetailsObj.ID = CricObj.ID;
DetailsObj.Name = CricObj.Name;
DetailsObj.FullName = CricObj.FullName;
DetailsObj.Age = CricObj.Age;
DetailsObj.Team = CricObj.Team;
return View("CricketerDetails",DetailsObj);
}
if (BtnNext != null)
{
if (ModelState.IsValid)
{
CricObj.OdiRuns = StatisticsData.OdiRuns;
CricObj.TestRuns = StatisticsData.TestRuns;
CricObj.Century = StatisticsData.Century;
CricObj.HalfCentury = StatisticsData.HalfCentury;
CricObj.Wickets = StatisticsData.Wickets;
CricObj.Catches = StatisticsData.Catches;
CricketerDbEntities db = new CricketerDbEntities();
db.Cricketers.Add(CricObj);
db.SaveChanges();
RemoveCricketer();
return View("Success");
}
}
return View();
}
}
}

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:

@model MvcWizard.Models.CricketerStatistics
@{
ViewBag.Title = "Cricketer Statistics";
}
<h2>Cricketer Statistics</h2>
@using (Html.BeginForm("CricketerStatistics", "MyCricketer", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Step 2: Cricketer Statistics</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.OdiRuns, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.OdiRuns)
@Html.ValidationMessageFor(model => model.OdiRuns)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.TestRuns, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.TestRuns)
@Html.ValidationMessageFor(model => model.TestRuns)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Century, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Century)
@Html.ValidationMessageFor(model => model.Century)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.HalfCentury, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.HalfCentury)
@Html.ValidationMessageFor(model => model.HalfCentury)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Wickets, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Wickets)
@Html.ValidationMessageFor(model => model.Wickets)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Catches, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Catches)
@Html.ValidationMessageFor(model => model.Catches)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" name="BtnPrevious" value="Previous" class="btn btn-default" />
<input type="submit" name="BtnNext" value="Finish" class="btn btn-default" />
</div>
</div>
</div>
}

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

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

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

<title>@ViewBag.Title - Mvc Wizard App</title>

<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Cricketer", "Index", "MyCricketer")</li>
</ul>

<footer>
</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!

30 Comments

Join the conversation! Your thoughts help the community grow.

shweta otari4y ago
Hi.. there is not view coding for CricketerDetails. Can you please share coding for same
Muhammad Ilyas5y ago
CricketerDetails View is missing
Gerson Azabache5y ago
Hi guys, I've made a Wizard in Net Core available in my dev blog https://bravedeveloper.com/2021/10/08/como-hacer-un-wizard-formulario-estilo-next-next-finish-con-net-core-mvc/ its in Net Core and uses EF Code first, and from my post you can get the missing View here (or have an idea). Thanks Nimit this post helped me a lot buddy, hope you enjoy my post as well !
Charles Zvarimwa5y ago
I am a bit confused on the code for the CricketerDetails views, it seems like the same from the controller am I getting this wrong? I am a bit stuck there...
Charles Zvarimwa5y ago
Thank you for such as insightful tutorial, is there any chance I can download this to debug in my own environment. If so may I kindly have the link. Thank you
Antony Judes7y ago
When will you post "how to create a wizard using Ajax in ASP.NET MVC 5"
Robert O'Briant8y ago
Did you ever put out the article describing how to do this with Ajax?
- ajamaeen ajamaeen8y ago
  Check this http://ajamaeen.blogspot.com/2018/03/smart-aspnet-mvc-wizard-part-1.html
Chris Alderson9y ago
Is there any similar tutorials that use more than one table in a database, so for example a registrartion form, i.e. table 1. Id firtsname, Surname, date of birthtable 2. Id Address line1 Address line2 ...etc...table FKtable 3. Id EMC Full name, Address, contact table Fk (Emergency contact EMC) It would be helpful is someone could help me out on this. Thank you
Sagar Mandke9y ago
Nimit sir I have implemented this functionality successfully... But one issue. Previous button is not working. When I click on previous button, client side validation occurs. So I have to fill the data first, then It works perfectly. Any Help ?
Sagar Mandke9y ago
I need help. I am newbie to MVC. I don't want to show ID field on the view. So, I used hidden field for ID. But model is giving error that ID field is required. What should I do now ? any suggestions...
- Nimit Joshi9y ago
  Hi, can you show the view code? If your view is tightly coupled with the model then In that code, the id field is also added. You can remove that code to not show the id column.
- Sagar Mandke9y ago
  I found the solution. anyways thank you for suggestion sir..
Surajit Bera9y ago
But here two view is using.
Surajit Bera9y ago
Nimit Joshi sir Is it cross page posting or wizard??????
- Nimit Joshi9y ago
  It is developed on single view and separated into parts. it is wizard Surajit Bera
Anu V10y ago
Nice article.. thanks for sharing..
Robert McLendon10y ago
> "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." What are the specs for this table? Would it ok to use Code First and just start with your model cose and generate the db from that?
Sr Karthiga10y ago
nice one
Sr Karthiga10y ago
Nice explanation
Shubham Kumar10y ago
nice
Manish Kumar Choudhary12y ago
Nice and very useful post..
Hussain Afridi12y ago
i want to show data from database in html table in asp.net webforms.
- Nimit Joshi12y ago
  I have created an article series in which i am using Asp.Net Web Forms and show the data from the database. Please refer to this link: http://www.c-sharpcorner.com/UploadFile/4b0136/working-with-stored-procedures-using-entity-framework-part/
Pasquale Marmitta12y ago
If you press the previous button (BtnPrevious) then you trigger data validation, so you can't go in the previous form until you fill the input correctly... Any idea about resolving this issue?
- Nimit Joshi12y ago
  Well i can share my code and check out the code. Go to here: https://onedrive.live.com/redir?resid=940C6CC7BE82B264!372&authkey=!ANKPWnmwRVzQISo&ithint=file%2crar
- Nimit Joshi12y ago
  Hello, May be you didn't code in a right way because I can successfully go to the previous Details page without entering the all fields in the Statistics page. Please review your code with this article. Thanks
- Pasquale Marmitta12y ago
  Thanks Nimit for you answer. I checked for differences but seems equal.... Can I download your code to compare with mine, or can I send you my code? I think the problem is on the POST method used by the button (BtnPrevious) that starts data validation. In fact, if I change with a GET method, using a simple ActionLink, it seems working.