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

【问题标题】：How do I pass input from a Blazor component to a Core MVC Controller?如何将 Blazor 组件的输入传递到核心 MVC 控制器？
【发布时间】：2023-03-14 02:44:01
【问题描述】：

鉴于此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 组件中输入值的用户传递给 UserController？有没有办法将 Blazor 组件的输入值获取到控制器中？

【问题讨论】：

标签： c# asp.net-mvc asp.net-core-mvc blazor

【解决方案1】：

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

Edit.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>

在 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);
}

仅此而已。希望对你有帮助。

【讨论】：