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

Question

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

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

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

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

在编辑控制器中：

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

我不知道为什么有人为我的问题投票 -ve 而不是提供帮助或想法。 无论如何，我想出了一种方法来解决它。 希望这可以帮助别人。

在 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));
    }
});

然后它就像一个魅力。