C# MVC: Multi step form implementation

Question

We are building MVC multi-step form that will have 4 steps:- Contact-details, Car-details, Car-images, Car-condition. At each step, we ask few car related details from the user like this:

We have to save each step information to the database and we have made separate MVC controller for each step, for example:

[HttpGet]
[Route("contact-details/")]
public ActionResult ContactDetails()
{
    return View("~/Views/ContactDetails.cshtml");
}

[HttpPost]
[Route("contact-details/")]
public ActionResult ContactDetails(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
        //extract ContactDetails from ListingDetails and save in db
        return View("~/Views/CarDetails.cshtml");
    return View("~/Views/ContactDetails.cshtml");
}

[HttpPost]
[Route("car-details/")]
public ActionResult CorDetails(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CorDetails from ListingDetails and save in db
      return View("~/Views/CarImages.cshtml");
    return View("~/Views/CarDetails.cshtml");
}

[HttpPost]
[Route("car-images/")]
public ActionResult CarImages(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CarImages from ListingDetails and save in db
      return View("~/Views/CarConditions.cshtml");
    return View("~/Views/CarImages.cshtml");
}

[HttpPost]
[Route("car-condition/")]
public ActionResult CarCondition(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CarCondition from ListingDetails and save in db
      return View("~/Views/ThankYou.cshtml");
    return View("~/Views/CarConditions.cshtml");
}

The ListingDetails has following structure:

class ListingDetails
{
    public ContactDetails contactDetails;
    public CarDetails carDetails;
    public CarImages carImages; 
    public CarConditions carConditions;
}

At next click of Contact-details form, we will send only step1 data. At next click of Car-details form, we will send step1+step2 data. At next click of Car-images form, we will send step1+step2+step3 data. At next click of Car-conditions form, we will send step1+step2+step3+step4 data.

We are sending all previous steps data along with each next click is because of the top navigation. For example user may fill step1, click next=> fill step2, click next, from step3 comes back to step1 and edit something. Now, user go to step3 again through top navigation. So, for this case, we will have to send complete data filled till now with each request.

Can we somehow avoid sending all previous step data with each step?

Is this correct way to implement multi-step form in MVC?

Answer 1

Solution 1

The way I see this you could simply save each step in the database and avoid sending step1 and step2 in step 3.

Example:

Step1 : fill in details, save to db and return a guid. Use this guid as a reference for the entire inquery.

Step2 finished save to db with the given guid but also with an enum indicating which part of the inquery you are at(car for example).

If you step back you know what inquery you are dealiing with since you have your unique guid and you just send the enum as a second parameter and you will get back the desiered data for that step. If you don't have a login it would be a good practice to have some kind of db cleanup if the user would exit the browser and not come back before finishing, scheduled task for db cleanup. Even with a login this would be good to have but with a login the user can come back to previous state.

Solution 2

If for some reason you do not want to follow the above You can save the data in the browser, if you are using ajax request and not reloading the page you could save this in objects and check if they have data after each next/back click and present data via script. I do not recommend this approach since you might lose data if the page reloads and is also script heavy.

Solution 3

You cuuld also use the mvc tempdata, more info about that here Works for a given request and in your case you would constantly need to assign data between requests untill comming to the finalysing step.

I recommend solution 1 but if you want to experiment with others I hope I have given you some help.

Answer 2

It will be better to send data to the server at the final step. Before that the view just toggle on button click or on tab click.