asp.net-mvc - Telerik MVC Grid，在ajax从自定义命令中删除后重新绑定(bind)？

Question

我有一个 Telerik MVC 网格，我正在尝试在删除项目后重新绑定(bind)网格。

这是我的网格:

@(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

我做错了什么？

编辑:使用下面的基里尔方法消除了我的错误，但网格仍然没有刷新，javascript被成功调用并到达rebind()命令不过。

Answer 1

您不应从此方法返回 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")
        }
   } 
}

更新 这适用于 Ajax 绑定(bind)。

@(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 类型。