网格中的自定义命令按钮未更新部分视图答案

【问题标题】：Custom command button from grid isn't updating partial view网格中的自定义命令按钮未更新部分视图
【发布时间】：2012-12-12 14:07:41
【问题描述】：

我创建了一个示例项目来说明我的问题

Index.cshtml：

@using Kendo.Mvc.UI
@model IEnumerable<KendoUIMvcApplication3.Models.Product>
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    function clickView(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        $.ajax({
            url: "/Home/ViewDetails",
            data: { productId: dataItem.Id }
        });
    }
</script>
<div>
    @(Html.Kendo().Grid(Model)
          .Name("RoleGrid")
          .Columns(columns =>
              {
                  columns.Bound(p => p.Id);
                  columns.Bound(p => p.Name).Width("30%");
                  columns.Bound(p => p.Description);
                  columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                          command.Custom("View").Click("clickView");
                      }).Width(250);
              })
          .ToolBar(toolbar => toolbar.Create().Text("Add"))
          .Sortable()
          .Scrollable()
          .HtmlAttributes(new { style = "height: 350px" })
</div>

@{ Html.RenderAction("ViewDetails", "Home", new { productId = 0 });}

我的 HomeController 中的 ViewDetails 操作：

public ActionResult ViewDetails(int productId)
{
    Detail model;
    if (productId == 0)
    {
        model = new Detail
            {
                Price = "zero",
                Origin = "zero"
            };
    } else {
        model = new Detail
            {
                Price = productId.ToString(),
                Origin = productId.ToString()
            };
    }
    return View(model);
}

ViewDetails.cshtml：

@model KendoUIMvcApplication3.Models.Detail
@{
    ViewBag.Title = "ViewDetails";
    Layout = null;
}

@Html.DisplayFor(m => m.Price)
@Html.DisplayFor(m => m.Origin)

一切正常。

单击自定义的“查看”按钮会触发 javascript，从而对我的 ViewDetails 操作进行 ajax 调用。 productId 值已正确传递，但是我的 ViewDetails 操作的 return(model) 根本不会更新我的视图页面。

我不应该在我的 index.cshtml 中使用 RenderAction 吗？

【问题讨论】：

标签： asp.net-mvc razor grid kendo-ui partial-views

【解决方案1】：

要在单击任何按钮时在 Grid 下显示 Partial 视图，您应该使用 $.ajax 的 success 回调函数。

@using Kendo.Mvc.UI
@model IEnumerable<KendoUIMvcApplication3.Models.Product>
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    function clickView(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        $.ajax({
            url: "/Home/ViewDetails",
            data: { productId: dataItem.Id },
            success:function(response){
                $('#viewDetails').html(response);
            }
        });
    }
</script>
<div>
    @(Html.Kendo().Grid(Model)
          .Name("RoleGrid")
          .Columns(columns =>
              {
                  columns.Bound(p => p.Id);
                  columns.Bound(p => p.Name).Width("30%");
                  columns.Bound(p => p.Description);
                  columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                          command.Custom("View").Click("clickView");
                      }).Width(250);
              })
          .ToolBar(toolbar => toolbar.Create().Text("Add"))
          .Sortable()
          .Scrollable()
          .HtmlAttributes(new { style = "height: 350px" })
</div>

<div id="viewDetails"></div>

【讨论】：