使用jQuery dataTable和ASP.NET MVC进行双向数据绑定

时间:2018-01-22 08:47:29

标签: javascript c# jquery asp.net asp.net-mvc

我有一个使用jQueryDataTable获取数据的表单。

$('#myTableName').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">';
                        }
                        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.active == 1);
            }
        }
    );

现在获取数据我有以下代码,

  private static IEnumerable<CircState> rCirc;
  [AllowAnonymous]
        public ActionResult LoadData()
        {
            rCirc= _repo.GetAll().OrderBy(circ => circ.ID).Select(x => new CState { IsSelected = true, Name = x.Name });

            return Json(new { data = circuits }, JsonRequestBehavior.AllowGet);
        }

这很好用,我得到了JSON,它绑定到我的视图:

{
    "data":
    [
    {"IsSelected":true,"Name":"SMyDataPoint__01"},
    {"IsSelected":true,"Name":"SMyDataPoint__04"},
    {"IsSelected":true,"Name":"SMyDataPoint__07"},
    {"IsSelected":true,"Name":"SMyDataPoint__08"},
    {"IsSelected":true,"Name":"SMyDataPoint__09"},
    {"IsSelected":true,"Name":"SMyDataPoint__10"},
    {"IsSelected":true,"Name":"SMyDataPoint__11"}
    ]
}

这是我的用户界面代码:

<div class="form-group">
            @Html.LabelFor(model => model.Cirs, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-5">
                <table id="filtersTable">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

现在,当我勾选一个项目并单击“提交”按钮时,如何获取未选择的项目。

我需要的是View和Model之间的双向绑定,所以当我调用以下代码时,我应该根据状态获得所有项目(true / false)。

 $('#btnRunReport').click(function (e) {
            e.preventDefault();

            $.ajax({
                type: "GET",
                url: "/Circuits/SelectedCircs/",
                success: function (result) {
                    console.log(result);
                },
                error: function (result) {
                    console.log('Error');
                }
            });


        });



[AllowAnonymous]
        public ActionResult SelectedCirs()
        {
         //rCirc is the global variable decalred on top (In First API)
            var selectedCircs = rCirc.Where(x => x.IsSelected == false);
            return Json(selectedCircuits);
        }

0 个答案:

没有答案