编辑和删除 Kendo 网格中的行

Question

在我的 .net 核心应用程序中，我有一个 kendo 网格，我试图在其中添加按钮来编辑/更新和删除行。基本上我想要做的是从行中的参数获取 objectid 并重定向到 update 或 delete 视图。

<div class="clearfix">
        @(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()
                    .Name("ContractSettlementGrid")
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .Scrollable()
                    .Sortable()
                    .Filterable()
                    .ColumnMenu()
                    .Groupable()
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.OBJECTID).Title("ID").Hidden();
                        columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");
                        columns.Bound(c => c.Year).Title("Year").Width("100px");
                        columns.Bound(c => c.Month).Title("Month").Width("100px");
                        columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");
                        columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");
                        columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");
                        columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.OBJECTID))
                    .Update(update => update.Action("Save", "SettlementContract"))
                    .Destroy(update => update.Action("Delete", "SettlementContract"))
                    .Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))
                    )
           )
    </div>

我尝试映射 command.Edit() 和 command.Destroy() 命令以使用我的控制器的相应方法。当我单击 Update button 时，控制台出现错误：

Failed to load resource :44326/SettlementContract/Save:1 the server responded with a status of 400 ()

我可以按照我想要的方式映射按钮吗？它甚至没有调用相应的方法，也没有达到我的断点。也许不能这样做？

这是控制器

        [HttpPost]
        public IActionResult Save(Model model)
        {
          // code shortened for brevity
         return RedirectToAction("Index", "SettlementContract");
        }

Answer 1

像这样设置你的控制器保存方法是行不通的。您需要密切关注我示例底部引用的 Kendo 示例。

我相信您的网格配置设置看起来不错。您的控制器方法需要更新为类似于以下内容：

        [AcceptVerbs("Post")]
        public ActionResult Save([DataSourceRequest] DataSourceRequest request, M20_AEK.Models.ContractSettlement model)
        {
            if (model != null && ModelState.IsValid)
            {
                //save logic here
            }            

            return Json(new[]{model}.ToDataSourceResult(request,ModelState));
        }

现在，根据您的评论和您的控制器逻辑，似乎您希望在成功保存后重定向到某个操作。目前尚不清楚这是网格所在的同一视图还是不同的视图。如果它与网格所在的视图相同，则您不需要这样做，因为网格将使用保存的值进行更新。如果您绝对必须这样做，而不是在 Save 方法中从控制器重定向到该操作，您可以挂钩网格的 Save 事件，并且在成功保存后，您可以将 window.location 设置为合适的url.

Kendo范例参考：https://demos.telerik.com/aspnet-core/grid/editing-inline 他们最近更新了他们的站点，所以一旦您转到这个 link，单击“查看源代码”按钮，然后您可以选择各种按钮来查看 cshtml/controller/etc.

编辑和删除 Kendo 网格中的行

Edit and delete rows in Kendo Grid

javascript

c#

kendo-ui