从数据库填充下拉列表的问题（依赖下拉列表）答案

【问题标题】：Problem to fill dropdownlist from database (Dependency Dropdownlists)从数据库填充下拉列表的问题（依赖下拉列表）
【发布时间】：2019-06-12 06:54:21
【问题描述】：

我想用另一个下拉列表填充下拉列表。这是类别和子类别。

第一个下拉列表是主要类别数据库中的字段： 1.身份证 2.猫名

第二个下拉列表是 subCategory 数据库中的字段： 1.身份证 2.MainId 3.猫名

这是真的，现在：我的剃须刀代码：

@functions {
    public List<MainProduceCategory>
        CatList(int mainCatId)
    {
        ApplicationDbContext _context = new ApplicationDbContext();
        IMainProduceRepository cats = new MainProduceRepository(_context);
        return cats.GetCats(items);
    }
}

代码为真，按 maincatId 返回子类别。

<div class="form-group">
    <label class="control-label"></label>
    <select class="custom-select simplebox form-control" onChange="myjs(this.value);">

        <option value="1">movies</option>
        <option value="2">softwares</option>
    </select>
</div>

代码是剃须刀中的主要类别。

<div class="form-group">
    <label class="control-label"></label>
    <select id="subcats" class="custom-select simplebox form-control">
        <option value="0">not select</option>
    </select>
</div>

代码是剃须刀中的子类别。

现在：如何通过主下拉列表填充第二个下拉列表？

jquery 代码：但不起作用。

<script language="javascript">
    function myjs(state) {
        with (document.getElementById('subcats')) {
            options.length = 0;

            if (state == 0) {
                options[0] = new Option('mainSelect', '0');
            }

            if (state == "1") {

                for (var i = 0; i <= @CatList(1).Count; i++) {

                     options[i] = new Option(@CatList(1).Select(c=>c.CatName)[i]);
                }
            }
        }
    }
</script>

【问题讨论】：

您的CatList() 需要int mainCatId，但您正在传递@CatList("1")。不应该是@CatList(1)吗？我没有使用 razor-pages，但我认为这应该会产生一些编译器错误？
它是@CatList(1) 但 options[i] = new Option(@CatList(1).Select(c=>c.CatName)[i]);不能使用内联 jquery！
关注以下链接：click here
谢谢Atabai。你能编辑我的代码吗？

标签： c# jquery asp.net-core razor-pages

【解决方案1】：

这是关于 Country 和 City 之间的级联下拉列表的简单演示。您可以参考并根据需要进行修改

1.模型

public class Country
{
    public int Id { get; set; }
    public string CountryName { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string CityName { get; set; }
    public Country Country { get; set; }
}

2.使用jQuery AJAX绑定CityList下拉列表

<div>
    <select asp-items="@ViewBag.Country" id="countrylist">
        <option>Select</option>
    </select>
</div>

<div>
    <select id="citylist"></select>
</div>

@section Scripts
{
<script type="text/javascript">
    //Insert default item "Select" in dropdownlist on load
    $(document).ready(function () {
        var items = "<option value='0'>Select</option>";
        $("#citylist").html(items);
    });

    //Bind City dropdownlist
    $("#countrylist").change(function () {
        var countryId = $("#countrylist").val();
        var url = "/Countries/GetCityList";

        $.getJSON(url, { CountryId: countryId }, function (data) {  
            var item = "";
            $("#citylist").empty();
            $.each(data, function (i, city) {
                item += '<option value="' + city.value + '">' + city.text + '</option>'
            });
            $("#citylist").html(item);
        });
    });
</script>
}

3.在CountriesController中添加GetCityList方法

public async Task<IActionResult> CountryList()
{
      ViewBag.Country = new SelectList(_context.Country, "Id", "CountryName");
      return View();
}

[HttpGet]
public JsonResult GetCityList(int CountryId)
{
      var citylist= new SelectList(_context.City.Where(c => c.Country.Id == CountryId),"Id","CityName");
      return Json(citylist);

}

【讨论】：