Question

我有两个强类型的视图。第一个视图负责显示Kendo UI网格（MVC），其中列出了汇总的授权应用程序。当用户选择一行时，他们将能够单击一个按钮，将其重定向到另一个视图，该视图强类型为该网格行所代表的模型。

第二个视图将显示一个包含授权申请的所有详细信息的表单，并允许管理员批准或拒绝带有评论的应用程序。

我遇到的问题是获得＆＃34;查看应用程序＆＃34;按钮将模型传递回我的控制器，然后加载另一个视图并选择模型。

控制器

    [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调用，因此我无法从控制器方法加载View。我已经看到的与此相关的其他答案说，只需将参数传递给我的ajax调用的.success函数中的控制器方法作为url字符串变量，然后让模型绑定器在服务器上将它们全部放在一起侧。没关系，但是我有很多要绘制的字段，我会添加更多字段，所以我不想沿着这条路走下去。

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

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

Answer 1

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

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

1 个答案: