Asp.net Mvc html 表单发布到错误的控制器操作答案

【问题标题】：Asp.net Mvc html form is posted to wrong controller actionAsp.net Mvc html 表单发布到错误的控制器操作
【发布时间】：2018-09-19 16:26:39
【问题描述】：

我有一个有 2 个动作的控制器：

public class OrganizationUnitsController : Controller
{
    public ActionResult Create()
    {
        // return empty form
        return View();
    }

    [HttpPost]
    public ActionResult Save(OrganizationUnitViewModel unitViewModel)
    {
        // Save the new unit to the DB
        return View();
    }
}

Create.cshtml是：

@using (Html.BeginForm("Save", "OrganizationUnits", FormMethod.Post, new { @id = "form", @class = "form-horizontal" }))
{

    <!-- Some inputs -->

    <a href="" class="btn btn-primary">Save</a>
}

$('#form')
.on('submit',function (e) {
        e.stopPropagation();

        $.ajax({
            url: '@Url.Action("Save", "OrganizationUnits")',
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                      Name: $('#Name').val(),
                      Admin: JSON.stringify({ 'FullDescription': $('#Admin').val() }),
                      Members: JSON.stringify( $('#users_list_box').val() )
            });
});

问题是当我单击保存按钮时，生成 unitViewModel 并将表单传递给 Save 操作 的 javascript 代码没有被调用，而 Create 操作被调用。

将 @Html.BeginForm() 中的控制器操作更改为 null 并不能解决问题。

我该如何解决？

【问题讨论】：

你的表单标签在生成的html中是什么样子的？贴出create action方法生成的html。
您没有提交按钮（只是一个生成 GET 的链接）
删除你<a>并替换为<input type="submit" class="btn btn-primary" value="Save" />
此行无效url: '@Url.Action("Save", "OrganizationUnits")',。您不能在 JS 脚本文件中使用 Razor html 帮助程序。
@ehsantoghian - 将其设为 <a> 或提交按钮对此没有任何影响 - 您仍然可以处理您想要的任何内容

标签： c# html asp.net-mvc

【解决方案1】：

Stephen Muecke的正确<a href="" class="btn btn-primary">Save</a>有问题，点击它会导致GET，尝试用submit输入类型替换。

<input type="submit" class="btn btn-primary" value="Save" />

并使用e.preventDefault();，因为stopPropagation 阻止事件在事件链中冒泡，而preventDefault 阻止浏览器对该事件执行默认操作。

$('#form').on('submit',function (e) {
    var actionUrl = this.action;
    e.stopPropagation();
    e.preventDefault();
    $.ajax({
        url: actionUrl,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
                  Name: $('#Name').val(),
                  Admin: JSON.stringify({ 'FullDescription': $('#Admin').val() }),
                  Members: JSON.stringify( $('#users_list_box').val() )
        });
});

【讨论】：

你的答案几乎是正确的，问题是错误的 ajax url。如果你改正它，问题就完全解决了

【解决方案2】：

这可能不是你的原因，但我遇到了同样的问题。

我的问题是控制器上有一个 [Authorize] 属性，但调用的操作没有 [AllowAnonymous] 属性。

【讨论】：