CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-4
leemid
leemid

Reputation: 157

How do I get back what I want from an ajax call?

I am building an MVC 4 project in which I display a table of projects and their several status milestones. Each milestone is represented by a cell colored either green, yellow or red. I build these cell's content using an html helper to present textual content on top of the colored background using some fairly complex logic. I want to allow the user to click on any of the cells and pop up a jQuery dialog displaying the details pertinent to that status item using a partial view. Each cell has the same css class which I use to bind a click event and then send an ajax call to the server, passing the id of the cell. The call is being received as expected by the controller method but the ajax call is failing. The sending view has been built using one data model to populate the cells and of course I need to send a different data model to the partial view and I don't know if the mismatch is the reason for the fail, I don't think so. I am trying to do the development using simple data just to get it working so I have tried sending back just a value or a key/value pair as Json and each way fails.

Here's the js:

$('.statusCell').click(function () {
        var statusId = this.id;
        alert("clicked this status: " + statusId);

        var request = $.ajax({
            url: "/Report/GetStatusData/",
            data: {
                id: statusId
            }

        });

        request.success(function (data) {
            alert("returned ajax data: " + data);
        });
        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
});

The fail function is displaying just as you would expect in a fail. Here is the controller code in which I have tried several return attempts:

public ActionResult GetStatusData(int id)
{
    return Json(new { prop = id });
    //return PartialView("_displayStatus", id);
}

The problem is I don't really know what I need to do on a detailed level. I understand the general concept but not what is actually going on. I have done ajax calls in the past but using ActionLinks with Ajax within them with partial views as the success target. This is different enough that it eludes me. What do I need to return to the view so that I can pass the new data to the partial view and load it? Can I not send back what ever model I need? What form does it need to be in that I have missed? I might mention that I have not yet written the code for the partial, as I wanted to get this working first. But I don't see why not having a view to receive the new data should matter since I haven't mapped them together. I appreciate any help anyone can offer.

Upvotes: 0

Views: 52

Answers (2)

jfriend00
jfriend00

Reputation: 707326

For the JSON to make it back from your controller to the ajax call, several things must be true:

  1. You must have your controller send properly formatted JSON.
  2. The Ajax call must know that it is expecting JSON (or be able to intelligently guess that it's JSON).

I don't know exactly how your ASP environment works, but are you 100% sure you're creating legal JSON and sending that from the controller? You can verify exactly what is being sent back in the network tab of the Chrome or Firefox debugger where it will show the exact data coming over the wire. This often adds clarity to what is going on or might be wrong.

For item #2, you either need the controller to set the request type to JSON so the ajax call sees that it's a JSON mime type or you need to specify the dataType in your ajax call. It's always better to fix this on the server side if you can so it will just automatically work with jQuery ajax calls.

You can force the JSON data type like this:

$('.statusCell').click(function () {
        var statusId = this.id;
        alert("clicked this status: " + statusId);

        var request = $.ajax({
            url: "/Report/GetStatusData/",
            data: {
                id: statusId
            },
            dataType: "json"
        });

        request.success(function (data) {
            alert("returned ajax data: " + data);
        });
        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
});

Upvotes: 0

Matt Bodily
Matt Bodily

Reputation: 6423

at that point request is out of scope. put the success inside the click event. I put it in the ajax call itself. under data add

success: function(data){
    alert("returned ajax data: " + data);
}

Upvotes: 1

Related Questions