Question

根据此post，为了使ASP.NET MVC在回发时绑定到模型，表单控件的名称属性必须与模型属性匹配。

现在根据jQueryDataTable documentation，我们可以使用DT_RowId设置elemnts的id。

有没有办法可以将名称attaribute添加到jQueryDataTable。

我目前正在处理的数据。

"data":[
        "ID":10801,"Name":"SelectedContainers_C05","Description":null,"Tag":null,"Container_ID":10,"IsSelected":false,"DT_RowId":10801},
        {"ID":10802,"Name":"SelectedContainers_C06","Description":null,"Tag":null,"Container_ID":10,"IsSelected":false,"DT_RowId":10802},
        {"ID":10803,"Name":"SelectedContainers_C07","Description":null,"Tag":null,"Container_ID":9,"IsSelected":false,"DT_RowId":10803},
        {"ID":10804,"Name":"SelectedContainers_C08","Description":null,"Tag":null,"Container_ID":10,"IsSelected":false,"DT_RowId":10804},
        {"ID":10805,"Name":"SelectedContainers_C09","Description":null,"Tag":null,"Container_ID":10,"IsSelected":false,"DT_RowId":10805}
}

这是我将json数据绑定到View的javascript。

Dashboard.Helpers.elementExists('#ContainersTable', function () {
    $(this).DataTable(
        {
            "ajax": {
                "url": "/API/Loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                {
                    "data": "IsSelected",
                    "render": function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                            console.log(data);
                        }
                        return data;
                    },
                    "className": "dt-body-center"
                   // "autoWidth": true
                },
                { "data": "Name", "autoWidth": true }
            ],
            "rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data.IsSelected == 1);
            }
        }
    );

    $(this)
        .removeClass('display')
        .addClass('table table-striped table-bordered');
});

我尝试在行回调中设置名称，但它无效。

"rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data.IsSelected == 1);
                $('input.editor-active', row).prop('name', data.Id);
            }

更新

我有这个View Model，它包含Enums，DateTime和容器集合。现在，当我点击提交时，我需要发布所有内容。

我可以使用jQuery转到单个元素，然后获取值并将其发回。但是，如果我可以通过向容器集合添加名称来使用ASP.NET MVC biding ..

视图模型

 public class ReportViewModel
    {
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public ESampleTime SampleTime { get; set; }
        public Mesaurands Measurands { get; set; }
        public IEnumerable<ContainersViewModel> Containers { get; set; }
    }

  public class ContainersViewModel
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Tag { get; set; }
        public int? Container_ID { get; set; }

        public bool IsSelected { get; set; }

        public int DT_RowId { get; set; }
    }

这将回发的控制器方法是

[HttpPost]
public ActionResult Index(ReportViewModel vm)
{
    ....
}

Answer 1

为了回复您的ReportViewModel，您对IsSelected财产的输入需要

<input type="checkbox" name="Containers[#].IsSelected" value="true" .... />

其中#是集合中项目的零基索引器。

理想情况下，您还需要<input type="hidden" name="Containers[#].IsSelected" value="false" />输入以确保回发值（未选中复选框不会提交值，因此会发布false，如果选中它，则true提交了{1}}和false，而DefaultModelBinder仅绑定了第一个结果。

但仅仅单独绑定该属性是没有意义的，因此您还需要集合中所有其他属性的隐藏输入，例如。

<input type="hidden" name="Containers[#].ID" value="10801" />
<input type="hidden" name="Containers[#].Name" value="SelectedContainers_C05" />
....

这不仅会降低性能（生成大量额外的html并将其全部更改回服务器），您可能会冒恶意用户更改数据，这可能会影响您的POST方法代码所执行的操作。

更简单的解决方案是回发所选ID值的数组。对于简单值的集合，不需要生成集合索引器。只需要将所有输入命名为相同，并将其与具有相同名称IEnumerable<int>

的参数匹配

更改render回调以添加name属性

"render": function (data, type, row) {
    if (type === 'display') {
        return '<input type="checkbox" name="id" class="editor-active">';
    }
    ....

并修改rowCallback回调以设置value

"rowCallback": function (row, data) {
    $('input.editor-active', row).prop('checked', data.IsSelected).val(data.ID); 
}

将POST方法修改为

[HttpPost]
public ActionResult Index(IEnumerable<int> id)
{
    ....
}

id参数将与选中复选框的所有ID值绑定。

请注意，如果您的表单还包含ReportViewModel vm其他属性的表单控件，则还可以包含ReportViewModel参数。

如果你确实希望Containers的{{1}}属性完全绑定在POST方法中，那么一个选项是修改ReportViewModel回调以生成所有输入正确的render和name属性，例如

value

如何为jQueryDataTable设置名称

1 个答案: