如何将输入从 Blazor 组件传递到核心 MVC 控制器？

Question

鉴于此Edit.cshtml ：

@model User

<form asp-action="Edit">
    <component type="typeof(EditUser)" render-mode="ServerPrerendered" param-User="Model" />
    <input type="submit" value="Save" />
</form>

和这个EditUser.razor ：

<input class="form-control" type="text" @bind-value="User.Name" />

@code {
    [Parameter]
    public User User { get; set; }
}

使用这个User.cs模型：

public class User 
{
    public int Id { get; set; }
    public string Name { get; set; }
}

和这个UserController.cs ：

// GET
public async Task<IActionResult> Edit(int id)
{
    var user = await _context.Users.FindAsync(id);
    if (user == null)
    {
        return NotFound();
    }

    return View(user);
}

[HttpPost]
public async Task<IActionResult> Edit(int id, [Bind("Id,Name")] User user)
{
    if (ModelState.IsValid) 
    {
        _context.Update(user);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    return View(user);
}

但这似乎不起作用，因为传递给 Edit 方法的 User 是空的。 如何将带有 Blazor 组件中输入值的 User 传递给 UserController？ 有什么方法可以将 Blazor 组件的输入值完全输入到控制器中？

Answer 1

你应该用一点 JavaScript 来帮助自己。 基本上，它将使用 JSRuntime（在 Blazor 和 JS 之间进行通信的正确方式）将更改的数据发送回视图。 这可能不是它在引擎盖下的工作原理，但你应该明白:-)

1. 编辑.cshtml：

a) 在表单部分的某处添加一个隐藏项：

<input type="hidden" asp-for="Name" id="Name" />

b) 在 Edit.cshtml 底部添加一些 JS。 此函数将从 Blazor 组件获取数据并将它们传递给输入项。

<script>
    window.updateUserName = function (userName) {
        document.getElementById('Name').value = userName;
        }
</script>

2. 在 EditUser.razor 中：

a) 输入项中的一些更改 - 应如下所示：

<input class="form-control" @onchange="async (e) => { User.Name = e.Value.ToString(); await UpdateUserName(); }" value="@User.Name"  />

这允许调用自定义代码以使用下面提到的方法将更改的数据发送回视图。

b) 在@code 部分：

public async Task UpdateUserName()
{
    await JSRuntime.InvokeVoidAsync("updateUserName", User.Name);
}

就这样。 我希望它有帮助。