ASP.NET MVC Core/6：多个提交按钮

Question

我需要多个提交按钮来在控制器中执行不同的操作。

我在这里看到了一个优雅的解决方案：How do you handle multiple submit buttons in ASP.NET MVC Framework? 使用此解决方案，可以使用自定义属性装饰操作方法。处理路由时，此自定义属性的方法会检查属性的属性是否与单击的提交按钮的名称匹配。

但在 MVC Core (RC2 nightly build) 中，我没有找到 ActionNameSelectorAttribute（我还搜索了 Github 存储库）。我找到了一个类似的解决方案，它使用ActionMethodSelectorAttribute (http://www.dotnetcurry.com/aspnet-mvc/724/handle-multiple-submit-buttons-aspnet-mvc-action-methods)。

ActionMethodSelectorAttribute 可用，但方法 IsValidForRequest 具有不同的签名。有一个RouteContext 类型的参数。但是我在那里找不到帖子数据。所以我没有什么可与我的自定义属性进行比较的。

在 MVC Core 中是否有与以前的 MVC 版本中类似的优雅解决方案？

Answer 1

您可以为此使用 HTML5 @987654321@ 属性，而不是在服务器端路由它。

<form action="" method="post">
    <input type="submit" value="Option 1" formaction="DoWorkOne" />
    <input type="submit" value="Option 2" formaction="DoWorkTwo"/>
</form>

然后只需像这样的控制器操作：

[HttpPost]
public IActionResult DoWorkOne(TheModel model) { ... }

[HttpPost]
public IActionResult DoWorkTwo(TheModel model) { ... }

对于旧版浏览器来说，一个好的 polyfill 可以是 found here。

请记住...

1. 当用户按下回车键时，总是会选择第一个提交按钮。
2. 如果发布的操作也出现错误 - ModelState 或其他错误，则需要将用户发送回正确的视图。 （不过，如果您通过 AJAX 发布，这不是问题。）

Answer 2

ASP.NET Core 1.1.0 具有创建 formaction 属性的 FormActionTagHelper。

<form>
    <button asp-action="Login" asp-controller="Account">log in</button>
    <button asp-action="Register" asp-controller="Account">sign up</button>
</form>

呈现如下：

<button formaction="/Account/Login">log in</button>
<button formaction="/Account/Register">sign up</button>

它也适用于input 标签type="image" 或type="submit"。

Answer 3

我之前和过去都这样做过，我会将表单发布到不同的控制器操作。问题是，在服务器端验证错误上，您要么陷入困境：

1. return View(vm) 将帖子操作名称留在网址中……呸。
2. return Redirect(...) 需要使用TempData 来保存ModelState。也很糟糕。

这是我选择做的事情。

1. 使用按钮的name 绑定到POST 上的变量。
2. 按钮value是一个枚举来区分提交动作。 Enum 是类型安全的，并且在 switch 语句中效果更好。 ;)
3. POST 到与 GET 相同的操作名称。这样一来，您就不会在服务器端验证错误的 URL 中获得 POST 操作名称。
4. 如果出现验证错误，请按照正确的 PGR 模式重建您的视图模型和 return View(viewModel)。

使用这种技术，就不用TempData了！

在我的用例中，我有一个用户/详细信息页面，其中包含“添加角色”和“删除角色”操作。

这里是按钮。它们可以是按钮而不是输入标签... ;)

<button type="submit" class="btn btn-primary" name="SubmitAction" value="@UserDetailsSubmitAction.RemoveRole">Remove Role</button>
<button type="submit" class="btn btn-primary" name="SubmitAction" value="@UserDetailsSubmitAction.AddRole">Add Users to Role</button>

这里是控制器动作。我将 switch 代码块重构为它们自己的函数，以使它们更易于阅读。我必须发布到 2 个不同的视图模型，因此不会填充一个，但模型绑定器不在乎！

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Details(
    SelectedUserRoleViewModel removeRoleViewModel, 
    SelectedRoleViewModel addRoleViewModel,
    UserDetailsSubmitAction submitAction)
{
    switch (submitAction)
    {
        case UserDetailsSubmitAction.AddRole:
        {
            return await AddRole(addRoleViewModel);
        }
        case UserDetailsSubmitAction.RemoveRole:
        {
            return await RemoveRole(removeRoleViewModel);
        }
        default:
            throw new ArgumentOutOfRangeException(nameof(submitAction), submitAction, null);
    }
}

private async Task<IActionResult> RemoveRole(SelectedUserRoleViewModel removeRoleViewModel)
{
    if (!ModelState.IsValid)
    {
        var viewModel = await _userService.GetDetailsViewModel(removeRoleViewModel.UserId);
        return View(viewModel);
    }

    await _userRoleService.Remove(removeRoleViewModel.SelectedUserRoleId);

    return Redirect(Request.Headers["Referer"].ToString());
}

private async Task<IActionResult> AddRole(SelectedRoleViewModel addRoleViewModel)
{
    if (!ModelState.IsValid)
    {
        var viewModel = await _userService.GetDetailsViewModel(addRoleViewModel.UserId);
        return View(viewModel);
    }

    await _userRoleService.Add(addRoleViewModel);

    return Redirect(Request.Headers["Referer"].ToString());
}

您也可以post the form using AJAX。

Answer 4

更好的答案是使用jQuery Unobtrusive AJAX 并忘记所有的混乱。

1. 您可以为控制器操作指定语义名称。
2. 您不必重定向或使用临时数据。
3. 在服务器端验证错误的 URL 中没有发布操作名称。
4. 在服务器端验证错误时，您可以返回表单或仅返回错误消息。