Question

下面的这组代码显示了如图所示的2级选择列表

@for (int i = 0; i < Model.AccessRequest.RoomCheckBoxes.Count; i++)
                    {
                        <li>
                            @Html.CheckBoxFor(m => m.AccessRequest.RoomCheckBoxes[i].IsCheck, new { @class = "parent" })
                            @Html.LabelFor(m => m.AccessRequest.RoomCheckBoxes[i].IsCheck, Model.AccessRequest.RoomCheckBoxes[i].SiteName + " - " + Model.AccessRequest.RoomCheckBoxes[i].RoomName)
                            @Html.HiddenFor(m => m.AccessRequest.RoomCheckBoxes[i].RoomId)
                            @Html.HiddenFor(m => m.AccessRequest.RoomCheckBoxes[i].RoomName)
                            @Html.HiddenFor(m => m.AccessRequest.RoomCheckBoxes[i].SiteName)
                            <div class="racksfor" style="margin-left:20px;">
                                <ul class="suiterecord">
                                    @for (int j = 0; j < Model.AccessRequest.RoomCheckBoxes[i].Racks.Count; j++)
                                    {
                                        <li style="float:left;">
                                            @Html.CheckBoxFor(m => m.AccessRequest.RoomCheckBoxes[i].Racks[j].IsCheck, new { @class = "child chkboxCss" })
                                            <div class="ARSLabel">
                                                @Html.LabelFor(m => m.AccessRequest.RoomCheckBoxes[i].Racks[j].IsCheck, Model.AccessRequest.RoomCheckBoxes[i].Racks[j].RackName + " " + Model.AccessRequest.RoomCheckBoxes[i].Racks[j].Alias)
                                                @*@Model.AccessRequest.RoomCheckBoxes[i].Racks[j].Alias*@
                                                @Html.HiddenFor(m => m.AccessRequest.RoomCheckBoxes[i].Racks[j].RackName)
                                            </div>
                                        </li>
                                        if ((j + 1) % 5 == 0)
                                        {
                                        @:</ul><div style='clear:both'></div><br><ul class='suiterecord'>
                                        }
                                    }
                                </ul>
                            </div>
                            <div style='clear:both'></div><br>
                        </li>
                    }

如何更改它以将其填充为2下拉列表，以便下拉列表1 = CO3-套件80和下拉列表2将显示与所选套件相关的机架？

此控制器将房间列表返回到前端

private List<RoomWithCheckBox> populateRooms(IEnumerable<int> selectedRoomIds, Int32? companyID = null)
    {
        if (selectedRoomIds == null)
            selectedRoomIds = new List<int>();

        var currentSession = Helpers.GetCurrentSession(User.Identity);
        var roomsResponse = repository.Rooms.GetAll(companyId: (companyID ?? currentSession.CompanyId));
        if (roomsResponse.Status == ReturnStatus.SessionInvalid)
        {
            throw new InvalidSessionException();
        }
        if (roomsResponse.Status == ReturnStatus.Success)
        {
            //return roomsResponse.Result.Select(x => new SuperAdminRoom
            //{
            //    RoomName = x.Name,
            //    RoomId = x.Id,
            //    IsCheck = selectedRoomIds.Contains(x.Id)
            //}).ToList();

            var Sar = new List<RoomWithCheckBox>();
            var Roomz = roomsResponse.Result.ToList();
            for (int i = 0; i < Roomz.Count(); i++)
            {
                var rmz = Roomz[i];
                var Suite = new RoomWithCheckBox()
                {
                    RoomId = rmz.Id,
                    RoomName = rmz.Name,
                    IsCheck = selectedRoomIds.Contains(rmz.Id),
                    Racks = new List<RackWithCheckBox>()
                };
                if (rmz.Floor != null && rmz.Floor.Site != null)
                    Suite.SiteName = rmz.Floor.Site.Name;

                Sar.Add(Suite);
                foreach (var rackz in rmz.Racks)
                {
                    var CompanyRacks = new RackWithCheckBox()
                    {
                        RackName = rackz.ServiceId,
                        RackId = rackz.Id,
                        Alias = rackz.Alias,
                    };
                    Suite.Racks.Add(CompanyRacks);
                }
            }

            return Sar;
        }
        else if (roomsResponse.Status == ReturnStatus.NoRecords)
        {
            return new List<RoomWithCheckBox>();
        }
        else
        {
            throw new Exception(roomsResponse.Error);
        }
    }

Answer 1

假设您的意图是创建级联下拉列表并设置绑定到2个属性的2个DropDownListFor作为第一步：

@Html.DropDownListFor(m => m.AccessRequest.SelectedRoom, new SelectList(Model.Rooms, "RoomId", "RoomName"), "Select a Room", new { @class = "form-control" })

@Html.DropDownListFor(m => m.AccessRequest.SelectedRack, new { @class = "form-control" })

然后处理第一个下拉列表的onchange事件，以将相关值插入第二个下拉列表：

$('#SelectedRoom').change(function () {
    var url = '@Url.Action("GetRacks", "ControllerName")';
    $.getJSON(url, { id: $(this).val() }, function (result) {
        if (!result) {
            return;
        }

        $('#SelectedRack').append($('<option></option>').val('').text('Select Rack'));
        $.each(result, function(idx, item) {
            $('#SelectedRack').append($('<option></option>').val(item.Value).text(item.Text));
        });
    }
});

最后，创建一个控制器操作，该操作将返回JsonResult并传递具有第一个下拉列表中提供的房间ID的相关机架项目：

[HttpGet]
public JsonResult GetRacks(int id) 
{
    // other stuff related to create list of racks here

    // assume 'ListOfRacks' has type of 'List<Rack>' which contains entire rack information
    var racks = ListOfRacks.Where(x => x.RackId == id)
                           .Select(x => new { Value = x.RackId, Text = x.RackName + " " + x.Alias });

    return Json(racks, JsonRequestBehavior.AllowGet);
}

请注意，不必为@Html.HiddenFor的每个属性（即Room和RoomName）使用多个SiteName帮手，因为您只需通过查询来自表单提交后的RoomId值。

附加说明：

要将两个属性值组合为单个文本，可以使用相同的技术来串联RackName和Alias的属性值，如下所示：

// assume 'Rooms' hold collection of all available rooms
model.RoomsList = new SelectList((from room in Rooms
                                  select new {
                                      RoomId = room.RoomId,
                                      RoomName = room.SiteName + " - " + room.RoomName 
                                  }),
                                  "RoomId",
                                  "RoomName",
                                  null);

然后将上面的SelectList实例传递到第一个下拉列表中：

@Html.DropDownListFor(m => m.AccessRequest.SelectedRoom, Model.RoomsList, "Select a Room", new { @class = "form-control" })

填充到下拉列表

1 个答案: