Blazor注册表单提交空值问题求助

构建注册页面时，填写表单内容并点击「创建账户」按钮后，提交的是空值。通过REST Client直接发送POST请求测试，数据能正常保存到数据库，仅当用户在表单输入值提交时会发送空值。

Blazor页面代码 #

@page "/CreateAccount"

@using System.Net.Http
@using System.Net.Http.Json
@using WebApp.Models

@inject IHttpClientFactory HttpClientFactory
@inject NavigationManager NavigationManager

<PageTitle>Create Account</PageTitle>

<div class="d-flex justify-content-center align-items-center vh-100 bg-dark text-white">
    <EditForm Model="@user" OnValidSubmit="RegisterAccount" class="text-center w-25" FormName="CreateAccount">
        <h1 class="mb-5">Create an Account</h1>

        <div class="form-group">
            <label for="name">Name</label>
            <InputText id="name" @bind-Value="user.Name" class="form-control" />
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <InputText id="email" @bind-Value="user.Email" class="form-control" />
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <InputText id="password" @bind-Value="user.Password" type="password" class="form-control" />
        </div> 

        <button type="submit" class="btn btn-primary mt-4">Create Account</button>
    </EditForm>
</div>

@code {
    private AccountDetails user = new AccountDetails();

    private async Task RegisterAccount()
    {
        Console.WriteLine($"Email: {user.Email}");
        Console.WriteLine($"Username: {user.Name}");
        Console.WriteLine($"Password: {user.Password}");

        var httpClient = HttpClientFactory.CreateClient("ApiClient");
        var response = await httpClient.PostAsJsonAsync("api/AccountDetails", user);
            
            if (response.IsSuccessStatusCode)
            {
                NavigationManager.NavigateTo("/HomeManager");
            }
            else
            {
                Console.WriteLine("Error: " + response.ReasonPhrase);
            }
        }
    }

模型代码 #

using System.ComponentModel.DataAnnotations;

namespace WebApp.Models
{
    public class AccountDetails
    {
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [EmailAddress(ErrorMessage = "Invalid email address")]
        public string Email { get; set; } = string.Empty;

        [Required(ErrorMessage = "Username is required")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "Password is required")]
        [MinLength(6, ErrorMessage = "Password must be at least 6 characters long")]
        public string Password { get; set; } = string.Empty;

        public DateTime CreatedAt { get; set; } = DateTime.Now;
    }
}

API控制器代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using WebApp.Data;
using WebApp.Models;
using System.Threading.Tasks;

namespace WebApp.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class AccountDetailsController : ControllerBase
    {
        private readonly AccountDetailsContext _context;

        public AccountDetailsController(AccountDetailsContext context)
        {
            _context = context;
        }

        [HttpPost]
        public async Task<IActionResult> PostAccountDetails([FromBody] AccountDetails accountDetails)
        {
            if (accountDetails == null)
            {
                Console.WriteLine("Received null data.");
                return BadRequest("Invalid data.");
            }

            Console.WriteLine($"Received data: Name={accountDetails.Name}, Email={accountDetails.Email}, Password={accountDetails.Password}");

            try
            {
                _context.AccountDetails.Add(accountDetails);
                await _context.SaveChangesAsync();
                return Ok();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error: {ex.Message}");
                return StatusCode(500, $"Internal server error: {ex.Message}");
            }
        }
    }
}

1. 先确认Blazor端是否获取到输入值 #

运行Blazor项目，打开浏览器控制台，填写表单后点击提交，查看RegisterAccount方法中的Console.WriteLine输出：

• 如果输出为空，说明表单绑定存在问题；
• 如果输出有值，说明问题出在数据序列化/API接收环节。

2. 修复表单绑定问题 #

在EditForm内添加验证组件，确保表单验证逻辑生效，同时排查绑定语法：

<EditForm Model="@user" OnValidSubmit="RegisterAccount" class="text-center w-25" FormName="CreateAccount">
    <!-- 添加这两个组件 -->
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <h1 class="mb-5">Create an Account</h1>
    <!-- 原有表单字段保持不变 -->
</EditForm>

验证组件会触发模型的[Required]等规则，避免无效提交，同时能直观显示绑定或验证错误。

3. 修复序列化/API接收问题 #

如果Blazor端能获取到值，但API收到空值，大概率是序列化配置不匹配：

方案A：统一序列化规则

在模型类中添加JsonPropertyName标注，确保序列化的键名与API接收的一致：

using System.ComponentModel.DataAnnotations;
using System.Text.Json.Serialization; // 新增引用

namespace WebApp.Models
{
    public class AccountDetails
    {
        [Key]
        [JsonPropertyName("id")]
        public int Id { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [EmailAddress(ErrorMessage = "Invalid email address")]
        [JsonPropertyName("email")]
        public string Email { get; set; } = string.Empty;

        [Required(ErrorMessage = "Username is required")]
        [JsonPropertyName("name")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "Password is required")]
        [MinLength(6, ErrorMessage = "Password must be at least 6 characters long")]
        [JsonPropertyName("password")]
        public string Password { get; set; } = string.Empty;

        [JsonPropertyName("createdAt")]
        public DateTime CreatedAt { get; set; } = DateTime.Now;
    }
}

方案B：统一使用Newtonsoft.Json序列化

如果API使用Newtonsoft.Json而非默认的System.Text.Json，需要在Blazor端同步配置：

1. 安装Microsoft.AspNetCore.Mvc.NewtonsoftJson包；
2. 在Blazor的Program.cs中配置HttpClient：

builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri("你的API基础地址");
}).AddNewtonsoftJson();

3. 修改RegisterAccount方法的请求代码：

private async Task RegisterAccount()
{
    Console.WriteLine($"Email: {user.Email}");
    Console.WriteLine($"Username: {user.Name}");
    Console.WriteLine($"Password: {user.Password}");

    var httpClient = HttpClientFactory.CreateClient("ApiClient");
    // 使用Newtonsoft.Json序列化
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(user);
    var content = new StringContent(json, System.Text.Encoding.UTF8, "application/json");
    var response = await httpClient.PostAsync("api/AccountDetails", content);
            
    if (response.IsSuccessStatusCode)
    {
        NavigationManager.NavigateTo("/HomeManager");
    }
    else
    {
        Console.WriteLine("Error: " + response.ReasonPhrase);
    }
}

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