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作为输入并输出传递地址列表
将部分视图加载到您的选择

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

PartialView .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代码变得混乱并被认为是不好的做法，所以为了本指南的目的，我将调用第一个下拉列表： < / p>

ddlcity

现在，在ddlcity的onchange函数中：

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

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

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

从另一个DropDownList填充DropDownList

1 个答案: