getJSON data function doesnt work on IIS

Question

I have a pair of cascading drop down lists for Type & Sub Type. These work perfectly when testing in debug mode locally but once I publish to IIS the sub type list doesnt populate and is blank. I dont get any error messages. I have tried this in IE9 & also Google Chrome V46 but get the same result.

The controllers are:

    public ViewResult StartRA()
    {
        var user = User.Identity.Name;
        string userName = user.Substring(7);
        var creator = Peopledb.People.FirstOrDefault(x => x.Username == userName);
        var creatorContractId = (int)Session["LoggedContractId"];

        StartRiskAssessmentViewModel viewModel = new StartRiskAssessmentViewModel
        {
            RiskAssessment = new RiskAssessment(),
            CreatorId = creator.PersonId,
            CreatorContractId = creatorContractId,
            Assessor = creator.FirstName + " " + creator.LastName,
            Locations = Peopledb.Locations.Where(x => x.Dormant == false).OrderBy(x => x.LocationName).ToList(),
            Types = db.Types.Where(x => x.Dormant == false).ToList(),
        };
        return View(viewModel);
    }

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult SubTypeList(int typeId)
    {
        var subTypes = db.SubTypes.Where(x => x.Dormant == false && x.TypeId == typeId).ToList();

        if (HttpContext.Request.IsAjaxRequest())
            return Json(new SelectList(
                            subTypes,
                            "SubTypeId",
                            "SubTypeName"), JsonRequestBehavior.AllowGet
                        );

        return View(subTypes);
    }

And the Razor view is:

@model RACentral.ViewModels.StartRiskAssessmentViewModel

@{
ViewBag.Title = "Start RA";
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <h3 class="col-md-offset-2">Type</h3>
    <div class="form-group">
        @Html.LabelFor(model => model.TypeId, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.TypeId, new SelectList(Model.Types, "TypeId", "TypeName", 0), "Please Select", new { @class = "form-control", @id = "Types" })
            @Html.ValidationMessageFor(model => model.TypeId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.SubTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <select id="SubTypes" name="SubTypeId" class="form-control"></select>
            @Html.ValidationMessageFor(model => model.SubTypeId, "", new { @class = "text-danger" })
        </div>
    </div>

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-primary" /> @Html.ActionLink("Cancel", "IndexLoggedIn", "Home", null, new { @Class = "btn btn-danger" })
        </div>
    </div>
</div>
}


@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
            $(function () {
        $("#Types").change(function () {
            $.getJSON('@Url.Action("SubTypeList","RiskAssessment")' {
                var items = "<option>Please Select</option>";
                $.each(data, function (i, subtype) {
                    items += "<option value='" + subtype.Value + "'>" + subtype.Text + "</option>";
                });
                $("#SubTypes").html(items);
            });
        });
</script>
}

Answer 1

You can do this using $.ajax and it might be easier for you to see what's happening

$(function () {
    $("#Types").change(function () {
        $.ajax({
            type: "get", // can change to post easily
            data: {typeId: $(this).val()}, // or this.value
            url: "@Url.Action("SubTypeList", "RiskAssessment")" // use url helper here
        }).done(function (data) {
            var items = "<option>Please Select</option>";
            $.each(data, function (i, subtype) {
                items += "<option value='" + subtype.Value + "'>" + subtype.Text + "</option>";
            });
            $("#SubTypes").html(items);
        });
    });
});

using the url helper in your code was the right direction, you just needed to include your params also.

$.getJSON(
    "@Url.Action("SubTypeList", "RiskAssessment")",
    { typeId: $(this).val() })
.done(function (data) {
    var items = "<option>Please Select</option>";
    $.each(data, function (i, subtype) {
        items += "<option value='" + subtype.Value + "'>" + subtype.Text + "</option>";
    });
    $("#SubTypes").html(items);
});