Lesson 2
Dynamic Form Generation in Razor Pages
Introduction

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!

Creating the Form Model

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

C#
1public class FormField
2{
3    public int Id { get; set; }
4    public string Label { get; set; }
5    public string Value { get; set; }
6}
  • 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.
Initializing Form Fields

In DynamicFormModel, we initialize form fields.

C#
1public class DynamicFormModel : PageModel
2{
3    public List<FormField> FormFields { get; set; }
4    public Dictionary<string, string> SubmittedData { get; set; }
5
6    public void OnGet()
7    {
8        FormFields = new List<FormField>
9        {
10            new FormField { Id = 1, Label = "Field 1" },
11            new FormField { Id = 2, Label = "Field 2" }
12        };
13    }
14}
Building the Razor Page

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

HTML, XML
1@foreach (var field in Model.FormFields)
2{
3    <div class="form-group">
4        <label class="control-label">@field.Label</label>
5        <input name="field_@field.Id" type="text" class="form-control" value="@field.Value" />
6    </div>
7}
8<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 Submission

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.

C#
1public void OnPost()
2{
3    // Initialize FormFields to prevent null references during Post
4    OnGet();
5    
6    SubmittedData = new Dictionary<string, string>();
7    
8    foreach (var field in FormFields)
9    {
10        string input = Request.Form[$"field_{field.Id}"];
11        if (string.IsNullOrEmpty(input))
12        {
13            ModelState.AddModelError($"field_{field.Id}", $"{field.Label} is required.");
14        }
15        else
16        {
17            SubmittedData.Add(field.Label, input);
18            field.Value = input;
19        }
20    }
21
22    if (!ModelState.IsValid)
23    {
24        return;
25    }
26    
27    // Handle form submission
28}
  • Request.Form: Retrieves submitted data.
  • ModelState.AddModelError: Adds an error if a field is empty.
  • SubmittedData: Stores valid inputs for display.
Summary and Next Steps

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!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.