1

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.

MJ X
  • 8,506
  • 12
  • 74
  • 99
  • 1
    If you look at the generated HTML source of your page you will see there is a hidden input in the form that's auto-generated. You need to include this in your AJAX request as it is used to ensure that the requesting entity is legitimate. – Rory McCrossan Feb 01 '15 at 17:45
  • possible duplicate of [POST 500 (Internal Server Error) ajax,mvc](http://stackoverflow.com/questions/25574410/post-500-internal-server-error-ajax-mvc) –  Feb 01 '15 at 22:20

2 Answers2

2

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

dotnetom
  • 24,551
  • 9
  • 51
  • 54
0

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>
Nazmul Hossain
  • 2,085
  • 5
  • 25
  • 34