Question

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

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值已正确传递，但return(model)操作的ViewDetails根本不会更新我的视图页。

我的index.cshtml中是否应该使用RenderAction？

Answer 1

要在单击任何按钮时在网格下显示该部分视图，您应使用$ .ajax的成功回调函数。

@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>

网格中的自定义命令按钮不会更新局部视图

1 个答案: