jQuery getJson() not working with in ASP.NET MVC

Question

I want to use jQuery to make a simple call to my MVC controller. I was able to debug the server side, meaning the controller picked up the ajax call and return the information requested. But the client side is never updated after server side returns. When I use FireBug to debug the script, the client side is stuck on event.isImmediatePropagationStopped() in handle() of jquery-1.4.1.js. Does that mean the client side simply didn't get called back? Please help.

$('#ToZip').blur(function() {
    $.getJSON('http://localhost:3958/home/GetZipInfo?id=' + this.value,
        function(result){
            $("#ToCity").val = result.City;
            $("#ToState").val = result.State;
        }
    )
});

public ActionResult GetZipInfo(string id)
{
    // some code to prepare return value, zip
    return Json(zip, JsonRequestBehavior.AllowGet);
}

Thanks in advance

Answer 1

I think it maybe because your using a full url "http://localhost:3958/home" - jquery might think your going cross domain so attempts a jsonp call. An easy way to check in firebug is to see if a script was requested or an xhr call attempted, a jsonp call also appends a callback parameter to the querystring.

Try changing the url to just '/home/GetZipInfo?id=' + this.value

Answer 2

Have you validated your json response? http://api.jquery.com/jQuery.getJSON/ states:

As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently.

Open you handler directly in a browser, and copy and paste it in here: http://www.jsonlint.com/

Answer 3

try this way,

var ID = $('#ToZip').val();

var url = '<%= Url.Content("~/") %>' + "home/GetZipInfo";

$.getJSON( url, { id: ID }, function(result){ $("#ToCity").val = result.City; $("#ToState").val = result.State; } );

Answer 4

If your using ASP.NET MVC 2.0 then try using a "POST" versus "GET" on the method something like;

$.ajax({
    type: 'POST',
    url: 'http://localhost:3958/home/GetZipInfo',
    data: {id: this.value },
    success: function(data) {
        $("#ToCity").val = data.City;
        $("#ToState").val = data.State;
    }
    dataType: "json"
});