下拉列表的 jQuery 在布局 ASP.NET MVC 5 中不起作用

Posted 2023-05-08

【中文标题】下拉列表的 jQuery 在布局 ASP.NET MVC 5 中不起作用

【英文标题】：jQuery of droplist not working in layout ASP.NET MVC 5

【发布时间】：2021-07-24 21:14:15

【问题描述】：

我在我的项目中添加了一个外部主题，并编写了一个脚本来列出下拉列表中的数据，该数据适用于另一个页面（与外部主题无关），但不适用于布局主题页面。

HomeController

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

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

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");

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

PartialFilter 中的下拉脚本脚本在另一个布局页面中运行良好

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

DevTools failed ....

我是这样解决的：

[在此处输入链接描述][2]

enter link description here

但数据不显示

【问题讨论】：

可能有一些错误 - 如果您分享代码，我们可能会为您提供更多帮助。

感谢您的回复，我编辑帖子并分享代码

开始。将 ~/Content/ 更改为简单 /Content/ 并确保通过打开浏览器工具加载脚本并查看加载文件时是否出错

所以我把它当作分析器

【参考方案1】：

我注意到您在几行没有在后面的代码上编译的 ~，并且因为您的 javascript 无法正常工作 - 首先从所有行中删除该符号，例如：

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

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