Q:

Unable to pass selected checkboxes ids to controller method using ajax

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.

A:

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

