根据另一个下拉列表的选定值更新下拉列表？ [复制]

Question

我有两个 DropDownList。一个是给GymLocation，另一个是给那个健身房的RoomNumbers。我想让用户首先从GymLocationDropDownList 中进行选择，然后我想在RoomNumbersDropDownList 中有相应的房间号。因此，RoomNumbersDropDownList 将根据所选位置进行更新（将从数据库中查询数据）。我不知道该怎么做。

这是 BranchViewModel：

public class BranchViewModel
{
    public IEnumerable<Branch> Branch { get; set; }

    public IEnumerable<Room> Rooms { get; set; }
}

这是控制器。 注意：我已经硬编码了一条记录。

 public ActionResult Index()
 {
     var item = GetBranches(3);
     return View(item);
  }

在这里，我得到了一个特定的分行和该分行的所有房间号。

 public BranchViewModel GetBranches(int id)
 {
    var branch = _context.Branches.Where(b => b.Id == id).ToList();
    var rooms = _context.Rooms.Where(b => b.BranchId == id).ToList();

    var List = new BranchViewModel
    {
       Branch = branch,
       Rooms = rooms
     };

     return List;
 }

这是视图：

@model YogaFitnessClub.ViewModels.BranchViewModel

<div class="form-group col-lg-4">
    @Html.LabelFor(m => m.Branch)
    @Html.DropDownListFor(m => m.Branch, new SelectList(Model.Branch, "Id", "LocationName"), "Select From below Room Names", new { @class = "form-control" })
</div>


<div class="form-group col-lg-4">
    @Html.LabelFor(m => m.Branch, "Room Numbers")
    @Html.DropDownListFor(m => m.Rooms, new SelectList(Model.Rooms, "Id", "RoomNumber"), "Select From below Room Numbers", new {  @class = "form-control" })
</div>

谢谢

Answer 1

我遇到了类似的问题，我必须根据选定的州将城市加载到DropDownList。我通过使用 WebApi 和 AJAX 解决了它。

首先创建一个接收branchId 参数的操作，然后使用 LINQ 检索与您的branchId 匹配的所有健身房。

它应该看起来有点像这样：

WepApi 控制器代码（用于房间）：

    [Route("api/roomsByBranch/{branchId}")]
    public List<Room> GetRoomsByGymLocation(int branchId)
        {
            var roomsByGymLocation = _context.Rooms.Where(room => room.BranchId == branchId).ToList();

            return roomsByGymLocation;
        }

WepApi 控制器代码（用于分支）：

    [Route("api/branches")]
    public List<Branch> GetBranches()
        {
            var branches = _context.Branches.ToList();

            return branches;
        }

在这里您可以给下拉列表一个空列表，因为您将使用 AJAX 来填充列表。

查看代码（剃刀）：

    <div class="form-group">
        @Html.DropDownListFor(b => b.Branch.Id, new SelectList(new List<string>(), "Id", "Name"), new { @class = "form-control", id="branchesDropDown" })
    </div>
    <div class="form-group">
        @Html.DropDownListFor(r => r.Room.Id, new SelectList(new List<string>(), "Id", "Name"), new { @class = "form-control", id="roomsDropDown" })
    </div>

现在您需要使用 jQuery AJAX 将DropDownList 填充为健身房。

查看代码（脚本）：

@section scripts
{    
$(document).ready(function () {
            var branchesDropDown = $("#branchesDropDown ");
            var roomsDropDown= $("#roomsDropDown");

            branchesDropDown.ready(function () {

                    $.ajax({
                        url: "/api/branches",
                        dataType: "json",
                        success: function (data) {
                            $.each(data, function () {
                                branchesDropDown.append("<option value='" + this.Id + "'>" + this.Name + "</option>")
                            });
                        }
                    }).done(function () {
                        $.ajax({
                            url: "/api/roomsByBranch/" + @Model.Branch.Id,
                            dataType: "json",
                            success: function (data) {
                                $.each(data, function () {                                    
                                    roomsDropDown.append("<option value='" + this.Id + "'>" + this.Name + "</option>");
                                    });
                                }
                            });
                        });

            branchesDropDown.on("change", function () {
                $.ajax({
                    url: "/api/roomsByBranch/" + branchesDropDown.val(),
                    dataType: "json",
                    success: function (data) {
                        roomsDropDown.empty();
                        $.each(data, function () {
                            roomsDropDown.append("<option value='" + this.Id + "'>" + this.Name + "</option>");
                        });
                    }
                });
            });
}