显示从数据库到级联下拉列表的子类别数据

Question

我在“创建”视图中有一个级联下拉列表，在选择第一个下拉列表 #regions 后，第二个下拉列表 #districts 将呈现该地区的地区列表。

首次加载时，如何将数据库中的“区”值返回到“编辑”视图中的#districts 下拉列表？我只能显示我的 Region 值，但 District 值是空白的。

我的代码的问题是“地区”下拉列表仅在“区域”下拉列表更改/选择时才会填充。

我搜索了很多关于此的帖子，但他们都在谈论如何制作级联下拉列表，但不显示来自数据库的数据。

在编辑控制器中：

var item = await _context.Items
           .Include(i => i.District)
           .SingleOrDefaultAsync(i => i.ID == id);

var model = new ViewModel { Title = item.Title, RegionID = item.District.RegionID, DistrictID = item.DistrictID };

List<Region> regions = new List<Region>();
regions = await _context.Regions.ToListAsync();
regions.Insert(0, new Region { ID = 0, Name = "-- Select a region --" });
List<District> districts = new List<District>();

ViewBag.RegionList = new SelectList(regions, "ID", "Name");
ViewBag.DistrictList = new SelectList(districts, "ID", "Name");

return View(model);

在编辑视图中：

<script type="text/javascript">
$(function () {
    if ($("#regions").val() == '0') {
        var districtDefaultValue = "<option value=''>-- Select a district --</option>";
        $("#districts").html(districtDefaultValue).show();
    }

    $("#regions").change(function () {
        var selectedItemValue = $(this).val();

        var ddlDistrict = $("#districts");
        $.ajax({
            cache: false,
            type: "GET",
            url: '@Url.Action("GetDistrictByRegionId", "Items")',
            data: { "id": selectedItemValue },
            success: function (data) {
                ddlDistrict.html('');
                $.each(data, function (id, option) {
                    ddlDistrict.append($('<option></option>').val(option.id).html(option.name));
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error occurred in loading corresponding districts.');
            }
        });
    });
});

Answer 1

我不知道为什么有人为我的问题投票而不是提供帮助或想法。无论如何，我想办法解决它。希望这可以帮助其他人。

在 javascript 中，我只是从传递给视图的模型中获取 DistrictID。

var selectedDistrict = @Model.DistrictID;

然后在$.each函数中我做一个条件语句将保存的区域设为selected:

$.each(data, function (id, option) {
    if (option.id == selectedDistrict) {
        ddlDistrict.append($('<option selected="selected"></option>').val(option.id).html(option.name));
    } else {
        ddlDistrict.append($('<option></option>').val(option.id).html(option.name));
    }
});

然后它就像一个魅力。