MVC使用動態下拉列表編輯表格 - 如何設置初始值

Question

我正在使用MVC，C＃和實體框架。 在我的模型中的對象是：

國家 -------- ID，姓名

市 ------- ID，姓名，STATEID

TheObject ----編號，名稱，StateId，CityId

我想爲TheObject創建編輯表單。 「編輯」窗體具有2個動態創建的下拉列表狀態和城市，城市列表取決於在狀態列表上進行的選擇。 問題是下拉列表填寫正確，但是當編輯窗體打開時，這2個下拉列表處於空狀態，並且沒有爲編輯的對象選擇實際值。

編輯視圖的部分碼是這樣的：

<div class="form-group"> 
     @Html.LabelFor(u => u.State, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.DropDownListFor(u => u.State, 
      new SelectList(ViewBag.State, "Id", "Name"), 
      "Choose State", 
      new { @class = "form-control", @onchange = "selectCities()" }) 
      @Html.ValidationMessageFor(u => u.State, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(u => u.City, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.DropDownListFor(u => u.City, 
    new SelectList(Enumerable.Empty<SelectListItem>(), "Id", "Name"), 
      "Choose City", 
      new { @class = "form-control" }) 
      @Html.ValidationMessageFor(u => u.City, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

function selectCities() { 
    debugger; 
    var stateId = $("#State").val(); 
    $.ajax({ 
     url: '/Home/selectCities', 
     type: 'POST', 
     datatype: 'application/json', 
     contentType: 'application/json', 
     data: JSON.stringify({ stateId: +stateId }), 
     success: function (result) { 
      $("#City").html(""); 
      $("#City").append 
      ($('<option></option>').val(null).html("---choose City---")); 
      $.each($.parseJSON(result), function (i, cty) 
      { $("#City").append($('<option></option>').val(cty.Id).html(cty.Name)) }) 

     }, 
     error: function() { alert("Error !") }, 
    }); 
} 

控制器的部分碼是這樣的：

private void Fill_StateDropDownList() 
    { 
     var st = from d in db.States 
        orderby d.Name 
        select d; 
     ViewBag.State = st.ToList(); 
    } 

    [HttpPost] 
    public ActionResult selectCities(string stId) 
    { 

     List <City> lstcity = new List <City>(); 
     int stateiD = Convert.ToInt32(stId); 
     lstgrupet = (from d in db.Citys 
        where d.StateID==stateiD 
       select d).ToList(); 
     string result= JsonConvert.SerializeObject(lstgrupet, Formatting.Indented, 
     new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}); 
     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

public ActionResult Edit(int? id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 
     TheObject obj = db.TheObjects.Find(id); 
     if (obj == null) 
     { 
      return HttpNotFound(); 
     } 
     Fill_StateDropDownList()    
     return View(obj); 
    } 

    [HttpPost, ActionName("Edit")] 
    [ValidateAntiForgeryToken] 
    public ActionResult EditPost(int? id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 
     var theobjectToUpdate = db.TheObjects.Find(id); 

     if (TryUpdateModel(theobjectToUpdate, "", 
      new string[] { "Name","StateId","CityId" })) 
     { 
       try 
       { 
        db.SaveChanges(); 
        return RedirectToAction("Index"); 
       } 
       catch (Exception) 
       { 
        ModelState.AddModelError("", "Error."); 
       } 

     } 
     Fill_StateDropDownList() 
     return View(theobjectToUpdate); 
    } 

Answer 1

實際上SelectList具有與被叫參數的構建selectedValue

現在你應該知道如何去做

in編輯查看

<div class="form-group"> 
    @Html.LabelFor(u => u.State, new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.DropDownListFor(u => u.State, 
     new SelectList(ViewBag.State, "Id", "Name", Model.State), 
     "Choose State", 
     new { @class = "form-control", @onchange = "selectCities()" }) 
     @Html.ValidationMessageFor(u => u.State, "", new { @class = "text-danger" }) 
    </div> 
</div> 

Answer 2

您已擁有保存的狀態和城市值。您所要做的就是根據保存的狀態ID加載城市的子集，並使用該集合呈現城市的下拉菜單

DropDownListFor幫助程序方法將從SELECT元素中選擇相應的選項，只要視圖模型的City屬性值與選項的值屬性值之一相匹配。

public ActionResult Edit(int? id) 
{ 
    if (id == null) 
    { 
     return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
    } 
    TheObject obj = db.TheObjects.Find(id); 
    if (user == null) 
    { 
     return HttpNotFound(); 
    } 
    Fill_StateDropDownList() 
    FillCities(obj.State);   
    return View(obj); 
} 
private void FillCities(int stateId) 
{ 
    ViewBag.CityList = db.Cities 
         .Where(g => g.StateId== stateId) 
         .Select(f => new SelectListItem() { 
                  Value = f.Id.ToString(), 
                  Text = f.Name }) 
         .ToList(); 
} 

進行調整的觀點

var cityList = new List<SelectListItem>(); 
if (ViewBag.CityList != null) 
{ 
    cityList =ViewBag.CityList as List<SelectListItem>; 
} 
@Html.DropDownListFor(u => u.City, cityList , "Choose City") 

另一種選擇是，就在頁面加載Ajax調用（文檔準備基於狀態下拉列表的值來獲得城市）。如果你有多個嵌套下拉列表，它會變得複雜（最後在回調地獄中）