Kendo UI 网格 MVC 重定向到强类型视图

Question

我有两个强类型视图。第一个视图负责显示 Kendo UI 网格 (MVC)，其中列出了汇总的拨款申请。当用户选择一行时，他们将能够单击一个按钮，该按钮会将他们重定向到另一个视图，该视图被强类型化为该网格行表示的模型。

第二个视图将显示一个表格，其中包含拨款申请的所有详细信息，并允许管理员批准或拒绝带有评论的申请。

我遇到的问题是让 "View Application" 按钮将模型传回我的控制器，然后使用所选模型加载另一个视图。

控制器

    [HttpPost]
    public ActionResult ValidateModel(GrantFormDTO appToUpdate)
    {
        if (ModelState.IsValid)
        {
            return Json(appToUpdate);
        }

        return Json(new GrantFormDTO());
    }

    [HttpPost]
    public ViewResult Details(GrantFormDTO appToUpdate)
    {
        return View(appToUpdate);
    }

Kendo UI 网格

    @(Html.Kendo().Grid(Model)
      .Name("GrantApplications")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("Applications_Read", "GrantForm"))
      )
      .Columns(columns =>
      {
          columns.Bound(c => c.RequestingOrg).Width(150);
          columns.Bound(c => c.Telephone).Width(150);
          columns.Bound(c => c.Email).Width(150);
          columns.Bound(c => c.ContactName).Width(150);
          columns.Bound(c => c.ContactTel).Width(150);
          columns.Bound(c => c.AmountRequested).Width(150);
          columns.Bound(c => c.TotalGoal).Width(150);
          columns.Bound(c => c.Sponsor).Width(150);
          columns.Bound(c => c.Status).Width(150);
          columns.Bound(c => c.Comment).Width(150);
      })
      //.Scrollable(s => s.Enabled(true).Height("auto"))
      .Pageable()
      .Sortable()
      .Resizable(resize => resize.Columns(true))
      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
      .Events(events => events.Change("GetSelectedRow"))
      )

用于获取选定行数据并发布到控制器的脚本

<div class="row">
<div class="col-md-2 col-md-offset-10">
    <button class="btn btn-primary btn-block" id="viewApplicationBtn" type="button">View Application</button>
</div>

<script>
    //Selection changed event handler
    GetSelectedRow = function(event) {
        var grid = event.sender;
        var data = grid.dataItem(this.select());

        if (data == null) {
            $("#viewApplicationBtn").prop("disabled", true);
        } else {
            $("#viewApplicationBtn").prop("disabled", false);
        }
    }; 

    //View Application Button
    $("#viewApplicationBtn").prop("disabled", true);
    $("#viewApplicationBtn").on("click", function () {
        var grid = $("#GrantApplications").data("kendoGrid");
        var gridData = grid.dataItem(grid.select());

        $.ajax({
            type: "POST",
            url: "@Url.Action("ValidateModel")",
            datatype: "json",
            contentType: "application/json",
            data: JSON.stringify(gridData),
            success: function(data) {
                //This is where I think I need to do something with my Mode/redirect
            },
            error: function(data) {
                console.log("post failed");
            }
        });
    });
</script>

由于我在此处执行 ajax 调用，因此无法从控制器方法加载视图。我看到的与此相关的其他答案说，只需将参数传递给我的控制器方法在我的 ajax 调用的 .success 函数中作为 url 字符串变量，然后让模型绑定器将其全部放入在服务器端一起为我服务。没关系，但我有很多字段要映射，我会添加更多，所以我宁愿不走那条路。

我想做的是将我的 JSON 字符串化行传递到我的控制器方法，让它绑定到我的模型（到目前为止它所做的所有这些）然后加载我的强类型该模型的视图。我怎样才能做到这一点？

如果我不能使用 ajax 调用，还有什么其他方法可以让我将我的模型从 kendo 网格传递到我的控制器并让我用它重定向？

Answer 1

Ajax 调用主要用于当您要更新调用页面的部分内容时使用。如果您想在与网格相同的页面上显示详细信息，ajax 是有意义的。由于您希望新视图显示在新页面中，因此一个建议是将网格包含在表单中并添加 JavaScript 以将网格数据捕获到提交按钮单击事件（您可以发送 id如果您想从数据库中再次检索它，则授予对服务器的授权）。表单将提交给详细信息方法，该方法将 return 新页面中的详细信息视图。

Kendo UI 网格 MVC 重定向到强类型视图

Kendo UI Grid MVC redirect to strongly typed view

ajax

asp.net-mvc

jquery

kendo-ui

kendo-grid