2012-07-25 42 views
0

我有一个网格,我希望能够删除行而不必从控制器操作返回新的结果集。Telerik MVC Grid Ajax删除操作

这在我看来:

@(Html.Telerik().Grid<InterestTopicViewModel>() 
      .Name("Grid") 
      .DataKeys(keys => keys.Add(x => x.Id)) 
      .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new {style="margin-left:0"})) 
      .DataBinding(dataBinding => dataBinding.Ajax() 
             .Select("Select", "InterestTopic") 
             .Insert("Insert", "InterestTopic") 
             .Update("Update", "InterestTopic") 
             .Delete("Delete", "InterestTopic")) 
      .Columns(columns => 
         { 
         columns.Bound(x => x.Name); 
         columns.Command(commands => 
              { 
               commands.Edit().ButtonType(GridButtonType.Image); 
               commands.Delete().ButtonType(GridButtonType.Image); 
              }).Title("Actions"); 
         }) 
      .Editable(editing => editing.Mode(GridEditMode.InLine)) 
     ) 

这里是在我的控制器:

[AcceptVerbs(HttpVerbs.Post)] 
    [GridAction] 
    public ActionResult Delete(int id) 
    { 
    InterestTopicViewModel interestTopicViewModel = this.InterestTopicPresenter.GetInterestTopic(id); 

    if (this.InterestTopicPresenter.DeleteInterestTopic(id)) 
     base.LogUserAction(UserActionLoggingType.DeleteInterest, interestTopicViewModel.Name); 

    return this.View(new GridModel(this.InterestTopicPresenter.GetList())); 
    } 

正如你所看到的,在我的控制,我必须返回结束函数的一个GridModel对象中的整个列表。如果我不这样做,视图将不会刷新。

是否有可能在控制器的帮助下删除记录,让Telerik删除javascript中相应行的div?

谢谢。

回答

3

如果你不害怕javascript和jQuery,它不是太困难。而不是使用网格命令栏和绑定,我通常只用一个模板连线它自己,像这样的(用剃刀语法):

.Columns(columns => 
{ 
    columns.Bound(x => x.Name); 
    columns.Template 
    (
     @<text> 
      <a href="#" onclick="delete(this, @item.Id);">Delete</a> 
     </text> 
    ); 
}) 

产品的字段Telerik的在键入列模板绑定提供到你的模型。您的删除功能不需要返回数据。您可以执行如下操作:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Delete(int id) 
{ 
    // call your code to delete the item here 
    return Json(new { resultCode = "success" }); 
} 

然后创建一个JavaScript函数以发布到您的删除函数。

function delete(sender, id) 
{ 
    $.ajax({ 
     type: "POST", // important, only perform deletes on a post 
     url: '/delete', 
     data: { id: id }, 
     success: function (result) 
     { 
      if (result.resultCode == "success") 
      { 
       var row = $(sender).closest("tr"); 
       row.remove(); 
      } 
     } 
    }); 
} 

就是这样的。我不知道确切的语法,但希望这足以让你开始。

+0

这是一个非常好的解决方案。只有一个问题;我的项目中有很多网格,如果我需要实现这样的解决方案,我会为此功能做很多代码。在关键的地方,我肯定会这样做,但对于其他人,我宁愿有一个已经在Telerik框架中实现的解决方案。 – Samuel 2012-07-25 17:52:50