[AntiForgeryToken]が有効な場合、JQueryからアクションメソッドにアクセスできない

Question

JQuery関数は正常に動作しますが、アクションメソッドに[AntiForgerToken]を有効にすると、JQuery関数はアクションメソッドにアクセスできません。私はAntiForgeryTokenを有効にし、他のスニペットがあります。

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

ビュー内の@Html.AntiForgeryToken()が有効にされているかどうかは関係ありません、jQueryの機能は良い作品を、問題との1はアクションメソッドであります...

どうしてですか？私は何が欠けているのですか？私が読んだことは、ポストアクションメソッドで[AntiForgeryToken]を有効にしてセキュリティを確保することが非常に重要であるため、アプリケーションがアクションメソッドとビューの両方の場所で有効になっている必要があると思います。

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(); 

を使用してトークンの値を取得し、

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

を使用して、それを含めるためにあなたのAJAX呼び出しを変更することができます

$.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 
    } 
})