0

問題を説明するためのサンプルプロジェクトを作成しました

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)

すべてが正常に実行されます。

ViewDetailsカスタムの[表示]ボタンをクリックすると、JavaScriptが起動し、アクションに対してajax呼び出しが行われます。productId値は正しく渡されますが、アクションのはreturn(model)ビューViewDetailsページをまったく更新しません。

RenderActionindex.cshtmlで使用するべきではありませんか？

4

1 に答える 1

2

いずれかのボタンがクリックされたときにグリッドの下にその部分ビューを表示するには、$。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 に答える