AJAX Success Function on Server

Question

This works on my dev machine, but not on a production server. I am trying to update some divs with ajax, but they are not updated, though other parts work fine. I am using IIS 6 on the server. When I debug this code on the server side with firebug, it does not hit any breakpoints I add to the success function.

Script:

function updateServiceInfo(nodeId) {
        var id = { id: nodeId };
        $.ajax({
            url: '/ServiceInfo/ServiceInfoPartial',
            type: 'GET',
            data: id,
            dataType: 'html',
            success: function (data) {
                $('#serviceInfoContent').html(data);
            },
    error: function (request, error) {

    }
        });
    }

Controller:

 public class ServiceInfoController : Controller
    {
        public ActionResult ServiceInfo()
        {
            return PartialView("ServiceInfo");
        }

        public ActionResult ServiceInfoPartial(string id)
        {
            return PartialView("ServiceInfoPartial");
        }
    }

Views:

serviceinfopartial

@model string
<p>
    Немає опису</p>

serviceinfo

<div id="serviceInfo">
    <div id="ContainerPanel" class="ContainerPanel">
        <div id="serviceInfoHeader" class="collapsePanelHeader">
            <div id="dvHeaderText" class="HeaderContent">
                Опис сервісу</div>
            <div id="dvArrow" class="ArrowClose">
            </div>
        </div>
        <div id="serviceInfoContent" class="serviceInfoContent">

        </div>
    </div>
</div>

The response that is returned in the console is

GET http://localhost/Managers/GetManagers?nodeId=563344 404 Not Found 42ms

Answer 1

Ahhhhhhhhhhhhhh, another hardcoded url:

url: '/ServiceInfo/ServiceInfoPartial',

Never hardcode urls like this in an ASP.NET MVC application.

Always use url helpers to generate them:

url: '@Url.Action("ServiceInfoPartial", "ServiceInfo")',

or if this is in a separate javascript file where you cannot use url helpers simply use HTML5 data-* attributes on some DOM element:

<div id="serviceInfo" data-url="@Url.Action("ServiceInfoPartial", "ServiceInfo")">
...
</div>

and then in your javascript simply:

url: $('#serviceInfo').data('url'),

The reason your code doesn't work when you host it in IIS is because in IIS you are probably hosting your application in a virtual directory so the correct url is no longer /ServiceInfo/ServiceInfoPartial but is /YourAppName/ServiceInfo/ServiceInfoPartial. That's the reason why you should never hardcode any url and use helpers to generate them => it's because helpers handle this cases. Another benefit of using helpers is that if you later decide to change the layout of your routes in Global.asax you won't need to modify all your javascript files, etc... Your url managment is centralized in a single location.

Answer 2

This worked for me, but only tested in Chrome 53:

Create some global scope variables in your .cshtml file, just be mindful of scope issues and give your variables unique names.

<script>
    globalUrl = '@Url.Action("ServiceInfoPartial", "ServiceInfo")';
</script>

Then reference your js file...

<script type="text/javascript" src="yourJsFile.js"></script>

Inside your yourJsFile.js:

url: globalUrl,