当前位置 : 主页 > 网络编程 > ASP >

asp.net-mvc – Telerik MVC Grid,从自定义命令删除ajax后重新绑定?

来源:互联网 收集:自由互联 发布时间:2021-06-24
我有一个Telerik MVC网格,我试图删除一个项目后重新绑定网格. 这是我的网格: @(Html.Telerik().Grid(Model.Item).Name("Items").Sortable().Scrollable(x = x.Height(400)).Filterable().Pageable(x = x.PageSize(20)).Pageabl
我有一个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类型.

网友评论