代码之家 › 专栏 › 技术社区 › Big Smile

是否根据另一个DropDownList的选定值更新DropDownList?[副本]

asp.net-mvc-5 entity-framework html c#

Big Smile · 技术社区 · 8 年前

我有两个下拉列表。一个是 GymLocation 另一个是 RoomNumbers 在那个健身房里。我想允许用户首先选择 健身房 DropDownList,然后我想在 房间号 下拉列表。因此 房间号 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>

非常感谢。

1 回复 | 直到 8 年前

BoÅ¡ko Bezik 8 年前

我也遇到过类似的问题,我不得不将城市加载到 DropDownList 基于选定的状态。我通过使用WebApi和AJAX解决了这个问题。

首先创建一个接收 branchId 参数,然后使用LINQ检索与 布兰奇德 .

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

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 填充 下拉框 有健身房。

查看代码(脚本):

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