title: how to use AntiForgeryToken in ajax
body: <p>I do not know how I use the AntiForgeryToken in ajax.</p>
  
  <p>I found the following answers on SO but they're not working for me:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/4074199/jquery-ajax-calls-and-the-html-antiforgerytoken">jQuery Ajax calls and the Html.AntiForgeryToken()</a></li>
  <li><a href="https://stackoverflow.com/questions/14473597/include-antiforgerytoken-in-ajax-post-asp-net-mvc">include antiforgerytoken in ajax post ASP.NET MVC</a></li>
  <li><a href="https://stackoverflow.com/questions/19788916/how-to-make-ajax-request-with-anti-forgery-token-in-mvc">How to make ajax request with anti-forgery token in mvc</a></li>
  </ul>
  
  <p>This is my code
  Html:</p>
  
  <pre><code>@using (Html.BeginForm())
                      {
                          @Html.AntiForgeryToken()
                          @Html.TextBoxFor(model =&gt; model.UserName, new { @class = "form-control", id = "UserName", placeholder = @CMS.Resources.Resource.UserName })
                          @Html.PasswordFor(model =&gt; model.Password, new { @class = "form-control", id = "Password", placeholder = @CMS.Resources.Resource.Password })
  
                          &lt;button id="LoginButton" class="k-button" type="submit"&gt;@CMS.Resources.Resource.Signin&lt;/button&gt;
                      }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$('#LoginButton').click(function (e) {
          if ($('form').valid()) {
  
              var data = { UserName: $('#UserName').val(), Password: $('#Password').val() };
              var token = $('[name=__RequestVerificationToken]').val();
              var headers = {};
              headers["__RequestVerificationToken"] = token;
  
              $.ajax({
                  type: 'POST',
                  traditional: true,
                  data: JSON.stringify(data),
                  cache: false,
                  headers: headers,
                  dataType: 'json',
                  url: '@Url.Action("LoginPanel", "Account")',
                  contentType: "application/json; charset=utf-8",
                  success: function (status) {
                  },
                  error: function (status) {
                      alert(status);
                  }
              });
          }
          e.preventDefault();
      });
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>        [HttpPost, ValidateAntiForgeryToken]
      public JsonResult LoginPanel(LoginModel model)
      {
          LoginStatus status = new LoginStatus();
          if (HttpContext.Request.IsAjaxRequest())
          {
              if (ModelState.IsValid)
              {
                  ....
              }
          }
          return Json(status, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>And other modes of JavaScript code that tried. By placing the value __RequestVerificationToken in the header, or in data. The error is always the same:</p>
  
  <p><em>The required anti-forgery form field "__RequestVerificationToken" is not present.</em></p>
  
  <p>Thank.</p>