使用第一个选项中的选项填充第二个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

回答

相关问题