0

我有一个用于 ASP.NET MVC 的简单 Telerik Grid，带有 Ajax 删除命令。删除工作，但是，页面显示错误，并且不更新。

我还想在 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();
}
4

2 回答 2

1

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

IGridAction其次，GridAction 操作过滤器希望您向视图返回一个类型的值。由于您没有返回预期值，因此会在客户端出现错误。以下是您的 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);
}

这是Telerik 网站上详细讨论 Ajax 绑定的文章。

我希望这会有所帮助。

于 2012-07-25T22:47:48.727 回答
1

如果我正确理解了这个问题，您希望在操作完成时执行 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 文档还有一个如何定义 OnComplete 事件的示例。

于 2012-07-26T13:08:31.497 回答