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

Just a something that i find odd: Why do you use queryparameter ( sid ) , if your controller method does not support one ? Except for that it is most likely a routing problem. — Dominik Sand, Jun 21 '21 at 07:05
try adding the full URL of /Home/GetModelList (not the absolute path) — Sergio, Jun 21 '21 at 07:19
@DominikSand I removed the queryparameter, I had used it earlier but later on did some changes in controller but then forgot to remove the same from JS. Anyway thanks for highlighting and yes it was a routing problem. — m_alpha, Jun 22 '21 at 06:45

score 1 · Accepted Answer · answered Jun 22 '21 at 06:43

$.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.

How to resolve a not working cascading drop down

1 Answers1