Blazor表单点击提交先刷新页面，提交时模型为空的问题求助

点击提交按钮时触发了浏览器的默认表单提交行为，导致页面强制刷新，组件重新初始化，原来绑定的模型数据被重置为新实例，因此提交时获取不到用户输入的数据。

解决方案一：拦截浏览器默认提交行为 #

直接在提交按钮上添加@onclick:preventDefault指令，阻止浏览器的默认表单提交逻辑：

<button type="submit" class="btn btn-warning" @onclick:preventDefault>Save user</button>

解决方案二：手动触发Blazor表单提交 #

通过EditForm引用手动调用提交方法，完全绕过浏览器默认提交：

1. 给EditForm添加引用标识：

<EditForm @ref="_editForm" Model="@userModel" OnValidSubmit="@HandleValidRequest" OnInvalidSubmit="@HandleInvalidRequest" FormName="sample">

2. 在@code块中声明EditForm引用变量：

private EditForm _editForm;

3. 修改提交按钮类型为button，并绑定手动提交逻辑：

<button type="button" class="btn btn-warning" @onclick="() => _editForm.SubmitAsync()">Save user</button>

额外修复：代码中的无效字符 #

注意到你代码里Last Name对应的div有多余的z字符，需要删除以避免布局问题：

<!-- 修复前 -->
<div class="form-group">z
    <label class="col-md-3">Last Name</label>
    <InputText class="col-md-8 form-control" @bind-Value="@userModel.LastName" id="lastName"></InputText>
</div>

<!-- 修复后 -->
<div class="form-group">
    <label class="col-md-3">Last Name</label>
    <InputText class="col-md-8 form-control" @bind-Value="@userModel.LastName" id="lastName"></InputText>
</div>

完整修改后的代码示例 #

@page "/user"
@page "/user/{id}"

@inject IUserService _userService;
@inject NavigationManager _navigationManager;

@using AppOne.Entities.Dtos.Responses
@using AppOne.Entities.Dtos.Requests

@if (!Id.HasValue)
{
    <PageTitle>Add user</PageTitle>
    <h1>Add user</h1>

}
else
{
    <PageTitle>user Management</PageTitle>
    <h1>user Management</h1>
}


<div class="row">
    <EditForm @ref="_editForm" Model="@userModel" OnValidSubmit="@HandleValidRequest" OnInvalidSubmit="@HandleInvalidRequest" FormName="sample">
        <DataAnnotationsValidator />
        <ValidationSummary />
            
        <div class="form-group">
            <label class="col-md-3">First Name</label>
            <InputText class="col-md-8 form-control" @bind-Value="@userModel.FirstName" id="firstName"></InputText>
        </div>
        <div class="form-group">
            <label class="col-md-3">Last Name</label>
            <InputText class="col-md-8 form-control" @bind-Value="@userModel.LastName" id="lastName"></InputText>
        </div>
        <div class="form-group">
            <label class="col-md-3">Number</label>
            <InputNumber class="col-md-8 form-control" @bind-Value="@userModel.UserNumber" id="nb"></InputNumber>
        </div>
        <div class="form-group">
            <label class="col-md-3">Date Of Birth</label>
            <InputDate class="col-md-8 form-control" @bind-Value="@userModel.DateOfBirth" id="dob"></InputDate>
        </div>
       
        <button type="button" class="btn btn-warning" @onclick="() => _editForm.SubmitAsync()">Save user</button>
           
        @if (Id.HasValue)
        {
            <a @onclick="DeleteUser" class="btn btn-danger">Delete</a>
        }
       
        <div class="form-group">
            <p>@Message</p>
        </div>
    </EditForm>
</div>

@code {

    [Parameter] public Guid? Id { get; set; }
    protected string Message = string.Empty;
    private EditForm _editForm;

    public GetUserResponse userModel { get; set; } = new GetUserResponse();

    protected override async Task OnInitializedAsync()
    {
        if (Id.HasValue)
        {
            var response = await _userService.GetUserById(Id.Value);

            if (response != null)
                 userModel = response;
        }
    }

    protected void HandleInvalidRequest()
    {
        Message = "Something went wrong";
    }

    protected void ReturnToUsers()
    {
        _navigationManager.NavigateTo("/users");
    }

    protected async Task DeleteUser()
    {
        if (Id.HasValue)
        {
            var response = await _userService.DeleteUser(Id.Value);

            if (response)
                _navigationManager.NavigateTo("/users");
            else
                Message = "Something went wrong, please try again later";
        }
    }

    private async Task HandleValidRequest()
    {
        if (!Id.HasValue)
        {
            var request = new CreateUserRequest()
            {
                UserNumber = userModel.UserNumber,
                FirstName = userModel.FirstName,
                DateOfBirth = userModel.DateOfBirth,
                LastName = userModel.LastName
            };
            var result = await _userService.AddUser(request);
            
            if (result != null)
                _navigationManager.NavigateTo("/users");
            else
                Message = "Something went wrong, please try again later";
        }
        else
        {
            var request = new UpdateUserRequest()
            {
                UserId = userModel.UserId,
                UserNumber = userModel.UserNumber,
                FirstName = userModel.FirstName,
                DateOfBirth = userModel.DateOfBirth,
                LastName = userModel.LastName
            };
            
            var response = await _userService.UpdateUser(Id.Value, request);

            if (response)
                _navigationManager.NavigateTo("/users");
            else
                Message = "Something went wrong, please try again later";
        }
    }

}

内容的提问来源于stack exchange，提问作者wandos