MVC 4 - 500 error on JSON call

Question

I have started using VS2012 (Yes about time). I have a MVC 4 app.

Im making a JSON call to get data from DB to render in html.

But Im getting a 500 Internal Server error I can see in Fiddler.

Im not sure how to debug this because I cant find where to see the C# exception if that is what the issue is.

So Im calling getRecipe in javascript.

public JsonResult GetRecipe(int rid)
{
     var recipe = _rep.GetRecipe(rid);

     return Json(recipe, JsonRequestBehavior.AllowGet);
}

My script is

var dataService = new function () {
var serviceBase = '/Recipes/'
    getRecipesList = function (callback) {
        $.getJSON(serviceBase + 'GetRecipesList', {}, function (data) {
            callback(data);
        });

    };

    getRecipe = function (rid, callback) {
        $.getJSON(serviceBase + 'GetRecipe', {rid:rid}, function (data) {
            callback(data);
        });

    };
return {
    getRecipesList: getRecipesList,
    getRecipe: getRecipe
};

} ();

var renderer = new function () {
renderList = function () {
    dataService.getRecipesList(renderListDiv);
},

renderListDiv = function (recipes) {
    var listDiv = $('#listdiv');
    listDiv.html("");
    $(recipes).each(function (index) {
        var table = '<table>';
        table += ('<tr><td><a class="recipeLink" href="#recipeList-' + this.RecipeID + '">' + this.RecipeTitle + '</a></td></tr>');
        table += '</table>';
        listDiv.append(table);
    });
},

selectedRecipe = function (anchor) {
    var href = $(this).attr("href");
    var rid = href.split("-")[1];
    dataService.getRecipe(rid, renderRecipe);
};

renderRecipe = function (recipe) {
    var recipeDiv = $('#recipediv');

    var html = '<h1>' + recipe.RecipeTitle + ' (' + recipe.RecipeID + ')</h1>';
    html += '<h4>Preparation Time: ' + getTimeString(recipe.PrepTime) + '</h4>';
    html += '<h4>Cooking Time: ' + getTimeString(recipe.CookTime) + '</h4>';
    var count = recipe.Ings.length;
    var colmax = Math.ceil(count / 2);
    var colleft = 0;
    var colright = colmax;
    html += '</br><table id="ingredientstable">';
    for (colleft = 0; colleft < colmax; colleft++) {
        html += '<tr>';
        html += '<td>' + recipe.Ingredients[colleft].Units + ' ' + recipe.Ingredients[colleft].Measure + ' ' + recipe.Ingredients[colleft].IngredientName + '</td>';
        if(colright < count)
            html += '<td>' + recipe.Ingredients[colright].Units + ' ' + recipe.Ingredients[colright].Measure + ' ' + recipe.Ingredients[colright].IngredientName + '</td>';
        colright += 1;
        html += '</tr>';
    }
    html += '</table>';
    html += '<h4>Method</h4>';
    html += '<p>' + recipe.Method + '</p>';

    recipeDiv.html(html);

    numingredients = 0;
    editorForm.loadEditor(recipe);
};

clearRecipe = function () {
    $('#recipediv').html("");
};

getTimeString = function (time) {
    if (time < 60)
        return time + ' min';
    return time / 60 + ' hours'
};

changeFont = function () {
    $('body').css("font-family", "Comic Sans MS");
};

return {
    renderList: renderList,
    selectedRecipe: selectedRecipe,
    changeFont: changeFont,
    clearRecipe: clearRecipe,
 };

}();

Answer 1

The browser's developer tools might be a good place to get some additional information. In Chrome you can press F12 to bring up the dev tools window. Click on the network tab and then fire off your ajax call. You will see the failed request highlighted in red. If you click on it you will see the error that has been returned from mvc.

I have provided a screenshot in this question: Ajax call with a 'failed to load resource : the server responded with a status of 500'