.NET Web API and jQuery AJAX (500 Internal Server Error)

I'm trying to build a SPA using jQuery AJAX and .NET Web Services and I am stuck trying to figure out why my ajax call is returning a 500 internal server error.

Assume id = 0 and an instance of a shopping list is returned to the ajax call. For some reason it is always hitting the error handler and showing "something went wrong".

JS code:

function getShoppingListById(id) {
    console.info(id);

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "api/ShoppingList/" + id,
        success: function(result) {
            currentList = result;
            showShoppingList();
            drawItems();
        },
        error: function() {
            console.error("Something went wrong");
        }
    });
}

$(document).ready(function () {
    console.info("ready");
    $("#shoppingListName").focus();
    $("#shoppingListName").keyup(function(event) {
        if (event.keyCode === 13) {
            createShoppingList();
        }
    });

    var pageUrl = window.location.href;
    var idIndex = pageUrl.indexOf("?id=");
    if (idIndex !== -1) {
        getShoppingListById(pageUrl.substring(idIndex + 4));
    }
});

Select allOpen in new window

C# code:

        
public IHttpActionResult Get(int id)
        {
            var result = shoppingLists.FirstOrDefault(s => s.Id == id);

            if (result == null)
            {
                return NotFound();
            }

            return Ok(result);
       }

Select allOpen in new window