jquery post to actionresult that renders a partial view broken on deployment

Question

Everything works perfectly fine in debug but silently blows up on the live server.

Here's my jquery which checks to see what is selected in a dropdown box on the page:

<script type="text/javascript" >
    $(document).ready(function () {
        $("#Schools").change(function () {
            if ($("#Schools").val() != "") {
                $.post("ReturnVisitDates", { SchoolID: $("#Schools").val() }, function (retHTML) {
                    document.getElementById("VisitDates").innerHTML = retHTML;
                });
            }
            else {
                document.getElementById("VisitDates").innerHTML = "";
            }
        });
    });

Here is the action result that is posted to from the jquery:

Function ReturnVisitDates(ByVal SchoolID As Integer) As ActionResult
    Dim articlerepo As New NewsRepository
    Dim _VisitDates As New List(Of SelectListItem)
    _VisitDates = articlerepo.ListAllVisitDates(SchoolID)
    For Each item In _VisitDates
        item.Text = FormatDateTime(item.Text, DateFormat.ShortDate)
    Next
    If _VisitDates.Count > 0 Then
        ViewData("VisitDates") = _VisitDates
        Return PartialView("ReturnVisitDates")
    End If
End Function

Here's the main view:

<div style="text-align:center">
<h1>Welcome to EV Connect!</h1><br />
<h2>Please select your school:</h2>
<% Using Html.BeginForm()%>
<div style="text-align:center"><%: Html.DropDownList("Schools")%></div><br />
<div id="VisitDates"></div>
<br />
<% End Using%>

and the partial view:

<%: Html.DropDownList("VisitDates")%><br /><br />

As stated before this works perfectly fine in my dev environment and seems to fail on the live server. I've done some digging around with firebug and it seems to be throwing a 404 on the partialview saying that it can't find "Home/ReturnVisitDates".

Answer 1

I would recommend you to always use HTML helpers when dealing with urls instead of hardcoding them as you did. This way no matter how your routes look like or where your site is deployed (virtual directory or not) it will simply work:

$(function () {
    $('#Schools').change(function () {
        var schoolId = $(this).val();
        if (schoolId != '') {
            var url = '<%= Url.Action("ReturnVisitDates", "Home") %>';
            $('#VisitDates').load(url, { SchoolID: schoolId });
        } else {
            $('#VisitDates').html('');
        }
    });
});

Also why are you using jQuery and still performing DOM manipulation manually using document.getElementById? And notice how the .load() function could simplify your code.