从另一个DropDownList填充DropDownList [英] Populate DropDownList from another 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<bs_delivery_type>();
}
public decimal cities_id { get; set; }
public string cities_name { get; set; }
public virtual ICollection<bs_delivery_type> bs_delivery_type { get; set; }
}
我有这样的ViewBag用于下拉列表：
and I have such ViewBag's for dropdownlist's:
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 （来自第一个下拉列表）。
When I choose city in first dropdownlist, in the second one there has to be appeared binded list with delivery_adress, where delivery_city_id = cities_id(from first dropdownlist).
怎么做？
编辑：
我尝试了来自@ Izzy评论的方法，所以这是我的实际观点：
I tryed method from @Izzy's comment, so here is my actual view:
@model Bike_Store.Models.DeliveryModel
@{
ViewBag.Title = "Checkout";
}
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function GetDelivery(_stateId) {
var procemessage = "<option value='0'> Please wait...</option>";
$("#ddldelivery").html(procemessage).show();
var url = "/Shop/GetDeliveryByCityId/";
$.ajax({
url: url,
data: { cities_id: _stateId },
cache: false,
type: "POST",
success: function (data) {
var markup = "<option value='0'>Select adress</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#ddldelivery").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
</script>
<h2>Checkout</h2>
@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);"})
<br />
<br />
<select id="ddldelivery" name="ddldelivery" style="width:200px">
</select>
<br /><br />
}
我的控制器现在看起来像这个：
My controller now looks like this:
public List<bs_cities> GetAllCities()
{
List<bs_cities> cities = new List<bs_cities>();
foreach (var city in _db.bs_cities)
{
cities.Add(city);
}
return cities;
}
public List<bs_delivery_type> GetAllDeliveries()
{
List<bs_delivery_type> deliveries = new List<bs_delivery_type>();
foreach (var delivery in _db.bs_delivery_type)
{
deliveries.Add(delivery);
}
return deliveries;
}
[HttpPost]
public ActionResult GetDeliveryByCityId(decimal cities_id)
{
List<bs_delivery_type> delivery = new List<bs_delivery_type>();
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<bs_cities>();
deliveryModel.CitiesModel = GetAllCities();
return View(deliveryModel);
}
现在的问题是我有2个ddls，但只能在第一个工作。
在scrshot中你可以看到我有一个城市列表，当我选择一个城市时，在这个ddl中出现了一个交付地址列表，当我选择地址时 - 它会消失。多么神奇？请用Ajax帮助我。
城市列表
The problem now is that i have 2 ddls, but works only first one. In scrshot you can see I have a list of cities, when I choose a city, in this same ddl appears a list of delivery adresses, and when I choose adress - its desappears. What a magic? Help me please with Ajax. List of cities
我猜我修好了，问题在于：
I guesse i fixed it, the problem was in:
@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现在可以使用
推荐答案
以下指南将向您展示：
- 创建局部视图
- 将cityid作为输入并输出交付地址列表
- 将部分视图加载到您的选择
注意：在这种情况下，部分视图解决方案可能过度杀伤，但对于类似的问题，它实际上非常有用。
PartialView .cshtml
文件名：_deliveryTypePartial.cshtml
Filename: _deliveryTypePartial.cshtml
@model List<bs_delivery_type>
@foreach(var item in Model)
{
<option value="@item.delivery_id">
@item.delivery_address
</option>
}
部分视图的控制器代码：
public IActionResult _deliveryTypePartial(decimal city_id)
{
List<bs_delivery_type> model = context.bs_delivery_types.Where(row => row.delivery_city_id == delivery_city_id).ToList();
return PartialView(model);
}
然后最后，为你的AJAX
我注意到你的两个下拉列表中有相同的ID会使你的javascript代码变得粗糙并且被认为是不好的做法，所以为了本指南的目的，我将调用第一个下拉列表：
ddlcity
现在，在你的onchange函数中 ddlcity ：
Now, inside your onchange function for ddlcity:
$('#ddldelivery').load("/ControllerName/_deliveryTypePartial?city_id=" _stateId);
这应该将部分视图加载到第二个下拉列表中。
This should load the partial view into your second dropdown list.
PS ：当我完成这个问题时你已经使用了直接ajax方法，我同意这两种方法在这种情况下同样适用。如果你需要填充的实际对象要复杂得多，你可以使用这里列出的方法。
PS: As I completed this question you had already used the direct ajax method, I agree that both methods are equally suitable in this case. You can perhaps use the method outlined here if the actual objects you need to populate are a lot more complex.
这篇关于从另一个DropDownList填充DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
