从另一个DropDownList填充DropDownList

我有两个相关的模型。

public partial class bs_delivery_type { public decimal delivery_id { get; set; } public decimal delivery_city_id { get; set; } public string delivery_address { get; set; } public virtual bs_cities bs_cities { get; set; } } 

第二个：

 public partial class bs_cities { public bs_cities() { this.bs_delivery_type = new HashSet(); } public decimal cities_id { get; set; } public string cities_name { get; set; } public virtual ICollection bs_delivery_type { get; set; } } 

我有这样的ViewBag用于下拉列表：

 ViewBag.city = new SelectList(_db.bs_cities, "cities_id", "cities_id"); ViewBag.delivery_adress = new SelectList(_db.bs_cities, "delivery_id", "delivery_address"); 

当我在第一个下拉列表中选择city时，在第二个下拉列表中必须出现带有delivery_adress绑定列表，其中delivery_city_id = cities_id （来自第一个下拉列表）。

怎么做？

编辑：我尝试了@ Izzy评论的方法，所以这是我的实际观点：

 @model Bike_Store.Models.DeliveryModel @{ ViewBag.Title = "Checkout"; }     function GetDelivery(_stateId) { var procemessage = " Please wait..."; $("#ddldelivery").html(procemessage).show(); var url = "/Shop/GetDeliveryByCityId/"; $.ajax({ url: url, data: { cities_id: _stateId }, cache: false, type: "POST", success: function (data) { var markup = "Select adress"; for (var x = 0; x < data.length; x++) { markup += "" + data[x].Text + ""; } $("#ddldelivery").html(markup).show(); }, error: function (reponse) { alert("error : " + reponse); } }); }  
Checkout
 @using (Html.BeginForm()) { @Html.DropDownListFor(m=>m.CitiesModel, new SelectList(Model.CitiesModel, "cities_id", "cities_name"), new {@id = "ddldelivery", @style="width:200px", @onchange="javascript:GetDelivery(this.value);"}) 
 
   

 

}

我的控制器现在看起来像这样：

 public List GetAllCities() { List cities = new List(); foreach (var city in _db.bs_cities) { cities.Add(city); } return cities; } public List GetAllDeliveries() { List deliveries = new List(); foreach (var delivery in _db.bs_delivery_type) { deliveries.Add(delivery); } return deliveries; } [HttpPost] public ActionResult GetDeliveryByCityId(decimal cities_id) { List delivery = new List(); delivery = GetAllDeliveries().Where(m => m.delivery_city_id == cities_id).ToList(); SelectList objDelivery = new SelectList(delivery, "delivery_id", "delivery_address", 0); return Json(objDelivery); } public ViewResult Checkout() { DeliveryModel deliveryModel = new DeliveryModel(); deliveryModel.CitiesModel = new List(); deliveryModel.CitiesModel = GetAllCities(); return View(deliveryModel); } 

现在的问题是我有2个ddls，但只有第一个工作。 在scrshot中你可以看到我有一个城市列表，当我选择一个城市时，在同一个ddl中出现一个传递地址列表，当我选择地址时 – 它会消失。 多么神奇？ 请用Ajax帮助我。 城市列表

我猜我修好了，问题在于：

 @Html.DropDownListFor(m=>m.CitiesModel, new SelectList(Model.CitiesModel, "cities_id", "cities_name"), new {@id = "ddldelivery", @style="width:200px", @onchange="javascript:GetDelivery(this.value);"}) 

我将@id = "ddldelivery"更改为@id = "ddlcity" ，现在可以正常工作了

Answer 1

以下指南将告诉您：

• 创建局部视图
• 将cityid作为输入并输出传递地址列表
• 将部分视图加载到您的选择中

注意：在这种情况下，部分视图解决方案可能过度，但对于类似的问题，它实际上非常有用。

PartialView .cshtml

文件名：_deliveryTypePartial.cshtml

 @model List @foreach(var item in Model) {  @item.delivery_address  } 

部分视图的控制器代码：

 public IActionResult _deliveryTypePartial(decimal city_id) { List model = context.bs_delivery_types.Where(row => row.delivery_city_id == delivery_city_id).ToList(); return PartialView(model); } 

最后，为你的AJAX

我注意到你的两个下拉列表具有完全相同的ID会使你的javascript代码变得粗糙并且被认为是不好的做法，所以为了本指南的目的，我将调用第一个下拉列表：

ddlcity

现在，在ddlcity的onchange函数ddlcity ：

 $('#ddldelivery').load("/ControllerName/_deliveryTypePartial?city_id=" _stateId); 

这应该将局部视图加载到第二个下拉列表中。

PS ：当我完成这个问题时你已经使用了直接ajax方法，我同意这两种方法在这种情况下同样适用。 如果您需要填充的实际对象要复杂得多，您可以使用此处概述的方法。