Unable to pass selected checkboxes ids to controller method using ajax - ajax

Question

I am trying to send a list of ids of checkboxes selected every time the user clicks on a checkbox. This will be used for search results to be filtered by categories. I don’t know if this is the correct way to do it but this is what I have tried so far.
This is my partial view with ajax call:
#using GAPT.Models
#model ViewModelLookUp
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#selectedcategories").click(function () {
var array = [];
if ($(this).is(":checked")) {
array.push($(this).val());
}
else {
array.pop($(this).val());
}
$.ajax({
type: "POST",
url: '#Url.Action("SearchTours", "Home")',
dataType: "html",
traditional: true,
data: { values: array },
success: function (data) {
$('#selectedcategories').html(data);
}
});
});
});
</script>
#using (Html.BeginForm("SearchCategories", "Home", FormMethod.Post))
{
foreach (var category in Model.categories)
{
<div class="checkbox" id="#{#category.Id}">
<label>
<input type="checkbox" id="selectedcategories" name="selectedcategories" value="#{#category.Id}"/>#category.Name
</label>
</div>
}
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
And this is my controller method that I am trying to reach:
[HttpPost]
public ActionResult SearchTours(FormCollection collection)
{
// insert query here
ViewData["CategAttrTours"] = CategAttrTours;
return View(CategAttrTours);
}
The method in the controller is not being reached and I am getting this error:
Error
Do you have any idea why I keep getting this error? Is it because I am passing the data incorrectly?
I would appreciate any help. Thanks a lot.

Answer 1

You need to add the contentType option and stringify your data
$.ajax({
type: "POST",
url: '#Url.Action("SearchTours", "Home")',
dataType: "html",
contentType: "application/json; charset=utf-8", //add this
data: JSON.stringify({ values: array }), // modify this
data: { values: array },
success: function (data) {
$('#selectedcategories').html(data);
}
});
and change you method to (assumes category.Id is typeof int)
[HttpPost]
public ActionResult SearchTours(IEnumerable<int> values)
although your script to generate the array is unnecessary and you can just use
$.ajax({
type: "POST",
url: '#Url.Action("SearchTours", "Home")',
dataType: "html",
data: $('form').serialize(),
success: function (data) {
$('#selectedcategories').html(data);
}
});
or more simply
$.post('#Url.Action("SearchTours", "Home")', $('form').serialize(), function(data) {
$('#selectedcategories').html(data);
});
and change the method to
[HttpPost]
public ActionResult SearchTours(IEnumerable<int> selectedcategories)
Side note: You should never need to use FormCollection in MVC

Answer 2

remove this
dataType: "html"
traditional: true
on controller method parameter change this
(FormCollection collection)
to
List<string> values
place a break point on the controller and check the values