Question

I’m working in an MVC 3 application with ASPX engine and as a point of start I developed a simple search that utilizes a JQuery JSON call to retrieve some info. The call sends a parameter taken from a text input and updates a table with the results. The funcion look like this:

        function PerformLookup() {
            var _accountNumber = $('#accountNumber').val();

            $.ajax({
                url: '/SearchAjax/SearchAccount',
                type: 'POST',
                data: '{_accountNumber:'+_accountNumber+'}',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    UpdateTable(data);
                },
                error: function () {
                    alert('An error occurred while performing the search.');
                }
            });

            return false;
        }

The server code runs a query with that parameter and returns a list that is serialized to JSON to be worked normally with JQuery. The server code looks like this:

        [HttpPost]
        public JsonResult SearchAccount(string _accountNumber)
        {
            MLIBEntities dbMLIB = new MLIBEntities();

            var searchResults = (from s in dbMLIB.Sets
                                 where s.setmap1 == _accountNumber
                                 select s);
            return Json(searchResults.ToList());
        }

As you see it’s nothing difficult and it works perfectly when I run the project from VS2010 and use its virtual machine.

The problem happens when I publish the project in a Windows 2008 server with IIS 7. The project runs normally but when I run the PerformLookup function I get the message “An error occurred while performing the search” meaning that the ajax call failed.

Does anyone have any idea why the call is failing in the IIS while working perfectly in the VS2010 virtual machine? Am I missing any configuration IIS wise?

Thanks in advance!

Answer 1

Never hardcode urls like this because when you deploy your application there could be a virtual directory prepended to your urls:

url: '/SearchAjax/SearchAccount',

Always use Url helpers when dealing with urls:

url: '<%= Url.Action("SearchAccount", "SearchAjax") %>',

So here’s how I would refactor your code:

function PerformLookup() {
    var _accountNumber = $('#accountNumber').val();
    $.ajax({
        url: '<%= Url.Action("SearchAccount", "SearchAjax") %>',
        type: 'POST',
        data: JSON.stringify({ _accountNumber: _accountNumber }),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            UpdateTable(data);
        },
        error: function () {
            alert('An error occurred while performing the search.');
        }
    });
    return false;
}

or if this PerformLookup function is called when some link is clicked, I would have the link generated with an HTML helper:

<%= Html.ActionLink(
    "Perform search", 
    "SearchAccount", 
    "SearchAjax", 
    null, 
    new { id = "search" }
) %>

and then simply AJAXify it:

$(function() {
    $('#search').click(function() {
        var _accountNumber = $('#accountNumber').val();
        $.ajax({
            url: this.href,
            type: 'POST',
            // Probably no need to send JSON request
            // so I've replaced it with a standard
            // application/x-www-form-urlencoded POST request
            data: { _accountNumber: _accountNumber },
            dataType: 'json',
            success: function (data) {
                UpdateTable(data);
            },
            error: function () {
                alert('An error occurred while performing the search.');
            }
        });
        return false;
    });
});

And finally I would strongly recommend you using FireBug which is an excellent tool allowing you to debug this kind of problems as it shows all AJAX requests and what’s happening between the client and the server.