jquery - 脚本在一页而不是另一页中工作

Question

我有两个 DropDownList。当第一个的选定项目发生更改时，我填充第二个。我用jquery来做到这一点。它适用于我的创建页面，但在另一个页面（即编辑页面）中它不会调用控制器中的操作方法。

        <div class="form-group">
                        <label asp-for="Province" class="control-label"></label>
                        <select asp-for="Province" class="form-control" asp-items="ViewBag.Province" 
                                new { id="provinces" , onchange="FillCity()" }></select>
                    </div>
                    <div class="form-group">
                        <label asp-for="City" class="control-label"></label>
                        <select asp-for="City" class="form-control" asp-items="ViewBag.City"
                                new { id="cities" } ></select>
                    </div>
</div>
    
        @section Scripts {
            <script>
                function FillCity() {
                    var provinceId = $("#provinces").val();
    alert(provinceId);
                    $.ajax({
                        url: "FillCity?provinceId=" + provinceId,
                        type: "GET",
                        dataType: "json",               
                        success: function (data) {
                            $("#cities").html(""); // clear before appending new list
                            $.each(data, function (key, city) {
                                $("#cities").append(
                                    '<option value="' + city['id'] + '">'
                                    + city['name'] +
                                    '</option>');
                            });
                        }
                    });
                }
            </script>
            }

这是我在控制器中的操作

[HttpGet]
        public ActionResult FillCity( int provinceId)
        {
            var cities = _context.City.Where(i => i.ProvinceId == provinceId).Select(i => new { i.Id, i.Name });
            return Json(cities);
        }

警报消息出现在编辑页面中但没有调用操作，为什么它在一个页面而不是另一个页面中工作？

标签： jqueryasp.net-mvcasp.net-coreasp.net-ajax

Answer 1

更新 29/07

@section Scripts {
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function FillCity() {
        var provinceId = $("#provinces").val();
        alert(provinceId);
        $.ajax({
            url: "FillCity?provinceId=" + provinceId,
            type: "GET",
            dataType: "json",
            success: function (data) {
                $("#cities").html(""); // clear before appending new list
                $.each(data, function (key, city) {
                    $("#cities").append(
                        '<option value="' + city['id'] + '">'
                        + city['name'] +
                        '</option>');
                });
            }
        });
    }
</script>
}

---

我认为主要原因与 url path 相关FillCity。

更改为[HttpGet("/FillCity")]响应 ajax 请求url: "FillCity?provinceId=" + provinceId。

控制器代码

    public IActionResult Index()
    {
        ViewData["Province"] = new SelectList(_context.Province, "Id", "Name");
        ViewData["City"] = new SelectList(_context.City.Where(i => i.ProvinceId == _context.Province.FirstOrDefault().Id).Select(i => new { i.Id, i.Name }), "Id", "Name");

        return View();
    }

    [HttpGet("/FillCity")]
    public ActionResult FillCity(int provinceId)
    {
        var cities = _context.City.Where(i => i.ProvinceId == provinceId).Select(i => new { i.Id, i.Name });

        return Json(cities);
    }

视图代码与您的相同。

截图

如果在您的情况下仍然无法正常工作，请提供更多调试信息，以便我们为您提供帮助。

按下F12可在浏览器中打开调试窗口。