从另一个 DropDownList 填充 DropDownList

Question

我有两个相关的模型。

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 用于下拉列表：

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";
}
<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 />

}

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

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。 城市列表

我想我已经解决了，问题出在：

@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为输入输出收货地址列表
• 将部分视图加载到您的选择中

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

部分视图.cshtml

文件名：_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

现在，在 ddlcity 的 onchange 函数中：

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

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

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