我有一个Telerik MVC网格,我试图删除一个项目后重新绑定网格. 这是我的网格: @(Html.Telerik().Grid(Model.Item).Name("Items").Sortable().Scrollable(x = x.Height(400)).Filterable().Pageable(x = x.PageSize(20)).Pageabl
这是我的网格:
@(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类型.