在 MVC5 中使用 AJAX 调用

Question

我曾尝试在 MVC5 项目中使用 AJAX 调用，就像网络上的许多类似示例一样，但每次出现错误时，例如 antiforgerytoken、500 等。我正在寻找一个适当的 AJAX 调用方法和控制器操作方法具有所有必要的属性并将模型数据从 View 发送到 Controller Action。以下是我使用的方法：

查看：

@using (Html.BeginForm("Insert", "Account", FormMethod.Post, new { id = "frmRegister" })) 
{
    @Html.AntiForgeryToken()
    //code omitted for brevity
}



<script>

    AddAntiForgeryToken = function (data) {
    data.__RequestVerificationToken = $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val();
    return data;
    };

$('form').submit(function (event) {
        event.preventDefault();

        //var formdata = JSON.stringify(@Model); //NOT WORKING???
        var formdata = new FormData($('#frmRegister').get(0));
        //var token = $('[name=__RequestVerificationToken]').val(); //I also tried to use this instead of "AddAntiForgeryToken" method but I encounter another error

        $.ajax({
            type: "POST",
            url: "/Account/Insert",
            data: AddAntiForgeryToken({ model: formdata }),
            //data: { data: formdata, __RequestVerificationToken: token },
            //contentType: "application/json",
            processData: false,
            contentType: false,

            datatype: "json",
            success: function (data) {
                $('#result').html(data);
            }
        });

    });
</script>

Controller: 由于 antiforgerytoken 或类似问题，代码无法命中此 Action 方法。

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public JsonResult Insert(RegisterViewModel model)
{
    try
    {
         //...
         //code omitted for brevity
    }
}

我只需要一个适当的 AJAX 和 Action 方法，它们可以用于 MVC5 中的 CRUD 操作。任何帮助将不胜感激。

更新：以下是我需要澄清的几点：

1）我们没有使用“__RequestVerificationToken”，我不确定我们是否正确地将它发送到控制器（它似乎是 Firebug 的请求标头中的 cookie，但我不确定它是否可以)。任何想法？

2) 我应该使用 var formdata = new FormData($('#frmRegister').get(0));当我上传文件？

3) 为什么我必须避免在这种情况下使用 processData 和 contentType？

4) AJAX方法的Controller方法和错误部分是否OK？还是那里有任何遗漏或多余的部分？

Answer 1

如果您视图中的模型是RegisterViewModel，并且您已使用强类型HtmlHelper 方法正确生成了表单控件，那么使用new FormData($('#frmRegister').get(0)) 或$('#frmRegister').serialize() 将正确发送其中所有表单控件的值<form>标签，包括token，不需要再次添加token。

如果你的表单不包含文件输入，那么代码应该是

$('form').submit(function (event) {
    event.preventDefault();
    var formData = $('#frmRegister').serialize();
    $.ajax({
        type: "POST",
        url: '@Url.Action("Insert", "Account")', // do not hard code your url's
        data: formData,
        datatype: "json", // refer notes below
        success: function (data) {
            $('#result').html(data);
        }
    });
});

或者更简单

$.post('@Url.Action("Insert", "Account")', $('#frmRegister').serialize(), function(data) {
    $('#result').html(data);
});

如果您要上传文件，那么您需要使用FormData 并且代码需要是（另请参阅this answer 和

$('form').submit(function (event) {
    event.preventDefault();
    var formData = new FormData($('#frmRegister').get(0));
    $.ajax({
        type: "POST",
        url: '@Url.Action("Insert", "Account")',
        data: formData,
        processData: false,
        contentType: false,
        datatype: "json",  // refer notes below
        success: function (data) {
            $('#result').html(data);
        }
    });
});

请注意，在将 jQuery 与 FormData 一起使用时，您必须将 processData 和 contentType 都设置为 false。

如果你得到一个500(Internal Server Error)，它几乎总是意味着你的控制器方法正在抛出一个异常。在您的情况下，我怀疑这是因为您的方法正在返回部分视图（正如您 success 回调中的 $('#result').html(data); 代码行所建议的那样）但您已指定返回类型应为 json （您的使用datatype: "json", 选项）。请注意，不需要指定dataType 选项（如果没有指定.ajax() 方法会解决）

如果这不是500(Internal Server Error) 的原因，那么您需要调试代码以确定导致预期的原因。您可以使用浏览器开发人员工具来协助该过程。打开 Network 选项卡，运行函数，（函数名称将突出显示），单击它，然后检查响应。它将包括所引发的期望的详细信息。

Answer 2

contentType 应该是application/x-www-form-urlencoded

试试这个代码

    <script>
$('form').submit(function (event) {
        event.preventDefault();

    $.ajax({
        method: "POST",
        url: "/Account/Insert",
        data: $(this).serialize(),
       contentType:"application/x-www-form-urlencoded",
        success: function (data) {
       $('#result').html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});
    </script>