c# - 如何以编程方式将 CSS 类添加到 ASP.NET CheckBoxlist html 表项

Question

如何以编程方式(即动态地)将 CSS 类添加到 ASP.NET CheckBoxlist html 表格元素。

例如，我希望下面输出的“table”、“tr”、“td”标签(从浏览器View Source查看)包含CSS样式。

<table id="CheckBoxList1" class="myCss1 myCss1row myCss1col myCss1table__checkbox--row">
<tr>
    <td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" >value="Item1" /><label for="CheckBoxList1_0">MyItem1</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" >value="Item2" /><label for="CheckBoxList1_1">MyItem2</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" >value="Item3" /><label for="CheckBoxList1_2">MyItem3</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" >value="Item4" /><label for="CheckBoxList1_3">MyItem4</label></td>
</tr>

-=========== 在浏览器中查看时的期望输出 View Source =================

<table id="CheckBoxList1" class="myCss1 myCss1row myCss1col myCss1table__checkbox--row">
<tr class="myCss1row">
<td class="myCss1col"><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="Item1" /><label for="CheckBoxList1_0">BitBucket</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="Item2" /><label for="CheckBoxList1_1">Confluence</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="Item3" /><label for="CheckBoxList1_2">FECRU</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" value="Item4" /><label for="CheckBoxList1_3">JIRA</label></td>
</tr>

--============================================= =========================

下面是代码片段:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="ToolName" DataValueField="ToolName" CssClass="myCss1 myCss1row myCss1col myCss1table__checkbox--row"">
</asp:CheckBoxList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT [ToolName], [ToolCost], [PDate], [ToolURL], [ToolLink], [ToolUrl] FROM [ToolInfo]"></asp:SqlDataSource>

提前感谢您的回复!

Answer 1

不，这是不可能的。 CheckBoxList 不会总是呈现表格，因此这被视为实现细节，并且对开发人员隐藏。除非你想变得非常 hacky 并创建一个从 CheckBoxList 继承的新控件。然后您将完全控制标记并可以添加您想要的任何类。

但是对于大多数用例来说，这绝对是一种矫枉过正。为什么不只使用 CSS 选择器将样式应用于您的行和单元格？

.myCss1table__checkbox--row tr {
    /* same stuff you would put in myCss1row */
}

.myCss1table__checkbox--row td {
    /* same stuff you would put in myCss1col */
}

或者，您可以使用 javascript 并在页面加载时分配这些类(下面使用的 jQuery):

$(function(){
    $(".myCss1table__checkbox--row tr").addClass("myCss1row");
    $(".myCss1table__checkbox--row td").addClass("myCss1col");
});