Question

我有一个简单的Telerik Grid for ASP.NET MVC with Ajax delete命令。但是，删除有效，页面显示错误，并且不会更新。

我还想在AJAX调用返回时调用自定义JavaScript，但无法弄清楚代码的放置位置。

以下是观点：

Html.Telerik()
    .Grid<ScenarioVm>(Model)
    .Name("scenarioGrid")
    .DataBinding(dataBinding => dataBinding
        .Ajax()
        .Delete("Delete", "Scenario")
        .Select("Index", "Scenario"))
    .DataKeys(keys => keys.Add(c => c.Id))
    .Columns(columns =>
    {
        columns.Template(o => o.Name)
            .Title("Scenario")
            .FooterTemplate(@<text>Total @Model.Count()</text>);
        columns.Bound(o => o.IsLocked);
        columns.Bound(o => o.ContractMonth);
        columns.Bound(o => o.CreateDate);
        columns.Command(commands => commands
                .Delete()
                .ButtonType(GridButtonType.Image))
            .Title("Delete");
    })
    .Sortable()
    .Scrollable(scroll => scroll.Height(200))
    .ClientEvents(events => events.OnDelete("onDelete")))

在AJAX调用之前调用的Javascript：

function onDelete(e) {
    var scenario = e.dataItem;
    if (scenario.CanDelete == false) {
        alert("Can not delete " +
            e.dataItem.Name +
            ": there exists a solution!");
        return false;
    } else {
        $.blockUI({
            css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }
        });
        return true;
    }
}

控制器方法：

[HttpPost]
[GridAction]
public ActionResult Delete(Scenario scenario)
{
    Logger.Info("Delete scenario " + scenario);
    if (scenario == null)
    {
        return new EmptyResult();
    }

    try
    {
        _scenarioRepository.Delete(scenario);
        Logger.Info("Successfully deleted " + scenario);
    }
    catch(Exception e)
    {
        Logger.Error(scenario + e.Message, e);
        var result = new JsonResult
        {
            JsonRequestBehavior = JsonRequestBehavior.DenyGet,
            Data = new {
                ErrorCode = 1,
                ErrorMessage = e.GetType() + ": " + e.Message
            }
        };

        return result;
    }

    return new EmptyResult();
}

Answer 1

上面的代码我发现了一些错误。首先，客户端事件OnDelete将在将请求发送到服务器之前在客户端上触发。如果您希望Ajax调用服务器的结果，则需要处理OnComplete事件。 对服务器的Ajax调用完成后，此事件将触发，并将结果返回给客户端。

其次，GridAction操作过滤器要求您向视图返回类型IGridAction的值。由于您没有返回预期值，因此它会在客户端上出错。以下是Controller方法的示例：

[HttpPost] [GridAction] public ActionResult Delete(Scenario scenario) { // Delete item and perform other operations as required var data = ... // Get an updated data set, with the deleted item removed var model = new GridModel<ScenarioVm>(data); return View(model); }

这是一个article详细讨论Telerik网站上的Ajax绑定。

我希望有所帮助。

Answer 2

如果我正确理解了这个问题，你想在操作完成时执行javascript函数。示例源代码中的最后一行是为OnComplete事件定义回调。

.ClientEvents(events => events
            .OnLoad("onLoad")
            .OnEdit("onEdit")
            .OnDetailViewCollapse("onDetailViewCollapse")
            .OnDetailViewExpand("onDetailViewExpand")
            .OnDelete("onDelete")
            .OnSave("onSave")
            .OnDataBinding("onDataBinding")
            .OnRowDataBound("onRowDataBound")
            .OnRowSelect("onRowSelect")
            .OnDataBound("onDataBound")
            .OnColumnResize("onColumnResize")
            .OnColumnReorder("onColumnReorder")
            .OnComplete("onComplete"))

Telerik documentation还有一个如何定义OnComplete事件的示例。

在Telerik Grid for ASP.NET MVC中的Ajax删除操作期间出错

2 个答案: