如何恢复asp.net-mvc Telerik MVC Grid删除ajax后重新绑定的功能？

本文共计792个文字，预计阅读时间需要4分钟。

我有Telerik MVC网格，删除一个项目后重新绑定网格。这是我的网格配置：@Html.Telerik( @(Html.Grid(Model.Item).Name(Items).Sortable().Scrollable(x=> x.Height(400)).Filterable().Pageable(x=> x.PageSize(20)).Pageable() )

我有一个Telerik MVC网格,我试图删除一个项目后重新绑定网格.

这是我的网格：

@(Html.Telerik().Grid(Model.Item).Name("Items").Sortable().Scrollable(x => x.Height(400)).Filterable().Pageable(x => x.PageSize(20)) .Pageable() .Columns(columns => { columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building"); columns.Bound(x => x.Equipment.Location.Room).Width(150); columns.Bound(x => x.Number).Title("Number").Width(150); columns.Command(commands => { if (Model.CanViewHistory) { commands .Custom("ViewHistory") .Text("History") .ButtonType(GridButtonType.Text) .SendState(false) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .Action("Index", "ItemHistory"); } if (Model.CanEdit) { commands .Custom("Edit") .Text("Edit") .ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-edit t-test" }) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .SendState(false) .Action("Save", "Items"); commands .Custom("Delete").HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" }) .Text("Delete").Ajax(true) .ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-delete t-test" }) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .SendState(false) .Action("Delete", "Items", new { Area = "Apps" }); } }).Title("Actions"); }).ClientEvents(events => events.OnComplete("onComplete")))

我执行删除后调用的方法是：

<script type="text/javascript"> function onComplete() { $("#Items").data("tGrid").rebind(); } </script>

行动：

public ActionResult Delete(Guid id) { Item item = _itemService.GetOne(x => x.Id == id); _itemService.Delete(item); return RedirectToAction("Index"); }

该操作有效,该项目确实被删除,但网格不刷新,只有在手动重新加载页面后,删除的项目才会被删除.在我的控制台中单击删除按钮时出现以下错误：

Uncaught ReferenceError: xhr is not defined telerik.grid.min.js:1

我究竟做错了什么？

编辑：使用下面的Kirill方法删除我的错误,但网格仍然不刷新,javascript成功调用并获得rebind()命令.

您不应该从此方法返回ViewResult.你应该返回JsonResult.

public JsonResult Delete(Guid id) { try { Item item = _itemService.GetOne(x => x.Id == id); _itemService.Delete(item); return Json(new { result = true }); } catch { return Json(new { result = false }); } }

并且onComplete应该是：

function onComplete(e) { if (e.name == "Delete") { var result = e.response.result; if(result==true) $("#Items").data("tGrid").rebind(); else{ alert("Error on deleting") } } }

UPDATE
这适用于Ajax绑定.

@(Html.Telerik().Grid<ItemType>.Name("Items") .Sortable().Scrollable(x => x.Height(400)) .Filterable().Pageable(x => x.PageSize(20)) //you should add this line: .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Items")) .Columns(columns => { columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building"); columns.Bound(x => x.Equipment.Location.Room).Width(150); columns.Bound(x => x.Number).Title("Number").Width(150); columns.Command(commands => { if (Model.CanViewHistory) { commands.Custom("ViewHistory") .Text("History") .ButtonType(GridButtonType.Text) .SendState(false) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .Action("Index", "ItemHistory"); } if (Model.CanEdit) { commands.Custom("Edit") .Text("Edit") .ButtonType(GridButtonType.Image) .ImageHtmlAttributes(new { @class = "t-icon t-edit t-test" }) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .SendState(false) .Action("Save", "Items"); commands.Custom("Delete") .HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" }) .Text("Delete") .Ajax(true) .ButtonType(GridButtonType.Image) .ImageHtmlAttributes(new { @class = "t-icon t-delete t-test" }) .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id")) .SendState(false) .Action("Delete", "Items", new { Area = "Apps" }); } }).Title("Actions"); }) .ClientEvents(events => events.OnComplete("onComplete")))

你应该添加动作来获取数据到网格：

[GridAction] public JsonResult GetChangeHistory(Guid stockCompanyId) { IEnumerable<ItemType> items = ... //code to get items. return Json(new GridModel<ItemType>(items)); }

我假设items集合的元素是ItemType类型.