如何解决不工作的级联下拉菜单

问题描述

我有一个级联下拉列表，例如第一个下拉列表显示国家/地区列表，并根据国家/地区的选择填充下一个下拉列表。问题是在开发环境中它工作正常，但是当部署在服务器中时，第一个下拉列表被正确填充，因为它的元素来自资源文件，在选择第一个下拉列表后我收到错误。

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>

控制器：

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

我得到的错误信息是

加载资源失败：服务器响应状态为 404 (Not Found) Home/GetModelList?Sid=Ind:1

我检查了类似 this 之类的问题，都是关于 JS 路径或控制器路径，但我已经给出了绝对路径。有人可以让我知道我哪里出错了，如果需要任何其他数据，请告诉我。

谢谢

解决方法

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

上面这行是路由问题，通常当我们通过这种方式从js调用控制器动作时，由于文件夹结构引用，往往会出现路由问题。为了避免这个路由问题并且更清楚，我们也可以像下面这样从js调用控制器动作

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

这解决了我的问题。