Blazor应用中Razor页面数据无法传递至后端的问题排查

核心问题分析 #

你的代码中存在几个关键问题，导致前端输入无法正确传递到后端，以下是逐一排查和修复步骤：

1. 后端控制器参数绑定缺失[FromBody] #

PostAsJsonAsync会将数据以JSON格式发送到请求体中，但ASP.NET Core默认不会自动从请求体绑定复杂类型参数，需要显式添加[FromBody]特性：

修正后的控制器代码：

[HttpPost]
[Route("api/Posts/Create")]
public void Create([FromBody] Posts post)
{
    // 修正日志输出格式，添加占位符才能正确显示参数
    _logger.LogCritical("Data 1: {Post}", post);
    _logger.LogCritical("Data 2: {Content}", post.content);
    _logger.LogCritical("Data 3: {Title}", post.title);
    _dataAccessProvider.AddPosts(post);
}

注意：原日志写法没有占位符，导致参数无法被正确输出，看起来为空，修正后即可显示实际数据。

2. 确认Posts模型类的属性访问权限 #

确保Posts类的属性是public且包含get/set访问器，否则Blazor无法完成双向绑定，后端也无法接收数据：

示例模型代码：

using System.ComponentModel.DataAnnotations;

public class Posts
{
    public int Id { get; set; }

    // 添加[Required]注解，配合前端EditForm做必填验证
    [Required(ErrorMessage = "标题不能为空")]
    public string title { get; set; }

    public string content { get; set; }
}

如果属性是private或只有get方法，绑定会直接失效。

3. 前端EditForm的验证增强 #

虽然你已经使用了EditForm和InputText，但添加数据注解后可以在前端拦截空输入，避免无效请求：

• 确保DataAnnotationsValidator组件已添加（你的代码中已包含）
• ValidationMessage会显示[Required]定义的错误提示，引导用户输入必填内容

4. 前端调试确认数据绑定 #

在SaveUser方法中添加调试输出，确认前端是否正确获取了用户输入：

protected async Task SaveUser()
{
    // 输出到浏览器控制台，查看是否获取到输入值
    Console.WriteLine($"当前输入的标题：{posts.title}");
    Console.WriteLine($"当前输入的内容：{posts.content}");
    
    await Http.PostAsJsonAsync("api/Posts/Create", posts);
    Cancel();
}

如果控制台能正确显示输入值，说明前端绑定正常，问题出在后端；如果为空，检查@bind-Value的拼写和模型属性名是否一致。

5. 确认HttpClient配置正确性 #

确保项目中HttpClient的BaseAddress配置正确，比如在Program.cs中：

// Blazor WebAssembly 配置
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Blazor Server 配置
builder.Services.AddHttpClient("BlogsAPI", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
});

如果BaseAddress错误，请求可能无法到达后端接口。

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