Kendo UI Grid MVC redirect to strongly typed view

Question

I have two strongly typed views. The first view is responsible for displaying a Kendo UI grid (MVC) which lists summarized grant applications. When a user selects a row, they will be able to click a button that will redirect them to another View which is strongly typed as the Model represented by that grid row.

The second view will display a form with all the details of the grant application and allow an administrator to approve or reject the application with comments.

The problem that I'm having is getting the "View Application" button to pass the model back to my controller and then load the other View with the Model selected.

Controller

    [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 Grid

    @(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"))
      )

Scripts for getting selected row data and posting to controller

<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>

Since I'm doing an ajax call here, I'm not able to load a View from a controller method. The other answers I've seen related to this say to simply pass the parameters to my controller method in the .success function of my ajax call as url string variables and then let the model binder put it all together for me on the server side. That's fine, but I have a lot of fields to map, and I will be adding more, so I'd rather not go down that route.

What I'd like to do, is have my JSON stringified row passed to my controller method, have it bind to my Model (all of which it does so far) and then load my strongly typed view of that Model. How can I accomplish this?

If I can't use an ajax call, what other approach will let me pass my model from a kendo grid to my controller and let me redirect with it?

Answer 1

Ajax calls are mainly meant to be used when you want to update parts of the page from which you are making the call. If you wanted to display the details on the same page as the grid, ajax would make sense. Since you want the new view to be displayed in a new page, one suggestion would be to include the grid in a form and add the JavaScript to capture the grid data to the submit button click event (You can send the id of the grant to the server if you want to retrieve it again from the database). The form would be submitted to the Details method which will return the details view in a new page.