时间戳

首页 > 解决方案 > 模态中的动态复选框

asp.net - 模态中的动态复选框

问题描述

我正在引导模式中创建一个复选框，但根据用户，项目的数量可能是 2、3、4... 或 20。无论如何，我可以创建该数量的项目，但是当我在模式上填充它时，项目超出了该区域：

在此处输入图像描述

这是我模式中的代码：

<%--ModalPopup Editar Usuario Externo--%>
<asp:LinkButton ID="lnkFakeUsrX_UsrXEdit" runat="server"></asp:LinkButton>
<asp:Panel ID="pnlUrXt_UsrXt" runat="server" CssClass="modalPopup" Style="display: none;">
    <div style="overflow-y: auto; overflow-x: hidden; max-height: 750px; max-width: 1100px">
        <div class="modal-header">
            <b>
                <asp:Label ID="lblhfUsrXt_UsrXDet" runat="server" CssClass="modal-title"></asp:Label></b>
        </div>
    </div>
    <div class="modal-body">
        <div class="form-row">
            <div class="form-group col-4">
                <label for="txtUsrXt_idUsr">Id Usuario</label>
                <asp:TextBox ID="txtUsrXt_idUsr" runat="server" Enabled="false" CssClass="form-control inputfield text-uppercase"></asp:TextBox>
            </div>
            <div class="form-group col-4">
                <label for="txtUsrXt_cliCod">Cliente Codigo</label>
                <asp:TextBox ID="txtUsrXt_cliCod" runat="server" Enabled="false" CssClass="form-control inputfield text-uppercase"></asp:TextBox>
            </div>
            <div class="form-group col-4">
                <label for="txtUsrXt_email">Email</label>
                <asp:TextBox ID="txtUsrXt_email" runat="server" CssClass="form-control inputfield"></asp:TextBox>
                <asp:RegularExpressionValidator ID="revUsrXt_Email" ControlToValidate="txtUsrXt_email" CssClass="text-danger" runat="server" ErrorMessage="Email Invalido" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Font-Size="XX-Small"></asp:RegularExpressionValidator>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-4">
                <label for="ddlUsrXt_estado">Estado Usuario</label>
                <asp:DropDownList ID="ddlUsrXt_estado" runat="server" class="chzn-select" Style="width: 200px;"
                    AutoPostBack="true" OnSelectedIndexChanged="ddlUsrXt_estado_SelectedIndexChanged">
                </asp:DropDownList>
            </div>
            <div class="form-group col-4">
                <label for="txtUsrXt_passwd">Password</label>
                <asp:TextBox ID="txtUsrXt_passwd" runat="server" CssClass="form-control inputfield" TextMode="Password"></asp:TextBox>

            </div>
            <div class="form-group col-4">
                <label for="txtUsrXt_ConfPass">Confirmar Password</label>
                <asp:TextBox ID="txtUsrXt_ConfPass" runat="server" CssClass="form-control inputfield" TextMode="Password"></asp:TextBox>
            </div>
        </div>

        <div class="jumbotron jumbotron-fluid">

            <h6 class="display-5">Departamento</h6>
            <div class="container">
                <asp:CheckBoxList ID="chkUsrX_Depart" runat="server" class="form-check-input" Font-Size="Smaller"></asp:CheckBoxList>
            </div>

        </div>
                
        



    </div>


    <div align="center" class="modal-footer">
        <div class="row">
            <div class="col-md-12">
                <asp:HiddenField ID="hfUsrXt_UsrxDet" runat="server" Value="0" />
                <asp:Button ID="btnSave_UsrXt" runat="server" Text="Guardar" class="btn btn-success"
                    ValidationGroup="EditUsrXt" UseSubmitBehavior="false" data-dismiss="alert"
                    OnClick="Usuario_Externo_Modificar"></asp:Button>
                <button id="btnUsrXt_Cancel" runat="server" class="btn btn-primary">
                    Cerrar
                </button>
            </div>
        </div>
    </div>

</asp:Panel>

<uc:ModalPopupExtender ID="mpeUsrXt_UsrDet" runat="server" PopupControlID="pnlUrXt_UsrXt"
    TargetControlID="lnkFakeUsrX_UsrXEdit" BehaviorID="mpeUsrXt_UsrDet"
    CancelControlID="btnUsrXt_Cancel" BackgroundCssClass="modalBackground">
</uc:ModalPopupExtender>

还有我的cs：

try
        {
            foreach (ClienteDpto item in 
            cliDpN.Clientes_Dptos_Consultar(txtUsrXt_cliCod.Text.ToString()))
            {
                ListItem Depitems = new ListItem();
                Depitems.Text = Convert.ToString(item.Departamento);
                Depitems.Value = Convert.ToString(item.IdDpto);
                chkUsrX_Depart.Items.Add(Depitems);
            }
        }
        catch (System.FormatException sfex)
        {
            System.Diagnostics.Debug.WriteLine("Error SP Clientes_Dptos_Consultar", "error => " + sfex.ToString());
        }

其中：cliDpN.Clientes_Dptos_Consultar(txtUsrXt_cliCod.Text.ToString()) 为我提供了我的数据库中的用户部门列表。ClienteDpto 是部门类。

如何在我的模式上调整该动态列表？

请我希望有人能帮助我。

此致。

标签： asp.netbootstrap-4

解决方案

我看到你没有使用Bootstrap Modal来模拟你的弹出窗口。

你可以像下面这样构建你的布局并试一试：

<asp:Panel ID="pnlUrXt_UsrXt" runat="server" CssClass="modal">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group col-4">...</div>
                    <div class="form-group col-4">...</div>
                    <div class="form-group col-4">...</div>
                </div>
                <div class="form-row">
                    <div class="form-group col-4">...</div>
                    <div class="form-group col-4">...</div>
                    <div class="form-group col-4">...</div>
                </div>
                <div class="jumbotron jumbotron-fluid">
                    <h6 class="display-5">Departamento</h6>
                    <asp:CheckBoxList />
                </div>
            </div>
            <div align="center" class="modal-footer">
                <asp:HiddenField />
                <asp:Button />
                <button />
            </div>
        </div>
    </div>
</asp:Panel>

.modal-dialog-scrollable添加.modal-dialog应该可以解决滚动问题。

推荐阅读