如果启用了 [AntiForgeryToken]，则无法从 JQuery 访问操作方法

Question

我有一个可以正常工作的 JQuery 函数，但是如果我在 Action Method 上启用 [AntiForgerToken]，则 JQuery 函数无法访问 Action Method，在我启用 AntiForgeryToken 的位置上，我还有其他 sn-p：

@using (Html.BeginForm("InsertStudent","Students",FormMethod.Post, new { @id="myform"}))
{
    @Html.AntiForgeryToken()

不管view里面的@Html.AntiForgeryToken()是否开启，JQuery函数都很好用，问题出在Action Method上……

为什么会这样？我错过了什么？？我读过在 Post Action 方法上启用 [AntiForgeryToken] 对于安全性非常重要，所以我认为应用程序应该在 Action Method 和 View 的两个地方都启用它。

jQuery 函数：

function InsertShowStudents() {
    var counter = 0;
    $.ajax({        
        type:"post",
        url: "/Students/InsertStudent/",
        data: { Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() }
    }).done(function (result) {
        if (counter==0) {
        GetStudents();
        CounterStudents();
            counter = 1;
        }
        else {
            $("#tableJQuery").append("<tr>"+"<td>"+result.Name+"</td>"+"<td>"+result.LastName+"</td>"+"<td>"+result.Age+"</td>"+"</tr>")
        }
        //clear the form
       $("#myform")[0].reset();
    }).error(function () {
        $("#divGetStudents").html("An error occurred")
    })
}

动作方法：

 [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult InsertStudent(Student student)
        {
            if (ModelState.IsValid)
            {
                db.Students.Add(student);
                db.SaveChanges();
                //ModelState.Clear();
                return RedirectToAction("InsertStudent");
            }
            return View(student);
        }

表格的列：

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
      @* <td style="display:none" class="tdStudentID">@Html.DisplayFor(modelItem => item.StudentID)</td>    *@  
        <td>
            <img src="~/images/deleteIcon.png" width="20" height="20" class="imgJQuery" data-id="@item.StudentID" />
        </td>
       <td>
           @Html.ActionLink("Details","Details", new { id=item.StudentID})
       </td>
    </tr>
}

Answer 1

您没有在 ajax 调用中传递令牌的值，因此会引发异常。您可以使用

获取令牌的值

var token = $('[name=__RequestVerificationToken]').val();

并修改您的 ajax 调用以包含它使用

data: { __RequestVerificationToken: token, Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() }

但是，序列化包含令牌的表单会更容易

$.ajax({        
    type:"post",
    url: '@Url.Action("InsertStudent", "Students")', // don't hardcode your url's
    data: $('#myform').serialize(),
}).done(function (result) {

旁注：Ajax 调用永远不会重定向（ajax 的全部意义在于保持在同一页面上），因此在 InsertStudent() 中包含 return RedirectToAction("InsertStudent"); 将不起作用。另外，你返回的html，所以.done()回调中的$("#tableJQuery").append()代码会失败。

您似乎有一个表单来添加新的Student，因此您的方法只需要返回一个JsonResult，表示成功或其他情况，如果成功，则可以根据值向表中添加新行以表格为例

}).done(function (result) {
    if (result) {
        var row = $('<tr></tr>');
        row.append($('<td></td>').text($("#Name").val()));
        ... // add other cells
        $("#tableJQuery").append(row);
        //clear the form
        $("#myform")[0].reset();
    } else {
        // Oops something went wrong
    }
})