使用第一個選項中的選項填充第二個DropDownList

-3

該任務非常基礎：我必須創建2個下拉列表，第一個用於汽車品牌，第二個用於其模型，例如「歐寶」 - >「阿斯特拉」。第二個下拉列表應該根據第一個下拉列表中選擇的選項填充。我想提供ViewModel到我的視圖，而不是ViewBag。使用第一個選項中的選項填充第二個DropDownList

我搜索了各種類似的主題，借用了一些代碼，仍然無法使其工作。

型號：

public class CarBrand 
{ 
    public byte Id { get; set; } 
    [Display(Name = "Car Brand Name")] 
    public string Name { get; set; } 
} 
public class CarModel 
{ 
    public byte Id { get; set; } 
    [Display(Name = "Car Model Name")] 
    public string Name { get; set; } 
    public byte CarBrandId { get; set; } 
}

視圖模型：

public class CarsViewModel 
{ 
    public IEnumerable<CarBrand> BrandList { get; set; } 
    public CarBrand CarBrands { get; set; } 
    public IEnumerable<CarModel> ModelList { get; set; } 
    public CarModel CarModels { get; set; } 
}

控制器

public ActionResult Index() 
    { 
     var carBrands = GetCarBrands(); 
     var carModels = GetCarModelsOpel(); 
     var viewModel = new CarsViewModel 
     { 
      BrandList = carBrands, 
      ModelList = carModels 
     }; 

     return View(viewModel); 
    } 

    public JsonResult FetchModels(int brandId) 
    { 
     var carBrands = GetCarBrands(); 
     IEnumerable<CarModel> models = new List<CarModel>(); 
     switch (brandId) 
     { 
      case 1: 
       models = GetCarModelsOpel(); 
       break; 
      case 2: 
       models = GetCarModelsVolksWagen(); 
       break; 
      case 3: 
       models = GetCarModelsBmw(); 
       break; 
     } 
     var viewModel = new CarsViewModel() 
     { 
      BrandList = carBrands, 
      ModelList = models 
     }; 
     return Json(viewModel, JsonRequestBehavior.AllowGet); 
    }

查看

@model CU.ViewModels.CarsViewModel 
@using (Html.BeginForm("AddCar", "Cars")) 
{ 
    <div class="form-group"> 
     @Html.LabelFor(m => m.CarBrands.Name) 
     @Html.DropDownListFor(m => m.CarBrands.Id, 
      new SelectList(Model.BrandList, "Id", "Name"), "Select Car Brand", 
      new {id = "brand_dll", @class = "form-control"}) 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.CarModels.Name) 
     @Html.DropDownListFor(m => m.CarModels.Id, 
      new SelectList(Model.ModelList, "Id", "Name"), "Select Car Model", 
      new {id = "model_dll", @class = "form-control"}) 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
} 
@section scripts 
{ 
    <script> 
     var url = '@Url.Action("FetchModels", "Cars")'; 
     var models = $('#models_dll'); 
     $("#brand_dll").change(function() { 
      var id = $(this).val(); 
      $.getJSON(url, 
       { brandId: id }, 
       function(response) { 
        models.empty(); 
        $.each(response, 
         function(index, item) { 
          models.append($('</option>').text(item)); 
         }); 
       }); 
     }); 
    </script> 

}

我沒有得到任何錯誤或異常，但第二個下拉列表保持它從索引操作方法沒有收到什麼是第一次一個選擇的問題的資料。

我還在學習。任何幫助，將不勝感激。謝謝。

來源

2016-11-30 sneuly

我認爲問題是添加選項，'models.append（$（ '

好吧，我認爲它會殺死加載所有品牌的所有數據，我建議你在用戶做出選擇時使用Ajax來發送請求。 – Sid

你甚至碰到'FetchModels（）'方法。這就是返回'CarsViewModel'，所以'$ .each（response ,,,'什麼都不會做 - 你返回一個單一的對象，而不是一個數組（爲什麼世界上你要返回'CarsViewModel' - 無論如何 - 你想要的只是'Name'的列表） –

我認爲你的問題是由於你只追加一個閉幕選項標籤而不是使用。

另一種方式來做到這一點，我發現它更容易是從你的控制器動作返回所有的選項作爲一個字符串，並將其追加到選擇HTML，見下圖：

//POST: Quote/SubGroupByGroup 
    [HttpPost] 
    public ActionResult SubGroupByGroup(int _EquipmentGroupID) 
    { 
     string Options = ""; 
     DAL.GetEquipmentSubGroupsDropdown(_EquipmentGroupID).ForEach(delegate (EquipmentSubGroup SG) 
     { 
      Options += "<option value='" + SG.EquipmentGroupID + "'>" + SG.Code + "</option>"; 
     }); 

     return Content(Options); 

    }

和JQuery的方法

$('#Equipment_EquipmentGroupID').change(function() { 
     $.ajax({ 
      url: '@Url.Action("SubGroupByGroup", "Quote")', 
      type: 'POST', 
      data: { _EquipmentGroupID: $(this).val() }, 
      datatype: 'json', 
      success: function (data) { 
       $('#Equipment_EquipmentSubGroupID').html(data); 
      } 
     }); 
    })

我希望這給你一些指導

來源

2016-11-30 13:48:04 ThatChris

謝謝！你能否也請在你的回答之前在評論中回答我的問題給Stephan Muecke？ – sneuly

使用第一個選項中的選項填充第二個DropDownList

回答

相關問題