为什么当我提交表单时，我的 blazor 中的属性总是变为空

Question

这是我的代码：

据我所知，我正在创建该类的一个新实例，将每个属性绑定到表单中的类，然后转换为 JSON 并打印。我错过了什么？

@inject IIdentityService IdentityService;
@inject ErrorService ErrorService;

<div class=" w-full flex justify-center text-main  ">
    <div class="flex w-full">
        <div class="w-1/2 flex">
            <div class="w-full h-[100vh] bg-cover bg-center"
                 style="background-image: url('./images/identity/login.jpg')">
            </div>
        </div>
        <div class="bg-white p-8 w-1/2 rounded-lg pt-[10%] px-[5%]">
            <EditForm Model="RegisterModel" OnValidSubmit="HandleValidSubmit" FormName="RegisterForm">
                <DataAnnotationsValidator/>
                <ValidationSummary/>

                <!-- First Name and Last Name -->
                <div class="mb-4 flex justify-between">
                    <InputText
                        @bind-Value="FirstName"
                        placeholder="First Name"
                        class="form-control mt-1 block w-[48%] px-6 py-4 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                        required/>
                    <ValidationMessage For="@(() => FirstName)"/>

                    <InputText
                        @bind-Value="LastName"
                        placeholder="Last Name"
                        class="form-control mt-1 block w-[48%] px-6 py-4 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                        required/>
                    <ValidationMessage For="@(() => LastName)"/>
                </div>

                <!-- Phone Number -->
                <div class="mb-4">
                    <InputText
                        @bind-Value="RegisterModel.PhoneNumber"
                        placeholder="Phone Number"
                        class="form-control mt-1 block w-full px-6 py-4 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                        required/>
                    <ValidationMessage For="@(() => RegisterModel.PhoneNumber)"/>
                </div>

                <!-- Email -->
                <div class="mb-4">
                    <InputText
                        @bind-Value="RegisterModel.Email"
                        type="email"
                        placeholder="Email"
                        class="form-control mt-1 block w-full px-6 py-4 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                        required/>
                    <ValidationMessage For="@(() => RegisterModel.Email)"/>
                </div>

                <!-- Password -->
                <div class="mb-4">
                    <InputText
                        @bind-Value="RegisterModel.Password"
                        type="password"
                        placeholder="Password"
                        class="form-control mt-1 block w-full px-6 py-4 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                        required/>
                    <ValidationMessage For="@(() => RegisterModel.Password)"/>
                </div>

                <!-- Register Button -->
                <div>
                    <button type="submit"
                            class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-sm text-white bg-[#00205c] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-xl transition-all ease-out">
                        Register
                    </button>
                </div>
            </EditForm>

            <div class="w-full flex justify-between mt-3  ">
                <button class="hover:underline" type="button">
                    <NavLink href="/login">
                        Already Have An Account?
                    </NavLink>
                </button>
                <button class="hover:underline " type="submit">
                    <a href="">
                        Forgot Password?
                    </a>
                </button>
            </div>
        </div>
    </div>
</div>

@code {

    [SupplyParameterFromForm(FormName = "RegisterForm")]
    private RegisterFormModel RegisterModel { get; set; } = RegisterFormModel.Empty;

    private string FirstName { get; set; } = string.Empty;
    private string LastName { get; set; } = string.Empty;

    private async Task HandleValidSubmit()
    {
        RegisterModel.Username = $"{FirstName} {LastName}";

        var result = await IdentityService.Register(RegisterModel);

        if (result.IsFailure)
        {
            ErrorService.SetErrorMessage(result.ErrorTypes);
        }
    }

问题是当我将表单值绑定到 p 标签时，它仍然显示我的输入值，但是当我发送提交时，它变成 null 或者我应该说默认值。

我还在服务器中检查它并尝试更改后端中 DTO 的默认值，这样我就可以知道当我发送时，我的 blazor 表单中的绑定值是空或 null。

我能做什么？ @rendermode 在 blazor wasm 中不起作用，或者我只是错过了一些东西

Answer 1

您只需绑定整个模型名称即可。

 <InputText @bind-Value="RegisterModel.FirstName" ...
...
 <InputText @bind-Value="RegisterModel.LastName" ...