JsonResult is returning view html rather than a serialized object when called from jQuery Get()

Question

I'm trying to get a json serialized object from within an MVC user control using jQuery. The problem is the result coming back is the full HTML for the page that contains my control. The page and the control use the same controller. I've tried breaking on the method I'm calling in the controller and it never gets hit. I've tried various incarnations of the jQuery Ajax calls, and get the same result.

jQuery code:

<script type="text/javascript">
$('#Project_GeneralContractor_Id').change(function() {
    //alert('<%= Url.Action("GetGeneralContractor", "Projects") %>/1');
    $.get('<%= Url.Action("GetGeneralContractor", "Projects") %>', { id: $('#Project_GeneralContractor_Id').val() }, function(data) {
        alert(data);
    });
});
</script>

Controller code:

public JsonResult GetGeneralContractor(int id)
{
    return Json(_GeneralContractorRepository.Get(id));
}

Where $('#Project_GeneralContractor_Id') is a drop down list and _GeneralContractorRepository.Get(id) returns an individual GeneralContractor object.

Not sure what I have going on, but I suspect the jQuery side since I can't seem to get a break in the controller.

Answer 1

You need to specify type: json (fourth optional paramter to $.get). See the $.get arguments.

 $.get('<%= Url.Action("GetGeneralContractor", "Projects") %>', { id: $('#Project_GeneralContractor_Id').val() }, function(data) {
        alert(data);
    }, "json");

Answer 2

Have you tried using getJSON()?

If that's not, I'm gonna lean towards server side issue. Hard to guess without looking at the page being returned though.

Answer 3

It was a routing issue. My Projects controller has some special route cases. I created a separate controller to manage GeneralContractors and all is well.