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

Question

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

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

我的代码的问题是，当“区域”下拉列表中改变了“区”下拉列表中只填入/选择。

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

在编辑控制器：

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中，我只是从传递给视图的Model中获取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)); 
    } 
}); 

然后，它就像一个魅力。