通过 Ajax 调用填充 ASP.NET MVC Kendo Grid答案

【问题标题】：Populating ASP.NET MVC Kendo Grid Via Ajax Call通过 Ajax 调用填充 ASP.NET MVC Kendo Grid
【发布时间】：2017-04-26 04:44:07
【问题描述】：

我有一个 MVC Kendo Grid，我想通过 jQuery Ajax 调用来填充它。我使用 jQuery 'each' 方法来做到这一点：

function FillRowsByRequest(reqRow) {
        var readDataUrl = '@Url.Action("GetGoodsByReq")';
        var targetGrid = $("#storeReceiptRowsGrid").data("kendoGrid");

        $.get(readDataUrl, { reqseq: reqRow }, function (d, t, j) {
            var counter = 0;
            targetGrid.cancelChanges();
            $(d).each(function (i, e) {
                targetGrid.dataSource.insert(counter++, {
                    GOOD_ID: e.GOOD_ID,
                    GOOD_CODE: e.GOOD_CODE,
                    GOOD_CODE_DESC: e.GOOD_CODE_DESC,
                    GOOD_DESC: e.GOOD_DESC
                });
            });
        });
    }

我可以看到我的 Kendo Grid 充满了数据（不完全），但问题是当我单击 Save 按钮时，它不会触发 Save Action Method，因此表格中没有插入任何内容，并且 Grid 包含刷新后什么都没有。

@(Html.Kendo()
    .Grid<Tpph.Models.STORE_RECEIPT_ROW>()
    .Name("storeReceiptRowsGrid")
    .Columns(columns =>
    {
        columns.Bound(o => o.GOOD_ID).Title("Good ID").HtmlAttributes(new { @class = "goodid" }).Visible(false);
        columns.Bound(o => o.GOOD_CODE).Title("Good Code").HtmlAttributes(new { @class = "goodcode" }).Width(100);
        columns.Bound(o => o.GOOD_CODE_DESC).Title("Good Code Desc").HtmlAttributes(new { @class = "goodcodedesc" }).Width(100);
        columns.Bound(o => o.GOOD_DESC).Title("Good Desc").HtmlAttributes(new { @class = "gooddesc" }).Width(155);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create().Text("New Row").HtmlAttributes(new { @class = "k-primary", style = "background-color: #e6ffe6; border-color: #10c4b2; min-width: 100px; color: black;" });
        toolbar.Save().Text("Save").SaveText("Save").CancelText("Cancel").HtmlAttributes(new { @class = "k-primary", style = "background-color: #e6ffe6; border-color: #10c4b2; min-width: 100px; color: black;" });
    })
    .ColumnMenu()
    .Selectable(s => s.Type(GridSelectionType.Row))
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation("Delete?"))
    .Filterable()
    .Groupable()
    .Scrollable()
    .Pageable(p => p.Refresh(true))
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
         .Ajax()
         .Events(ev => ev.RequestEnd("storeReceiptRowsGridOnRequestEnd"))
         .Batch(true)
         .ServerOperation(true)
         .Model(model =>
         {
             model.Id(p => p.GOOD_ID);
         })
         .Read(read => read.Action("StoreReceiptRowsRead", "StorageForms"))
         .Update(u => u.Action("StoreReceiptRowsEdit", "StorageForms"))
         .Create(c => c.Action("StoreReceiptRowsCreate", "StorageForms"))
         .Destroy(de => de.Action("StoreReceiptRowsDestory", "StorageForms")))
    .Events(ev =>
    {
        ev.DataBound("storeReceiptRowsGridOnBound");
    })
    )

我该怎么做？

【问题讨论】：

假设通过 Ajax 调用，我想填充这些字段，然后当我单击“保存”按钮时，我希望它保存填充的数据。如果我手动输入字段，它可以工作，但是当我通过 jQuery Ajax 调用填充网格时，它不会触发保存操作方法。
请在上面的代码中添加ajaxcall。
如果您正确连接了 dataSource .Create 事件，则您的 JS 中不需要 AJAX 调用。发布您的控制器功能StoreReceiptRowsCreate。
@TechVision ：嗯，我不确定我的 JavaScript 代码是否正确。这就是我问这个问题的原因。顺便说一句，我也在问题中添加了它。
绑定可以关注stackoverflow.com/questions/41789688/…

标签： kendo-grid kendo-asp.net-mvc

【解决方案1】：

在解决这个问题后，我终于发现只有当行的“脏”属性设置为 true 时，Kendo Grid 才会触发 CRUD 操作方法。（脏标志是一个很小的红色三角形，当您编辑该单元格时，它会出现在该单元格的角落）。所以解决这个问题的方法是将每一行的脏标志设置为 true，如下所示：

.set("dirty", true);

所以我最终的 JavaScript 代码是这样的：

function FillRowsByRequest(reqRow) {
        var readDataUrl = '@Url.Action("GetGoodsByReq")';
        var targetGrid = $("#storeReceiptRowsGrid").data("kendoGrid");

        $.get(readDataUrl, { reqseq: reqRow }, function (d, t, j) {
            var counter = 0;
            targetGrid.cancelChanges();
            $(d).each(function (i, e) {
                targetGrid.dataSource.insert(counter++, {
                    GOOD_ID: e.GOOD_ID,
                    GOOD_CODE: e.GOOD_CODE,
                    GOOD_CODE_DESC: e.GOOD_CODE_DESC,
                    GOOD_DESC: e.GOOD_DESC
                }).set("dirty", true);
            });
        });
    }

【讨论】：