ASP.Net MVC 5 Ajax request on Edit page Error __RequestVerificationToken is not present

Question

I created a cascade dropdown using jQuery Ajax and ASP.Net MVC I have set my ajax request OnChange of dropdown here is my code:

 @Html.DropDownList("Agency_Id", null, htmlAttributes: new { @class = "form-control", @onchange = "bring_projects(this.value,'bring_projects_by_agency','Project_Id')" })

The projects DropDown:

  @Html.DropDownList("Project_Id", null, htmlAttributes: new { @class="form-control"})

here is my script:

function bring_projects(id, funcs, divname) {
var ajax_image = "<img src='./Content/loading.GIF' >";
$('#' + divname).html(ajax_image);
var params = "&agency_id=" + id;
$.ajax({
    url: funcs,
    type: "POST",
    data: params,
})
.done(function (r) {
    $('#' + divname).html(r);
});

}

it gives the following error:

Server Error in '/' Application.

The required anti-forgery form field "__RequestVerificationToken" is not present.

Note: I am not Submiting the form I Just do ajax request OnChange of DropDown in my Edit page.

Answer 1

Anti-forgery token is a method of preventing Cross-Site Request forgery attacks. When using default MVC methods it has 2 parts to it:

• Anti-forgery token in your view. It usually is used by using html helper Html.AntiForgeryToken . This causes hidden input field __RequestVerificationToken to be created on a form
• Attribute ValidateAntiForgeryToken applied to your controller or action methods.

In your case error indicates that you have ValidateAntiForgeryToken on your method, but the form method did not submit the second part - field __RequestVerificationToken . In order to fix that you should add a second parameter to your post method:

var params = "&agency_id=" + id;
params += params + "&__RequestVerificationToken=" + $('input[name=__RequestVerificationToken]').val();
$.ajax({
    url: funcs,
    type: "POST",
    data: params,
})

You can read more about anti forgery token in this blog post

Answer 2

Here's an example of how this might work.

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(string someValue)
    {
        return Json(new { someValue = someValue });
    }
}

View:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "__AjaxAntiForgeryForm" }))
{
    @Html.AntiForgeryToken()
}

<div id="myDiv" data-url="@Url.Action("Index", "Home")">
    Click me to send an AJAX request to a controller action
    decorated with the [ValidateAntiForgeryToken] attribute
</div>

<script type="text/javascript">
    $('#myDiv').submit(function () {
        var form = $('#__AjaxAntiForgeryForm');
        var token = $('input[name="__RequestVerificationToken"]', form).val();
        $.ajax({
            url: $(this).data('url'),
            type: 'POST',
            data: { 
                __RequestVerificationToken: token, 
                someValue: 'some value' 
            },
            success: function (result) {
                alert(result.someValue);
            }
        });
        return false;
    });
</script>