0

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

索引.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);
}

查看详细信息.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操作根本不会更新我的视图页面。

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

4

1 回答 1

2

要在单击任何按钮时在 Grid 下显示该 Partial 视图，您应该使用 $.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>
于 2012-12-12T20:30:21.003 回答