How to resolve a not working cascading drop down

Question

I have a cascading dropdown like for eg first dropdown shows the list of countries and based on the selection of countries the next dropdown gets populated. The problem is that in development environment it's working fine but when deployed in a server the first dropdown gets populated correctly as it's elements come from resource file and after selection of first drop down I get an error.

JS:

<script>
    $(document).ready(function () {

        $("#Site").change(function () {
            var SelectedVal = $(this).val();
            $("#Model").html('');
            $("#Model").append($("<option></option>").attr("value", '')
                .text(' '));
            if (SelectedVal != '') {

                $.get("/Home/GetModelList", { Sid: $("#Site").val() }, function (data) {
                    $("#Model").empty();
                    $("#Model").html('');
                    $("#Model").append($("<option></option>").attr("value", '')
                        .text('  '));
                    if (data.modelAlert != null) {
                        alert(data.projectAlert);
                    }
                    $.each(data.models, function (index, item) {
                        $("#Model").append($('<option></option>').text(item));
                    });
                });
            }
        })
    });
</script>

Controller:

public JsonResult GetModelList()
{
        List<string> models = db.GetModels();
        string modelAlert = alert.GetAlert();
        var result = new { modelAlert, models };
        return Json(result, JsonRequestBehavior.AllowGet);
}

The error message that I get is

Failed to load resource: the server responded with a status of 404 (Not Found) Home/GetModelList?Sid=Ind:1

I checked for similar problems like this and it was all about the JS path or the controller path but I've already given the absolute path. Can someone let me know where am I going wrong, let me know if any additional data is needed.

Thanks

Answer 1

$.get("/Home/GetModelList", { Sid: $("#Site").val() }, function (data) {

The above line was causing the routing problem, usually when we call a controller action from js in this way there tends to be a routing problem due to the folder structure reference. In order to avoid this routing problem and to be more clear we can also call controller action from js like below

$.get('@Url.Action("MethodName", "ControllerName")', function (data) {

This resolved my issue.