Multi-step Forms with State Management

In this lesson, we will explore how to create multi-step forms in Razor Pages and manage state between steps. Multi-step forms are useful for splitting complex forms into smaller, more manageable sections, enhancing the user experience by not overwhelming users with too much information at once.

State management is critical in multi-step forms because it allows us to remember the information entered by the user across different steps. This lesson will guide you through building a simple two-step form using Razor Pages in ASP.NET Core and managing the form state using a singleton service.

Let's get started by creating a state management class and configuring the service in our project.

To manage form state across steps, we will use a singleton service. This ensures that the form data persists as the user navigates between steps. First, define the FormState class to store form data:

namespace MultiStep.Data
{
    public class FormState
    {
        public string Step1Data { get; set; }
        public string Step2Data { get; set; }
    }
}

Next, ensure that the FormState service is added to the dependency injection container in your Program.cs file:

// Add a simple in-memory object to store form state
builder.Services.AddSingleton<FormState>();

We'll start by creating the first step of our multi-step form. We create a Step1.cshtml file and add the following code:

@page
@model Step1Model
<form method="post">
    <div class="form-group">
        <label asp-for="Step1Data" class="control-label">Input Step 1 Data:</label>
        <input asp-for="Step1Data" name="Step1Data" class="form-control" />
        <span asp-validation-for="Step1Data" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Next</button>
</form>
<a href="/">Back to Home</a>

In this code, we have created a form with an input field for the first step data. The asp-for tag helpers are used to bind the input field to the Step1Data property in the model. The asp-validation-for tag helper displays validation errors, if any.

Next, we will add validation to the Step1Model. We create the Step1.cshtml.cs file and modify it as follows:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using MultiStep.Data;
using System.ComponentModel.DataAnnotations;

public class Step1Model : PageModel
{
    private readonly FormState _formState;

    public Step1Model(FormState formState)
    {
        _formState = formState;
    }

    [BindProperty]
    [Required]
    public string Step1Data { get; set; }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        _formState.Step1Data = Step1Data;
        return RedirectToPage("Step2");
    }
}

In this model, we use the [Required] data annotation to ensure that Step1Data is not left empty. The BindProperty attribute binds form data to the Step1Data property.

The form submission is managed by the OnPost method. When the form is submitted, this method validates the input data. If the data is valid, it updates the _formState.Step1Data with the form data and redirects to the second step.

For the second step, we create the Step2.cshtml file and include the following code:

@page
@model Step2Model

@if (Model.ShowResult)
{
    <h2>Form Submission Complete</h2>
    <p><strong>Step 1 Data:</strong> @Model.Step1Data</p>
    <p><strong>Step 2 Data:</strong> @Model.Step2Data</p>
}
else
{
    <form method="post">
        <div class="form-group">
            <label asp-for="Step2Data" class="control-label">Input Step 2 Data:</label>
            <input asp-for="Step2Data" name="Step2Data" class="form-control" />
            <span asp-validation-for="Step2Data" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
}
<a href="/">Back to Home</a>

In this file, we created a form with an input field for the second step data and display the results after form submission if ShowResult is true.

Now, let's create the Step2.cshtml.cs file and modify it as follows:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using MultiStep.Data;
using System.ComponentModel.DataAnnotations;

public class Step2Model : PageModel
{
    private readonly FormState _formState;

    public Step2Model(FormState formState)
    {
        _formState = formState;
    }

    [BindProperty]
    [Required]
    public string Step2Data { get; set; }

    public string Step1Data => _formState.Step1Data;

    [BindProperty(SupportsGet = true)]
    public bool ShowResult { get; set; }

    public void OnGet()
    {
        Step2Data = _formState.Step2Data;
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        _formState.Step2Data = Step2Data;
        return RedirectToPage(new { ShowResult = true });
    }
}

In this model, we access the state data from the first step using the _formState object and display it in the view.

The OnPost method validates the second step data and updates the _formState.Step2Data property. If validation passes, it sets ShowResult to true and reloads the page to display the results.

And that's it! We now have a 2-step form that manages the intermediate steps and displays the data entered through both steps at the end. Adding more steps to this pipeline, if needed, is also fairly simple.

In this lesson, you learned how to create a multi-step form in Razor Pages and manage state across steps. We covered:

• Writing HTML and Razor code for multi-step forms.
• Adding validation using data annotations.
• Managing state between form steps using a singleton service.
• Handling form submissions and displaying results.

Managing state in multi-step forms improves user experience by preserving data entered by users across different steps. Congratulations on reaching the end of the course! To reinforce your learning, proceed to the practice exercises, and continue building on these foundational skills. Happy coding!