将 Bootstrap 样式应用于 RadioButtonList

Posted 2023-03-06

【中文标题】将 Bootstrap 样式应用于 RadioButtonList

【英文标题】：Applying Bootstrap styles to RadioButtonList

【发布时间】：2021-03-15 23:59:05

【问题描述】：

我有一个 ASP.NET WebForms 应用程序，它有一个 RadioButtonList，我想将 Bootstrap 的 CSS 类应用到它。

使用 RepeatLayout="Flow" 和 RepeatDirection="Vertical" 设置，RadioButtonList 将呈现如下：

<span id="PageContentPlaceHolder_RadioButtonList1">
    <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="1" />
    <label for="PageContentPlaceHolder_RadioButtonList1_0">One</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="2" />
    <label for="PageContentPlaceHolder_RadioButtonList1_1">Two</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="3" />
    <label for="PageContentPlaceHolder_RadioButtonList1_2">Three</label>
</span>

我希望它像这样呈现（使用 Bootstrap 的 CSS 类）：

<span id="PageContentPlaceHolder_RadioButtonList1">
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="1" />
        <label for="PageContentPlaceHolder_RadioButtonList1_0" class="form-check-label">One</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="2" />
        <label for="PageContentPlaceHolder_RadioButtonList1_1" class="form-check-label">Two</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="3" />
        <label for="PageContentPlaceHolder_RadioButtonList1_2" class="form-check-label">Three</label>
    </div>
</span>

我意识到，如果我使用 Repeater 并将单个 RadioButton 和 Label 控件放在 ItemTemplate 中，我可以在其中应用 CssClass 值，这可能更容易做到。但是，我还需要附加一个RequiredFieldValidator 以确保用户做出选择。基本上这是一个选择题考试，我不能预先选择任何单选按钮项目。我没有太多运气让验证器使用它单独的单选按钮。如果我能提供客户端和服务器端验证代码，我想 CustomValidator 可能会起作用。

获得我想要的结果的最佳方法是什么？

【参考方案1】：

我喜欢使用单选按钮作为子页面菜单。它们非常好，因此背后的代码也非常好。

所以说我有这个：

我的样式表是这样的：

  body 
    

    .radionav input 
        width: 12px;
        margin-top: 0px;
    

    .radionav label 
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 25px;
    

    .radionav input[type="radio"]:checked + label 
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 20px;
        background: #253B82;
        color: white;
        border-spacing: 10px;
    

    .radionav:after 
        content: '';
        display: inline-block;
        width: 20px;
    

上面的收音机标记变成了这样：

        <div style="float:left;padding-right:10px">
            <asp:RadioButtonList ID="ShowProjects" runat="server" RepeatLayout="Flow"
                AutoPostBack="True" RepeatDirection="Horizontal"  >
                <asp:ListItem Class="radionav" Selected="True">Live Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >All Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >My Proofs</asp:ListItem>
                <asp:ListItem Class="radionav"> Create (start) a new Project </asp:ListItem>
            </asp:RadioButtonList>
        </div>

现在我们得到了这个：

您当然可以调整 css - 也许将按钮加长一点，或者说窄一些。我不得不真正切碎 css，但现在我只需放入一个单选按钮列表，对其进行样式设置，然后我就有一个很好的事件代码可以使用。

所以，我的代码可能是：

   Select Case ShowProjects.SelectedIndex
        Case 0
             strWhere = "(Void = 0)"   ' show live projects
             Call LoadGrid(strWhere)
        Case 1
            strWhere = ""              ' show all projects
            Call LoadGrid(strWhere)
        Case 2
            ' show proofs
        Case 3
            ' create a project
    End Select