Kendo UI Grid MVC重定向到強類型視圖

Question

我有兩個強類型的視圖。 第一個視圖負責顯示Kendo UI網格（MVC），其中列出了匯總的撥款申請。 當用戶選擇一行時，他們將能夠單擊一個按鈕，將其重定向到另一個視圖，該視圖的類型為該網格行所代表的模型。

第二個視圖將顯示一個表格，其中包含撥款申請的所有詳細信息，並允許管理員批准或拒絕帶有批注的申請。

我遇到的問題是獲得“視圖應用程序”按鈕以​​將模型傳遞回控制器，然后使用選定的模型加載另一個視圖。

調節器

    [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。 我看到的與此相關的其他答案是，只需將參數作為url字符串變量傳遞給我的ajax調用的.success函數中的控制器方法作為url字符串變量，然后讓模型綁定器在服務器端將它們全部組合在一起。 很好，但是我要映射很多字段，並且我將添加更多字段，所以我寧願不走那條路。

我想做的是將JSON字符串化的行傳遞到我的控制器方法，將其綁定到我的模型（到目前為止所有這些操作），然后加載該模型的強類型視圖。 我該怎么做？

如果我不能使用ajax調用，還有什么其他方法可以讓我將模型從kendo網格傳遞到控制器並進行重定向？

Answer 1

Ajax調用主要用於要更新進行調用的頁面部分時。 如果您想在網格的同一頁上顯示詳細信息，則使用ajax是有意義的。 由於您希望新視圖顯示在新頁面中，因此建議將網格包含在表單中，並添加JavaScript以將網格數據捕獲到Submit Button click事件中（您可以將Grant ID發送給服務器（如果您想再次從數據庫中檢索它）。 表單將被提交到Details方法，該方法將在新頁面中返回details視圖。