droplist的jQuery在布局ASP中不工作。NETMVC5

Question

我在我的项目中添加了一个外部主题，并且我编写了一个脚本来在dropdownlist中列出在另一个页面上工作的数据（与外部主题无关），但在布局主题页面中不工作。

主页控制器

注意：市区和社区获取局部视图正在工作。

我没有复制代码，因为它太多了。

public PartialViewResult PartialFilter()
{
    ViewBag.countrylist = new SelectList(CountryGet(), "CountryId", "CountryName");
    ViewBag.statuslist = new SelectList(statusGet(), "StatusId", "StatusName");
    return PartialView();
}

public List<Country> CountryGet()
{
    List<Country> countries = db.Countries.ToList();
    return countries;
}

public ActionResult CityGet(int CountryId)
{
    List<City> cities = db.Cities.Where(x => x.CountryId == CountryId).ToList();
    ViewBag.cityListesi = new SelectList(cities, "CityId", "CityName");
    return PartialView("CityPartial");
}

public ActionResult DistrictGet(int CityId)
{
    List<District> districtlist = db.Districts.Where(x => x.CityId == CityId).ToList();
    ViewBag.districtListesi = new SelectList(districtlist, "DistrictId", "DistrictName");
    return PartialView("DistrictPartial");
}

public ActionResult NgbhdGet(int districtid)
{
    List<Neighborhood> neighborhoodlist = db.Neighborhoods.Where(x => x.DistrictId == districtid).ToList();
    ViewBag.nghbdlistesi = new SelectList(neighborhoodlist, "NeighborhoodId", "NeighborhoodName");

    return PartialView("NgbhdPartial");
}

ilter.cshtml

                <div class="col-12 col-lg-10">
                    <div class="row">

                        <div class="col-12 col-md-6 col-lg-3">
                            @if (ViewBag.countrylist != null)
                            {
                                @Html.DropDownListFor(m => m.CountryId, ViewBag.countrylist as SelectList, "Select Country", new { @class = "form-control" })

                            }
                        </div>


                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.CityId, new SelectList(""), "First Choice Country Name", new { @class = "form-control" })

                        </div>

                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.DistrictId, new SelectList(""), "First Choice City Name", new { @class = "form-control" })

                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            @Html.DropDownListFor(m => m.NeighborhoodId, new SelectList(""), "First Choice district Name", new { @class = "form-control" })

                        </div>

                    </div>
                </div>

该下拉脚本在ParatalFilter脚本工作非常好在另一个布局页面

                <script>
                    $(document).ready(function () {
                        $("#CountryId").change(function () {
                            var cid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/CityGet?CountryId=" + cid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#CityId").empty();
                                    $("#CityId").append(response);
                                }
                            })
                        })
                    })</script>
                <script>
                    $(document).ready(function () {
                        $("#CityId").change(function () {
                            var sid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/DistrictGet?CityId=" + sid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#DistrictId").empty();
                                    $("#DistrictId").append(response);
                                }
                            })
                        })
                    })</script>
                <script>
                    $(document).ready(function () {
                        $("#DistrictId").change(function () {
                            var districtid = $(this).val();
                            debugger
                            $.ajax({
                                type: "Post",
                                url: "/Home/NgbhdGet?DistrictId=" + districtid,
                                contentType: "html",
                                success: function (response) {
                                    debugger
                                    $("#NeighborhoodId").empty();
                                    $("#NeighborhoodId").append(response);
                                }
                            })
                        })
                    })</script>

外部布局

                    <!DOCTYPE html>

                    <html lang="en">

                    <head>
                    <meta charset="UTF-8">

                    <meta name="description" content="">

                    <meta http-equiv="X-UA-Compatible" content="IE=edge">

                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Favicon -->
                    <link rel="icon" href="~/Content/img/core-img/favicon.png">



    <!-- Stylesheet -->
                    <link rel="stylesheet" href="~/Content/style.css">



                    <link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />



                    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />

                    <link href="~/Content/MyStyle.css" rel="stylesheet" />





</head>

                    <body>
  
    @Html.Action("PartialFilte" ,"Home")
    <!-- **** All JS Files ***** -->
    <!-- jQuery 2.2.4 -->
                    <script src="/Content/js/jquery.min.js"></script>
    <!-- Popper -->
                    <script src="/Content/js/popper.min.js"></script>
    <!-- Bootstrap -->
                    <script src="/Content/js/bootstrap.min.js"></script>
    <!-- All Plugins -->
                    <script src="/Content/js/bbunbles.bundle.js"></script>
    <!-- Active -->
                    <script src="/Content/js/default-assets/active.js"></script>





</body>

</html>
               

开发工具失败。。。。

我根据这个修复了它：

[在此处输入链接说明][2]

在此处输入链接描述

但是数据没有显示

Answer 1

我注意到，您在少数几行代码上使用了~，而这些代码不是在代码背后编译的，并且由于您的JavaScript不工作，请首先从所有行中删除该符号，如：

 <link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

除此之外，打开浏览器工具来检查是否每个javascript库都正确加载。