将表单数据作为对象数组发送到asp.net mvc中的控制器

Question

我有一个视图，我用剃刀动态呈现复选框项目。用户可以进行调整，然后我需要将表单发送回控制器。如果我只发送一个项目，即行，它工作正常，但如果我尝试发送所有项目，我总是得到空值。如何正确收集表单数据。这是我目前拥有的。

public void SendData(List<SomeClass> myData)
    {
        var data = myData; //always null
    }

    public class SomeClass
    {
        public int Id { get; set; }
        public int RoleId { get; set; }
        public bool R { get; set; }
        public bool W { get; set; }
        public bool E { get; set; }
        public bool D { get; set; }
    }

并查看：

    <script type="text/javascript">

    $(document).ready(function () {

        var test = $("#myForm").serialize();

        console.log(test);

        test = JSON.stringify({ 'myData': test });

        console.log(test);

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            url: '/Home/SendData',
            data: test,
            success: function () {

            },
            failure: function (response) {

            }
        });
    });

    </script>


        <form id="myForm">

        <div class="row control_group">
            @Html.Hidden("Id", 1)
            @Html.Hidden("RoleId", 1)
            @Html.CheckBox("R", false)
            @Html.CheckBox("W", false)
            @Html.CheckBox("E", false)
            @Html.CheckBox("D", false)
        </div>

        <div class="row control_group">
            @Html.Hidden("Id", 2)
            @Html.Hidden("RoleId", 2)
            @Html.CheckBox("R", true)
            @Html.CheckBox("W", true)
            @Html.CheckBox("E", true)
            @Html.CheckBox("D", true)
        </div>

    </form>

编辑：

这就是我使用 razor 渲染项目的方式

    foreach (SomeObject x in items)
    {
        var menuName = someStringFromDb;
        var permissions = x.MainItem.FirstOrDefault();

            <div class="row control_group">
                <div class="col-sm-4">@menuName</div>
                <input name="Id" type="hidden" value="@permissions.Id"/>
                <input name="RoleId" type="hidden" value=@permissions.RoleId />
                <div class="col-sm-2">
                    @Html.CheckBox("R", @permissions.Read)
                </div>
                <div class="col-sm-2">
                    @Html.CheckBox("W", @permissions.Write)
                </div>
                <div class="col-sm-2">
                    @Html.CheckBox("E", @permissions.Edit)
                </div>
                <div class="col-sm-2">
                    @Html.CheckBox("D", @permissions.Delete)
                </div>
            </div>
    }

编辑 2

感谢您的回答@Avi Fatal，它让我走到了这一步。我现在面临的问题是这个。 razor 渲染的复选框元素有两个输入，一个是隐藏的，另一个是显示的。当我收集表单数据时，我总是得到最后一个输入值（隐藏的一个，那总是假的）我怎样才能得到真值？

当前发送给控制器的数据（一切都是假的）：

{"ajaxData":[{"Id":"1","RoleId":"1","R":"false","W":"false","E":"false","D":"false"},{"Id":"2","RoleId":"2","R":"false","W":"false","E":"false","D":"false"}]}

像这样收集数据（在 SO 上发现了类似的问题）：

var ajaxData = $('.control_group').map(function (i, group) {
                var data = {};
                $(group).find(':input').each(function () {
                    data[this.name] = this.value;
                });
                return data;
            }).get();

            ajaxData = JSON.stringify({ 'ajaxData': ajaxData });

            console.log(ajaxData);

编辑 3

仅使用 .serialize() 我得到 null 作为控制器上的输入参数，使用 JSON.stringify 我得到 Count = 0，也是空的。我错过了什么？

HTML：

        @model List<WebApplication3.Controllers.HomeController.SomeClass>

    <form id="myForm">
        @for (int i = 0; i < Model.Count; i++)
        {
            <div>Element</div>
            @Html.HiddenFor(m => m[i].Id)
            @Html.HiddenFor(m => m[i].RoleId)
            @Html.CheckBoxFor(m => m[i].R)
            @Html.CheckBoxFor(m => m[i].W)
            @Html.CheckBoxFor(m => m[i].E)
            @Html.CheckBoxFor(m => m[i].D)
        }
    </form>

    <button id="send">SEND</button>


    <script type="text/javascript">

        $('#send').on('click', function () {

            var data = $("#myForm").serialize();
            console.log(data);

            //data = JSON.stringify({ 'ajaxData': data });

            $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                url: '/Home/SendData',
                data: data,
                success: function () {

                },
                failure: function (response) {

                }
            });

        });

    </script>

控制器

public void SendData(IEnumerable<SomeClass> ajaxData)
    {
        var data = ajaxData;
    }

Answer 1

我花了一些时间来理解这个问题（-：

无论如何，我已经创建了一个小测试，并且它正在运行。

public class User
{
        public string UserName { get; set; }
}

public void TestPost(List<User> users)
{

}

您需要将数据序列化为 json 对象数组， [{ 'UserName': "user 1" }, { 'UserName': "user 2" }] 一个小小的 jquery 操作...（见这里：Convert form data to JavaScript object with jQuery）

$.ajax({
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            url: '/Home/TestPost',
            data: JSON.stringify([{ 'UserName': "user 1" }, { 'UserName': "user 2" }]),
            dataType: "json",
        });