Post to MVC controller action to return a view using jquery

Question

I am a little new to microsofts MVC framework and seem to be stuck on this issue.

I am trying to post an id which is in json format to my controller action, the controller returns a view with a model, so I am not returning any response back for a success callback to handle the data. The call does not need to be an ajax call, I want to display a brand new view from my click event on my table row.

My code is as follows:

Jquery, added a click event on my table body rows, when I click on a row, I get the id of the row and post to a specific controller action (/Document/Details)

$(document).ready(function () {
$("#tbdocuments").on("click", "tbody tr", function (e) {
    var id = $(this).attr("data-id");
    console.log(id);
    $.post("/Document/Details", { "id": id })
});
})

Mvc Controller:

The controller successfully receives the id passed from the client( the table row click), and I fetch my model correctly to pass to the view.

  public ActionResult Details(string id)
    {
        var model = documentHelper.FetchSingleDocument(Guid.Parse(id));

        return View(model);
    }

Razor View Details.cshtml:

This is the view that my markup is on.

@model DocumentBuddy.Mvc.ViewModels.DocumentViewModel

@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_LayoutSecure.cshtml";
}
<h2>Details</h2>
<div>
<h4>DocumentViewModel</h4>
<hr />
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.DocumentId)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.DocumentId)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Description)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.Description)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.MimeType)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.MimeType)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Length)
    </dt>
    </dl>
</div>
<p>
 @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
 @Html.ActionLink("Back to List", "Index")
</p>

After I click on my table row, it fires the controller and it fetch the model, however the Details view is never ever display, and it still stays on the same view. I did inspect the page as well with no errors been displayed. I am quite confused on how to do this in MVC without it been an ajax call, I need to redirect to a new view. Any help would be greatly appreciated. Thanks.

Why not use an anchor link? href="/documents/details/3". Is it that you want them to be able to click anywhere on the table row? — Mike Wallace
– Mike Wallace, Commented Feb 24, 2016 at 22:16
@mwwallace8, I want the whole row to be clickable, also I am building the body of the table in jquery from an ajax call, so I create a tr attribute and append my json array to the tr which then appends to the table on the view, I am not using razor to populate the table so there is no href tags in there. — Kiran Jagathlal
– Kiran Jagathlal, Commented Feb 24, 2016 at 22:33

Mihir Solanki · Accepted Answer · 2016-02-24 22:49:44Z

3

Your code is perfect so far. All you have to do now is display details page. You have to handle response from server in post method. It will look something like this

$(document).ready(function () {
    $("#tbdocuments").on("click", "tbody tr", function (e) {
        var id = $(this).attr("data-id");
        console.log(id);
        $.post("/Document/Details", { "id": id }, function(detailsHtml){
           $("selector here").html(detailsHtml);
        })
    });
})

So simply update "Selector here" and it will display your details form in the selected element.

If you want to redirect to completely new details page then instead of using jquery post method, set window location. i.e.

$(document).ready(function () {
    $("#tbdocuments").on("click", "tbody tr", function (e) {
        var id = $(this).attr("data-id");
        window.location.href = "/Document/Details/" + id;
    });
})

hope its clear.

edited Feb 24, 2016 at 22:49

answered Feb 24, 2016 at 22:20

Mihir Solanki

3331 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kiran Jagathlal Over a year ago

the jquery code (the js file) is on the index view for the folder controller(the controller is called folder). I want to redirect to the details view in the document controller. The code you added from what I understand is doing an ajax call and will search and update the given selector in the index view of the folder controller with the response. I want to open the view of details action in the document controller. The js file will not have any reference to the html in the details view. Hope that makes sense.

Mihir Solanki Over a year ago

I have updated the answer. please see if that helps.

user3559349 Over a year ago

@KiranJagathlal, If you want to redirect to the details view, then DONT use ajax - its pointless. The whole point of ajax to to stay on the same page.

Collectives™ on Stack Overflow

Post to MVC controller action to return a view using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related