ASP.Net MVC $.Ajax() function not working when hosted in IIS7

Question

Hi, I have an ASP.Net MVC view in which I have a list of item category displayed .When a submit button is pressed I am posting this form using $.Ajax() function. I get the result (Category Name & Description) back in JSON. This application works fine when I run from Visual Studio 2008.But the Ajax call is not working (success: function not called) when the application is hosted in IIS7.

<script type="text/javascript">

    $(document).ready(function() {

        $('#JsonButton').click(function() {
            getDetails();
        });

        function getDetails() {
            $.ajax(
            {
                type: "POST",
                //url: "Home/GetDetailsInJson?categoryDropBoxId=" +                       $('#categoryDropBoxId').val() + "",
                url: "Home/GetDetailsInJson",
                data:
                {
                    "categoryDropBoxId": $('#categoryDropBoxId').val()
                },
                //contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {

                    //alert($('#categoryDropBoxId').val());
                    $('#categoryDetails').empty();

                    var strHTML = '<fieldset>' +
                                    '<legend>CATEGOTY  DETAILS</legend>' +
                                    '<p>' +
                                    '<strong> Category Name: </strong>' + response.CategoryName +
                                    '</p>' +
                                    '<p>' +
                                    '<strong>Category Description: </strong>' + response.CategoryDescription +
                                    '</p>' +
                                    '</fieldset>'
                    //alert(strHTML);
                    $('#categoryDetails').append(strHTML);
                },

                failure: function(msg) {
                    alert(msg);
                    $('#categoryDetails').text(msg);
                }

            }); //end of $.ajax



        } //end of getDetails function
    });

</script>  

<%using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "categoryDetails" }))
       { %>

       <div>                 

           <table  width ="100%" >

                <tr >
                   <td>
                       <b>Category Details WCF Service ,View Model,Json &  $.ajax() call</b>
                   </td>
                   <td>
                        <input type="button" id="JsonButton" value="Get Details" />
                   </td>
               </tr> 
           </table>              
        </div>    
    <%} %>

    <div id="categoryDetails">

    </div   

Answer 1

In Visual Studio host, the application runs in the web "root". This is (probably) not the case on IIS. So you may need to rewrite the URL in your method to take the virtual root into account.

Are you running the app in IIS7 on your local machine? If you switch the project settings to IIS you can host it and still easily debug into it.