從數據庫顯示子類別數據到級聯下拉列表

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

然後，它就像一個魅力。