Why does my form submit null values when bound to object?

Question

I am using .NET 8.0

When I submit my form and print the results to the console, it gives the default values of the form. In this case, each of them is null.

Here is the code for the form and blazor code block.

From what I can see, I am creating a new instance of the class, binding each attribute to the class in the form, then converting to JSON and printing. What am I missing?

<EditForm Model="@addressToBeCorrected" FormName="addressForm" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group col-md-4">
        <label for="Number">Number</label>
        <InputText id="Number" class="form-control" @bind-Value="@addressToBeCorrected.Number" />
    </div>

    <div class="form-group col-md-4">
        <label for="Street">Street</label>
        <InputText id="Street" class="form-control" @bind-Value="@addressToBeCorrected.Street" />
    </div>

    <div class="form-group col-md-4">
        <label for="Unit">Unit</label>
        <InputText id="Unit" class="form-control" @bind-Value="@addressToBeCorrected.Unit" />
    </div>

    <div class="form-group col-md-4">
        <label for="City">City</label>
        <InputText id="City" class="form-control" @bind-Value="@addressToBeCorrected.City" />
    </div>

    <div class="form-group col-md-4">
        <label for="Postcode">Postcode</label>
        <InputText id="Postcode" class="form-control" @bind-Value="@addressToBeCorrected.Postcode" />
    </div>

    <div class="form-group col-md-4">
        <label for="Region">Region</label>
        <InputText id="Region" class="form-control" @bind-Value="@addressToBeCorrected.Region" />
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
    private Models.InputAddress addressToBeCorrected = new Models.InputAddress();

    private async Task HandleValidSubmit()
    {
        Console.WriteLine(addressToBeCorrected.Number);

        // convert the InputAddress object to a JSON string
        string json = JsonSerializer.Serialize(addressToBeCorrected);

        Console.WriteLine(json);
        // send the JSON string to the server
    }
}

Here is the code for the InputAddress class:

public class InputAddress

{
    public string? Number { get; set; }
    public string? Street { get; set; }
    public string? Unit { get; set; }
    public string? City { get; set; }
    public string? Postcode { get; set; }
    public string? Region { get; set; }
}

Thank you to the commenters below, the issue I was having was because I hadn't set the interactivity for the page using @rendermode. This was resolved with this.

Answer 1

You probably just need need the line @rendermode InteractiveServer

@page "/address"
@using System.Text.Json
@rendermode InteractiveServer

... the EditForm and the rest