带有ajax绑定的telerik mvc网格

时间:2012-08-14 10:33:39

标签: asp.net-mvc telerik telerik-mvc

我遇到以下问题:我有一个针对telerik mvc网格的自定义编辑命令。这是网格的代码:

Html.Telerik().Grid<Customer>("customers")
                       .Name("Grid")
                       .DataKeys(k => k.Add(o => o.Id))
                       .DataBinding(dataBinding => dataBinding.Ajax().Delete("Delete", "Customer").Select("AjaxIndex", "Customer"))
                       .Scrollable(builder => builder.Height(350))
                       .Filterable()
                       .Sortable(s => s.OrderBy(order => order.Add(o => o.Id).Descending()))
                       .Columns(c =>
                                 {
                                     c.Bound(o => o.Id);
                                     c.Bound(o => o.FirstName);
                                     c.Command(s =>
                                                   {
                                                       s.Custom("editCustomer")
                                                           .Text("Edit")
                                                           .Ajax(true)
                                                           .Action("Edit", "Customer");
                                                            s.Delete().ButtonType(GridButtonType.Image);                                                                                                                }).Width(175);
                                 })
               .ClientEvents(builder => builder.OnComplete("onEditComplete"))
                   .Pageable(p => p.PageSize(5))
                   .Selectable()
                   .Render();

这是编辑命令的回调javascript函数:

function onAppraisalPhaseComplete(e)
{
    if (e.name == "editCustomer") {
        $("#dialog-form").html(e.response.PartialViewHtml);
        open($("#dialog-form"), "Edit Customer"); // this will display a modal with the edit view
    }
}

编辑表单是对以下方法的ajax调用:

    public ActionResult JsonEdit(Customer customer)
    {
        if ((Rules.GetBrokenRules(customer).Count == 0))// there is no validation errors
        {
            Repository.Update(customer);
        }
        else
        {
            ModelState.AddModelErrors(Rules.GetBrokenRules(customer));
            return Json(new
            {
                Success = false,
                PartialViewHtml = RenderPartialViewToString("Insert", appraisalPhaseViewModel)
            });
        }
//if save successful get the customers list and return the partial of the grid in Json
        var customers= Repository.GetAll().ToList();
        ViewData["customers"] = customers;

        return Json(new
        {
            Success = true,
            PartialViewHtml = RenderPartialViewToString("MasterGrid")
        });

完成的ajax调用如下:

 function JsonSave_OnComplete(context) {
        var jsonEdit = context.get_response().get_object();
        if (jsonEdit.Success) { // if the operation is successful reload grid and close the modal dialog
            $("#MasterGridDiv").html(jsonEdit.PartialViewHtml);
            CloseDialog($('#dialog-form'));
        } else { //Redisplay the edit partial view in the modal
            $("#dialog-form").html(jsonEdit.PartialViewHtml);
        }
    }

编辑操作完成后,如果我尝试按下删除按钮,它将调用JsonEdit Action而不是delete操作。我不知道我在这里做错了什么?此外,有时删除按钮不起作用,调用ajax绑定而不是删除按钮。

1 个答案:

答案 0 :(得分:2)

您没有为按钮提供完整的JavaScript处理程序,只提供回调。我应该假设你做得对。但是,您的代码存在明显的问题。您正尝试通过从服务器端渲染视图中注入html来手动重新绑定telerik网格。 这可能会导致您的客户端事件模型无法预测。 而不是:

$("#MasterGridDiv").html(jsonEdit.PartialViewHtml);

尝试使用:

 $("#Grid").data("tGrid").rebind();