Blazor 将字符串发布到 API 获取 NULL

Question

我只是将数据从 blazor 添加到 api。我检查数据是否已绑定并且不为空，但是当它到达控制器时它始终为空。这只是简单的 api 请求。

我只是将数据从 blazor 添加到 api。我检查数据是否已绑定并且不为空，但是当它到达控制器时它始终为空。这只是简单的 api 请求。

[HttpPost]
    public async Task<ActionResult> AddRole(string roleName)
    {
        if (roleName != null)
        {
            await _roleManager.CreateAsync(new IdentityRole(roleName.Trim()));
        }
        return Ok();
    }

Blazor 代码

 @page "/role"
@inject HttpClient client
@inject IJSRuntime js

<h3>Roles</h3>
<small>Add as many role as you wish.</small>
    <div class="form-group">
        <input @bind:event="oninput" @bind="roleName" />
        <a>@roleName</a>

    </div>
    <button type="submit" @onclick="AddNewRole" class="btn btn-success">
        Submit
    </button>

<br>

@if (roles == null)
{
    <text>Loading...</text>
}
else if (roles.Length == 0)
{
    <text>No Records Found.</text>
}
else
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Role Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (RoleDto role in roles)
            {
                <tr>
                    <td>@role.Id</td>
                    <td>@role.Name</td>
                    <td>
                        <button class="btn btn-danger" @onclick="@(() => ManagePermission(role.Id))">Manage Role</button>
                        <a class="btn btn-success" href="role/edit/@role.Id">Edit</a>
                        <button class="btn btn-danger" @onclick="@(() => Delete(role.Id))">Delete</button>
                    </td>
                </tr>
            }

        </tbody>
    </table>
}
@code {
    RoleDto[] roles { get; set; }
    string roleName { get; set; }
    protected override async Task OnInitializedAsync()
    {
        roles = await client.GetFromJsonAsync<RoleDto[]>("api/roles");
    }

    async Task AddNewRole()
    {
        await client.PostAsJsonAsync("api/roles", roleName);
        await OnInitializedAsync();
    }

}

Answer 1

您需要告诉框架参数string role 在您的端点中来自何处。

试试这个：

public async Task<ActionResult> AddRole([FromBody] string roleName) { ... }

传递实际模型而不是字符串会更正式。所以你应该看看这样的东西：

public sealed class SubmitRoleNameModel
{
    public string RoleName { get; set; }
}

那么您的端点将如下所示：

public async Task<ActionResult> AddRole([FromBody] SubmitRoleNameModel roleName) { ... }

你会这样称呼它：

await client.PostAsJsonAsync("api/roles", new SubmitRoleNameModel { RoleName = roleName });

Answer 2

我个人会做的几件事可能会帮助/解决您的问题：

1. 封装您发布的数据和对象。

   • 这是一个整体的良好做法，允许您传递多个值并允许验证

2. 用 [FromBody] 装饰你的方法参数。

   • 这指示了数据所在的框架

3. 确保控制器使用 [ApiController] 属性装饰

   • 默认实现绑定和路由等功能

示例方法

[HttpPost]
public async Task<IActionResult> AddRole([FromBody] RoleRequest request)
{
    ///code for creating a role
}

请求对象示例

public class RoleRequest
{
      public string Name { get; set; }
}

进一步解释控制器实现的微软文档：

https://docs.microsoft.com/en-us/aspnet/core/web-api/?view=aspnetcore-5.0