Blazor Server中通过JS Interop展示员工列表时遇500错误求助

梳理你代码里的关键错误点，逐个修正即可解决问题：

1. 存储过程名称不匹配 #

你提到SSMS中创建的存储过程名为getUser，但控制器里执行的是getCstaffInfo，数据库找不到该存储过程会直接抛出异常，返回500：

// 错误写法
var user = await _context.User.FromSqlRaw("EXECUTE getCstaffInfo").ToListAsync();

// 修正为与SSMS中一致的名称
var user = await _context.User.FromSqlRaw("EXECUTE getUser").ToListAsync();

2. JavaScript请求回调函数拼写错误 #

Ajax配置里的succes是拼写错误，正确应为success，虽不会直接导致500，但会导致你无法查看返回结果：

// 错误写法
succes: function (data) {
    debugger
    console.log(data);
}

// 修正后
success: function (data) {
    debugger
    console.log(data);
}

3. Program.cs中的中间件配置错误 #

你写的app.UseMapControllers();是错误的，Blazor Server中配置API控制器需使用app.MapControllers();，该错误会导致API路由无法被正确识别：

// 错误写法
app.UseMapControllers(); 

// 修正后
app.MapControllers();

4. 存储过程返回字段与实体类匹配问题 #

你的存储过程关联了User和UserContact两张表，但控制器返回的是User实体。如果存储过程返回的字段超出User类的定义，EF Core会映射失败抛出异常。解决方式：

• 修改存储过程，仅返回User实体对应的字段；
• 创建包含所有返回字段的DTO类（比如UserWithContactDto），然后用_context.Set<UserWithContactDto>().FromSqlRaw("EXECUTE getUser").ToListAsync()获取数据。

额外建议：Blazor Server最佳实践 #

Blazor Server中不推荐用JQuery Ajax调用API，更合适的方式是直接在C#代码中注入服务调用数据库逻辑，示例：

// 注入数据服务
[Inject]
private IUserService UserService { get; set; }

protected override async Task OnInitializedAsync()
{
    var users = await UserService.GetUsers();
    // 直接处理数据，无需JS交互
}

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