Dynamic Form Generation in Razor Pages

Welcome to this lesson on Dynamic Form Generation in Razor Pages. So far, we've covered integrating client-side validation and exploring advanced Tag Helpers in Razor Pages. These concepts help enhance user interaction and form management in web applications.

In this lesson, we will focus on dynamically generating forms. This is crucial when dealing with forms with varying fields based on different conditions or data sources. By the end of this lesson, you'll be able to generate a form dynamically, handle its submission, and validate user inputs. Let's get started!

To dynamically generate a form, we need a form model. Here, we define a class that represents individual form fields.

public class FormField
{
    public int Id { get; set; }
    public string Label { get; set; }
    public string Value { get; set; }
}

• Id: A unique identifier for the form field.
• Label: The label for the form field.
• Value: The value of the form field, mainly for storing user input.

In DynamicFormModel, we initialize form fields.

public class DynamicFormModel : PageModel
{
    public List<FormField> FormFields { get; set; }
    public Dictionary<string, string> SubmittedData { get; set; }

    public void OnGet()
    {
        FormFields = new List<FormField>
        {
            new FormField { Id = 1, Label = "Field 1" },
            new FormField { Id = 2, Label = "Field 2" }
        };
    }
}

Next, we set up the Razor Page to render these form fields. The code provided below dynamically renders form fields using Razor syntax.

@foreach (var field in Model.FormFields)
{
    <div class="form-group">
        <label class="control-label">@field.Label</label>
        <input name="field_@field.Id" type="text" class="form-control" value="@field.Value" />
    </div>
}
<button type="submit" class="btn btn-primary">Submit</button>

• @foreach: Loops through FormFields and generates input fields.
• <input name=...>: Ensures each input field has a unique name based on the field's id.

Handling form submissions involves processing the input data, validating it, and optionally displaying the submitted data. Here's how to handle form submissions in DynamicFormModel.

public void OnPost()
{
    // Initialize FormFields to prevent null references during Post
    OnGet();
    
    SubmittedData = new Dictionary<string, string>();
    
    foreach (var field in FormFields)
    {
        string input = Request.Form[$"field_{field.Id}"];
        if (string.IsNullOrEmpty(input))
        {
            ModelState.AddModelError($"field_{field.Id}", $"{field.Label} is required.");
        }
        else
        {
            SubmittedData.Add(field.Label, input);
            field.Value = input;
        }
    }

    if (!ModelState.IsValid)
    {
        return;
    }
    
    // Handle form submission
}

• Request.Form: Retrieves submitted data.
• ModelState.AddModelError: Adds an error if a field is empty.
• SubmittedData: Stores valid inputs for display.

In this lesson, we covered how to:

• Set up and understand the provided starter code.
• Create a form model to represent dynamic form fields.
• Build and render a Razor Page that dynamically generates form fields.
• Handle form submissions to process and validate user inputs.

Congratulations on completing the final lesson of this course! You've now learned how to dynamically generate forms in Razor Pages and handle their submissions effectively. Continue practicing these skills to become proficient in developing dynamic web applications. Well done!