内联数据表可编辑.NET核心

Question

我如何在.NET Core Project中的此示例中使用DataTables可编辑。无法理解我如何通过控制器中的Ajax调用传输数据。例如，我有方法

[HttpPost]
public JsonResult SaveWorkPageData()
{
    var m = //want to get data from request in this veriable
   return Json();
}
[HttpPost]
public JsonResult Search(string orderBy, List<Order> order, Search search,
        int start, int length, string searchTerm, bool isAsc, bool hideVoidedAndDeclined, bool recent = false)
    {
        var take = length;
        var skip = start;
        var m = _clientsService.Search(searchTerm, orderBy, hideVoidedAndDeclined, isAsc, take, skip, recent);

        return Json(m);
    }

JS代码：

function ClientSearchGridBase() {
var self = {};
self.parentContainerSelector = ".client-search-grid";
self.searchUrl = "/Clients/Search";
self.saveDataUrl = "/Clients/SaveWorkPageData";
var editor;
self.init = function () {
    editor = new $.fn.dataTable.Editor({
        "ajax": {
            "url": self.saveDataUrl,
            "type": "POST",
            "dataSrc": function (response) {
                console.log(response);
                return response;
            }
        },
        table: self.parentContainerSelector + ' table',
        fields: [{
                label: "PKID:",
                name: "PKID"
            }, {
                label: "Last name:",
                name: "Name"
            }
        ]
    });
    $(self.parentContainerSelector + ' table').on('click', 'tbody td', function (e) {
        editor.inline(this);
    });
    self.table = $(self.parentContainerSelector + ' table').DataTable({
        "processing": true,
        "serverSide": true,
        "pageLength": 10,
        "ajax": {
            "url": self.searchUrl,
            "type": "POST",
            data: function (data) {
                data.orderBy = data.columns[data.order[0].column].data;
                data.searchTerm = data.search.value;
                data.isAsc = data.order[0].dir == "asc";
                data.hideVoidedAndDeclined = $(self.parentContainerSelector + " .hide-voided-and-declined").is(":checked");
            }
        },
        idSrc: 'PKID',
        "columns": [
            {
                "data": "PKID"
            },
            {
                "data": "Name"
            }
        ],
        order: [
            [1, "desc"]
        ],
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]
    }).rows().ids();
    $(document.body).on("click", self.parentContainerSelector + " td:first-of-type .edit", self.edit);
    $(document.body).on("change", self.parentContainerSelector + " .hide-voided-and-declined", self.hideVoidedAndDeclined);
    self.table.on('xhr', function (e, settings, json) {
        console.log('Ajax event occurred. Returned data: ', json);
    });
}

self.hideVoidedAndDeclined = function () {
    self.table.draw();
}
self.edit = function (event) {
    var rowIndex = $(event.target).closest("tr").index();
    var itemId = self.table.row(rowIndex).data().QuoteId;
    location.href = "/Quotes/Manage/" + itemId;
}
return self;
}

我需要如何更改SaveWorkPageData使用数据的方法？

Answer 1

在客户端，您要声明编辑器然后激活它：

var editor = new $.fn.dataTable.Editor({
        ajax: '@Url.Action("ProductOutputList")',
        table: '#productoutputs',
        fields: [
            {
                "label": "Name:",
                "name": "productoutputs.Name"
            }], //more fields
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    });
    // Activate an inline edit on click of a table cell
    $('#productoutputs').on('click', 'tbody td.editable', function (e) {
        editor.inline(this);
    });

在服务器端您要处理请求。因此，数据正在传输到您的控制器，您可以使用Editor插件进行处理(文档为https://editor.datatables.net/manual/net/(：

public ActionResult ProductOutputList()
    {
        var request = System.Web.HttpContext.Current.Request;
        var settings = Properties.Settings.Default;
        using (var db = new Database(settings.DbType, settings.DbConnection))
        {
            var response = new Editor(db, "productoutputs", "ProductOutputId")
                .Model<ProductOutputDatatablesModel>()
                .Field(new Field("productoutputs.ProductId")
                    .Options("products", "ProductId", "Name")
                )
                .LeftJoin("products", "products.ProductId", "=", "productoutputs.ProductId")
                .Field(new Field("productoutputs.DesignId")
                    .Options("designs", "DesignId", "Name")
                )
                .Process(request)
                .Data();
            return Json(response, JsonRequestBehavior.AllowGet);
        }
    }

您也想为数据库连接创建设置：设置文件屏幕截图