Question

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

这是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来填充列表。

查看代码（Razor）：

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

根据另一个DropDownList的选定值更新DropDownList？

1 个答案: