Question

我在使用MVC5的数据时遇到问题。我使用datatbales来显示和选择项目。

整个工作正常，但是当我尝试选择所有记录并且只有更多页面时，只选择了第一页。另一个问题是，如果我从第1页选择3个项目，从第2页选择2个项目，当我发布我的选择时，不会发布任何项目。

这是我的尝试：

@model Project.Models.Demo


@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @id = "rform", @class = "form-horizontal" }))
{

@Html.AntiForgeryToken()  

<table class="table table-striped table-bordered table-hover" id="elementstable">
   <thead>
       <tr role="row">
       <th>
          <label>
                 <input type="checkbox">
                 <span class="text"></span>
          </label>
       </th>
       <th>
           @Html.DisplayNameFor(model => model.Name)
       </th>
       <th>
           @Html.DisplayNameFor(model => model.Address)
       </th>
       <th>
           @Html.DisplayNameFor(model => model.Created)
       </th>

       </tr>
    </thead>

<tbody>
       @Html.EditorFor(model => model.Items)
</tbody>
</table>

以下是编辑部分视图：model.Items是List<Item>

@model Project.Model.Item

<tr>
    <td>
        <label>
            @Html.CheckBoxFor(model => model.IsSelected)
            <span class="text"></span>
        </label>

    </td>
    <td>
        @Html.DisplayFor(model => model.Name)
        @Html.HiddenFor(model => model.Name)
        @Html.HiddenFor(model => model.ItemId)
    </td>
    <td>
        @Html.DisplayFor(model => model.Address)
        @Html.HiddenFor(model => model.Address)
    </td>
    <td>
        @Html.DisplayFor(model => model.Created)
        @Html.HiddenFor(model => model.Created)
    </td>
</tr>

以下是表格：

             @Html.Bootstrap().SubmitButton().Text("Save").Color(BootstrapColors.Success).IconPrepend(FontAwesome.Check).HtmlAttributes(new { id = "ok" })   
}


@section PageScripts{
<link href="~/assets/css/dataTables.bootstrap.css" rel="stylesheet" />
<script src="~/assets/js/datatable/jquery.dataTables.min.js"></script>
<script src="~/assets/js/datatable/ZeroClipboard.js"></script>
<script src="~/assets/js/datatable/dataTables.tableTools.min.js"></script>
<script src="~/assets/js/datatable/dataTables.bootstrap.min.js"></script>
<script src="~/assets/js/datatable/datatables-init.js"></script>

<script type="text/javascript">
var oTable = $('#elementstable').dataTable({
            "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
            "aLengthMenu": [
              [ -1],
              [ "All"]
            ],
            "iDisplayLength": -1,
            "oTableTools": {
                "aButtons": []
            },
            "language": {
                "search": "",
                "sLengthMenu": "_MENU_",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },
            "aoColumns": [
              { "bSortable": false, "width": '45px' },
              { "bSortable": false },
              { "bSortable": false },
              { "bSortable": false }
            ],
            "aaSorting": []
        });

        $('#elementstable thead th input[type=checkbox]').change(function () {
            var set = $("#elementstable tbody tr input[type=checkbox]");
            var checked = $(this).is(":checked");
            $(set).each(function () {
                if (checked) {
                    $(this).prop("checked", true);
                    $(this).parents('tr').addClass("active");
                } else {
                    $(this).prop("checked", false);
                    $(this).parents('tr').removeClass("active");
                }
            });

        });
        $('#elementstable tbody tr input[type=checkbox]').change(function () {
            $(this).parents('tr').toggleClass("active");
        });


</script>
}

正如我所提到的，当时这适用于一页。

问题：

选择所有行复选框，将从所有页面中选择所有项目，而不仅仅是当前页面
选择单个行
从不同页面中选择单个行
将所有选定项目（从当前页面和其他页面）发布到列表

MVC5 Razor使用EditorFor查看jQuery DataTables分页检查项目

0 个答案: