BHuelse
BHuelse

Reputation: 2981

Calling Action with ajax doesnt show page

I want to call a controller method with an Ajax call. If this is called, another view should be returned. When I debug the code, I also reach my controller method. However, the new view is not displayed. What am I doing wrong?

Controller:

    public ActionResult RequestDetails(string requestId, string requestState)
    {
        // ToDo handle parameter

        return View();
    }

JS:

ShowDetails = function (e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    $.ajax({
        type: 'GET',
        data: {
            'requestId': dataItem.RequestId,
            'requestState': dataItem.RequestState
        },
        url: "/Controller/RequestDetails",
        contentType: 'application/json; charset=utf-8'
    });
}

What I am doing wrong?

best regards

Upvotes: 0

Views: 27

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

It wouldn't show unless you direct it about what to do with the result that is returned from the ajax call.

You would need to create a container html element on the main View which is currently being displayed on the page firstly:

<div id="RequestDetailsContainer">

</div>

and then in the success callback you will need to put the html returned by controller action to be displayed in that div :

$.ajax({
        type: 'GET',
        data: {
            'requestId': dataItem.RequestId,
            'requestState': dataItem.RequestState
        },
        url: "/Controller/RequestDetails",
        contentType: 'application/json; charset=utf-8',
        success: function(response) { // note this function
                    $("#RequestDetailsContainer").html(response);
                 }
    });

A side note about the url property that, you should be using Url.Action for generating the urls instead of using string literals like:

url: "@Url.Action("RequestDetails","Controller")"

Hope it helps.

Upvotes: 1

Related Questions