无法使用ajax将选定的复选框ID传递给控制器​​方法

Question

我试图在每次用户点击复选框时发送选中的复选框ID列表。这将用于按类别过滤的搜索结果。我不知道这是否是正确的方法，但这是我到目前为止所尝试的。

这是我用ajax调用的部分视图：

   var orders = rec.documentList;
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: "array",
                    key: "ID",
                    data: orders
                }
            },
            paging: {
                pageSize: 8
            },

            showRowLines: true,
            showBorders: true,
            selection: {
                mode: "single"
            },
            filterRow: { visible: true },
            //searchPanel: {
            //    visible: true
            //},
            columns: rec.DxColumHeader,
            paging: { pageSize: 6 },
            wordWrapEnabled: true,
            filterRow: { visible: false },
            columnAutoWidth: false
        });

    function ShowButton(container, options) {
        console.log(options.data["cor_ref"]);

    }

这是我想要达到的控制器方法：

@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")
}

未到达控制器中的方法，我收到此错误： Error

你知道为什么我一直收到这个错误吗？是因为我传递的数据不正确吗？ 我将不胜感激任何帮助。非常感谢。

Answer 1

您需要添加contentType选项并对数据进行字符串化

$.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);
    }
});

并将您的方法更改为（假设category.Id为typeof int）

[HttpPost]
public ActionResult SearchTours(IEnumerable<int> values)

虽然您不需要生成阵列的脚本，但您可以使用

$.ajax({
    type: "POST",
    url: '@Url.Action("SearchTours", "Home")',
    dataType: "html",
    data: $('form').serialize(),
    success: function (data) {
        $('#selectedcategories').html(data);
    }
});

或更简单

$.post('@Url.Action("SearchTours", "Home")', $('form').serialize(), function(data) {
    $('#selectedcategories').html(data);
});

并将方法更改为

[HttpPost]
public ActionResult SearchTours(IEnumerable<int> selectedcategories)

旁注：您永远不需要在MVC中使用FormCollection

Answer 2

删除此

dataType: "html"
traditional: true

on controller方法参数更改此

(FormCollection collection)

到

List<string> values

在控制器上放置一个断点并检查值