更改后，数据表编辑器不会传递给控制器

Question

我使用数据表编辑器来编辑特定列。 在更新行之后，当我单击不在表中的按钮时，整个数据传递给控制器​​。

这是我的观点

 <script type="text/javascript"> function ToJavaScriptDate(value) { var pattern = /Date\\(([^)]+)\\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear(); } $(document).ready(function () { editor = new $.fn.dataTable.Editor({ table: "#example", idSrc: 'ID', fields: [{ label: "PQTY:", name: "PQTY" }, { label: "PRCNO:", name: "PRCNO" }, { label: "PRCReadyDT:", name: "PRCReadyDT", type: 'datetime', def: function () { return new Date(); }, format: 'DD/MM/YYYY', fieldInfo: 'US style mdy date input with 12 hour clock', opts: { minutesIncrement: 5 } }, { label: "REMARKS:", name: "REMARKS" } ] }); $('#example').on('click', 'tbody td.editable', function (e) { //editor.inline(this); editor.inline(this, { buttons: '_basic' }); }); $('#OrderNo').on("change", function () { $('#example').DataTable().destroy(); $('#tblbody').empty(); var code = $("#OrderNo").children("option:selected").val(); $.ajax({ type: "POST", url: '@Url.Action("GetPRCDataFromOrderNo", "PRC")', contentType: "application/json; charset=utf-8", data: JSON.stringify({ 'oano': code }), success: function (list) { if (Object.keys(list).length > 0) { $('#tblbody').text(""); BindData(list); } else { $('#tblbody').text(""); var text = "No Data found."; $('#tblbody').append( '<tr class="odd"><td valign="top" colspan="20" class="dataTables_empty">' + text + '</td></tr>'); } }, error: function () { alert('Error. Please try again.'); } }); }); var BindData = function (response) { var table = $('#example').DataTable({ dom: 'Bfrtip', data: response, responsive: true, "pagingType": "full_numbers", "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], columns: [ { data: null, defaultContent: '', className: 'select-checkbox', orderable: false }, { data: 'PRCReadyDT', className: 'editable' }, { data: 'PRCNO', className: 'editable' }, { data: 'REMARKS', className: 'editable' }, { data: 'OANO' }, { data: 'ID' }, { data: 'PONO' }, { data: 'POLI' }, { data: 'MOULDCODE' }, { data: 'DESCRIPTION' }, { data: 'Drg' }, { data: 'Rev' }, { data: 'METALCODE' }, { data: 'METALNAME' }, { data: 'WEIGHT' }, { data: 'QTY' }, { data: 'PRC' }, { data: 'DELIVERYDT' }, { data: 'PQTY', className: 'editable' }, { data: 'Machining' } ], language: { search: "_INPUT_", searchPlaceholder: "Search records", }, select: { style: 'os', selector: 'td:first-child' }, buttons: [ { extend: "edit", editor: editor } ] }); } var table = $('#example').DataTable(); $('#save').click(function () { debugger; var data = table.$('#tblbody').serialize(); alert( "The following data would have been submitted to the server: \\n\\n" + data+ '...' ); $.ajax({ type: "POST", url: '@Url.Action("PRCGenerate", "PRC")', contentType: "application/json; charset=utf-8", data: JSON.stringify(data), success: function (data) { $("#modelBody2").html(data); $("#model2").modal("show"); }, //error: function () { alert('Error. Please try again.'); } }); }); }); </script> 

 <div class="card"> <div class="card-header card-header-primary card-header-icon"> <div class="card-icon"> <i class="material-icons">sort</i> </div> <h4 class="card-title">Filter</h4> <div class="row"> <div class="col-md-4" style="margin-top:15px;"> <p> @Html.DropDownList("OrderNo", Session["ono"] as SelectList, "-- Select Orderno-- ", htmlAttributes: new { @class = "selectpicker", data_style = "select-with-transition" }) </p> </div> </div> </div> </div> <div class="card"> <div class="card-header card-header-primary card-header-icon"> <div class="card-icon"> <i class="material-icons">assignment</i> </div> <h4 class="card-title">PRC Details</h4> </div> <div class="card-body"> <div class="material-datatables"> <table id="example" class="table table-striped table-bordered table-hover nowrap text-center" cellspacing="0" width="100%" style="width:100%"> <thead> <tr> <th style="width:1px !important;"></th> <th> @Html.DisplayNameFor(model => model.PRCReadyDT) </th> <th> @Html.DisplayNameFor(model => model.PRCNO) </th> <th> @Html.DisplayNameFor(model => model.REMARKS) </th> <th> @Html.DisplayNameFor(model => model.OANO) </th> <th> @Html.DisplayNameFor(model => model.ID) </th> <th> @Html.DisplayNameFor(model => model.PONO) </th> <th> @Html.DisplayNameFor(model => model.POLI) </th> <th> @Html.DisplayNameFor(model => model.MOULDCODE) </th> <th> @Html.DisplayNameFor(model => model.DESCRIPTION) </th> <th> @Html.DisplayNameFor(model => model.Drg) </th> <th> @Html.DisplayNameFor(model => model.Rev) </th> <th> @Html.DisplayNameFor(model => model.METALCODE) </th> <th> @Html.DisplayNameFor(model => model.METALNAME) </th> <th> @Html.DisplayNameFor(model => model.WEIGHT) </th> <th> @Html.DisplayNameFor(model => model.QTY) </th> <th> @Html.DisplayNameFor(model => model.PRC) </th> <th> @Html.DisplayNameFor(model => model.DELIVERYDT) </th> <th> @Html.DisplayNameFor(model => model.PQTY) </th> <th> @Html.DisplayNameFor(model => model.Machining) </th> </tr> </thead> <tbody id="tblbody"> <input type="submit" class="btn btn-finish btn-fill btn-rose btn-wd" name="Save" value="Generate" id="save" style="float:right;" /> </tbody> </table> </div> </div> </div> 

这是我的控制器获取记录

[HttpPost]
    public ActionResult PRCGenerate(List<sp_PRC_Record_Result> PRC)
    {
        string elementId = this.HttpContext.Request.Form["OANO"];
        return View();
    }

这是我的输出：

带数据表的输出图像

单击Generate按钮时，整个数据表值将发送到控制器。 任何人都可以帮我解决这个问题吗？

提前致谢。

Answer 1

对于按钮，您使用了带有提交类型的输入元素，这将发布完整的表单。 尝试使用不提交完整表格的按钮元素。

<button type="button">

并使用jQuery Ajax调用Controller操作方法。