将复选框组从数据表传递到控制器

Question

我试图将选定的复选框传递给控制器​​，我按照数据表网站https://www.gyrocode.com/projects/jquery-datatables-checkboxes/ 中的示例进行操作，但我没有运气。 我需要当我点击 onclick="LockDepot()" 按钮时，这应该将选定的复选框传递给控制器

 <script> var table; var selectvalue = ""; $(document).ready(function () { GetDepotList(); }); function LockDepot() { if (selectvalue == "") { alert("please select a checkbox!"); } else { } } function format(d) { // `d` is the original data object for the row return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + '<tr>' + '<td>Zip Code :</td>' + '<td>' + d.zipCode + '</td>' + '</tr>' + '<td>has 600 Permit:</td>' + '<td>' + d.has600Permit + '</td>' + '</tr>' + '<td>Hair Color :</td>' + '<td>' + d.hairColor + '</td>' + '</tr>' + '<td> Street Address :</td>' + '<td>' + d.streetAdderss + '</td>' + '</tr>' + '<td> City :</td>' + '<td>' + d.city + '</td>' + '</tr>' + '<td> Zip :</td>' + '<td>' + d.zipCode + '</td>' + '</tr>' + '<td> State:</td>' + '<td>' + d.state + '</td>' + '</tr>' + '<td> Infor Correct:</td>' + '<td>' + d.infoCorrect + '</td>' + '</tr>' + '<td>Transfered to REAL:</td>' + '<td>' + d.transToReal + '</td>' + '</tr>' + '</table>'; } function GetDepotList() { var table = $("#StudentInfo").DataTable({ "processing": true, "serverSide": true, "filter": true, "bInfo": true, "ajax": { "url": "@Url.Action("get_Student_Info", "Instructor")", "type": "POST", "datatype": "json" }, "columnDefs": [{ "targets": [1], 'checkboxes': { 'selectRow': true }, 'searchable': false, 'orderable': false, 'className': 'dt-body-center', 'render': function (data, type, full, meta) { return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">'; }, }], createdRow: function (row, data, dataIndex) { $(row).children('td').attr('style', 'text-align: center;vertical-align: middle;'); }, "columns": [ { "className": 'details-control', "orderable": false, 'searchable': false, "defaultContent": '' }, { "data": "firstName", "name": "First Name", "autoWidth": true }, { "data": "mi", "name": "MI", "autoWidth": true }, { "data": "lastName", "name": "Last Name", "autoWidth": true }, { "data": "sex", "name": "Gender", "autoWidth": true }, { "data": "twraid", "name": "Last Name", "autoWidth": true }, { "data": "race", "name": "Race", "autoWidth": true }, { "render": function (data, type, full, meta) { return '<a class="btn btn-info btn-md " style="color:white" href="@Url.Action("Edit", "Instructor")/' + full.id+ '">Edit</a>' + " " + '<a class="btn btn-info btn-md" style="color:white" href="@Url.Action("Details", "Instructor")/' + full.id + '"> Details </a>' + " " + '<a class="btn btn-info btn-md" style="color:white" href="@Url.Action("TransfertToREAL", "Instructor")/' + full.id + '"> Transfer to REAL </a>' + " " + '<a class="btn btn-info btn-md" style="color:white" href="@Url.Action("UpdateStudent600Flag", "Instructor")/' + full.id + '"> Update student has 600 permit flag </a>' + " " + '<a class="btn btn-danger btn-md" style="color:white" href="@Url.Action("Delete", "Instructor")/' + full.id + '"> Delete </a>' } }, ] }); $('#example-select-all').on('click', function () { var rows = table.rows({ 'search': 'applied' }).nodes(); $('input[type="checkbox"]', rows).prop('checked', this.checked); selectvalue = ""; if (this.checked) { $('input[type="checkbox"]:checked:not(:first)').each(function () { selectvalue += table.row($(this).closest('tr')).data()[1] + " "; }); } }); $('#example tbody').on('change', 'input[type="checkbox"]', function () { if (!this.checked) { var el = $('#example-select-all').get(1); if (el && el.checked && ('indeterminate' in el)) { el.indeterminate = true; } } }); $('#StudentInfo tbody').on('click', 'input[type="checkbox"]', function () { selectvalue = ""; if (!this.checked) { $('#example-select-all').prop("checked", false); } else { if ($('input[type="checkbox"]:checked').length == $('#StudentInfo tbody tr').length) { $('#example-select-all').prop("checked", true); } } if ($('#example-select-all').prop("checked")) { $('input[type="checkbox"]:checked:not(:first)').each(function () { selectvalue += table.row($(this).closest('tr')).data()[1] + " "; }); } else { $('input[type="checkbox"]:checked').each(function () { selectvalue += table.row($(this).closest('tr')).data()[1] + " "; }); } }) $('#frm-StudentInfo').on('submit', function (e) { var form = this; table.$('input[type="checkbox"]').each(function () { if (!$.contains(document, this)) { if (this.checked) { $(form).append( $('<input>') .attr('type', 'hidden') .attr('name', this.name) .val(this.value) ); } } }); }); } </script>

 <div class="container"> <div style="width:90%; margin:0 auto;"> <div class="tn-pagetitle"> <h3 style="font-weight:bold;"> Instructor</h3> </div> <div class="indent4"> <partial name="_messageContainer" /> </div> <form id="frm-StudentInfo"> <table id="StudentInfo" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"> <thead> <tr> <th></th> <th><input type="checkbox" name="select_all" value="1" id="example-select-all"></th> <th>First Name</th> <th>MI</th> <th>Last Name</th> <th>Gender</th> <th>Student TWRAID </th> <th>Race </th> <th> </th> </tr> </thead> </table> <div class="row"> <button class="btn btn-primary" onclick="location.href='@Url.Action("TransfertoReal", "Instructor")">Transfer Selected Student to REAL</button> @*<button class="btn btn-primary" id="Hass600Permit" onclick="location.href='@Url.Action("UpdateSelectedStudentHas600Permit1", "Instructor")">Update Selected Student Has600 Permit</button>*@ <button type="button" name="submitButton" value="Open" class="btn btn-primary " id="Hass600Permit" onclick="LockDepot()"> Update Selected Student Has600 Permit </button> </div> <p><b>Selected rows data:</b></p> <pre id="example-console-rows"></pre> <p><b>Form data as submitted to the server:</b></p> <pre id="example-console-form"></pre> </form> </div> </div>