更改表 ASP.NET 中复选框列表的 css 样式答案

【问题标题】：Change the css styling of a checkboxlist in table ASP.NET更改表 ASP.NET 中复选框列表的 css 样式
【发布时间】：2023-03-20 22:25:01
【问题描述】：

我想将我在 asp.net 中的复选框的 css 样式更改为与 w3school https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox 上的样式相同的样式但是我不知道如何让它工作。

这是我的 ASP.NET 代码。

<asp:Table ID="checkListTable" runat="server" Width="100%" > 
    <asp:TableRow>
        <asp:TableCell>
            <asp:CheckBoxList ID="chklisttest" runat="server"  RepeatLayout="table" RepeatColumns="6" RepeatDirection="vertical"/></asp:TableCell>
    </asp:TableRow>
</asp:Table>

感谢您的帮助。

【问题讨论】：

标签： css asp.net

【解决方案1】：

您需要为此创建一个适配器。首先，将以下代码添加到您的项目中。

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

public class CheckBoxListAdapter : WebControlAdapter
{
    protected override void Render(HtmlTextWriter writer)
    {
        var targetControl = (CheckBoxList)Control;
        int itemCounter = 0;

        if (targetControl == null)
        {
            base.Render(writer);
            return;
        }

        writer.Indent++;
        foreach (ListItem item in targetControl.Items)
        {
            var inputId = targetControl.ClientID + "_" + itemCounter++;

            //label
            writer.AddAttribute("class", "container");
            writer.RenderBeginTag("label");
            writer.Write(item.Text);

            //input
            writer.AddAttribute("type", "checkbox");
            writer.AddAttribute("value", item.Value);
            writer.AddAttribute("name", targetControl.UniqueID + "$" + (itemCounter - 1));
            writer.AddAttribute("id", inputId);

            if (item.Selected)
            {
                writer.AddAttribute("checked", "checked");
            }
            if (!targetControl.Enabled || !item.Enabled)
            {
                writer.AddAttribute("disabled", "disabled");
            }

            writer.RenderBeginTag("input");
            writer.RenderEndTag();

            //span label
            writer.AddAttribute("class", "checkmark");
            writer.RenderBeginTag("span");
            writer.RenderEndTag();

            //end label
            writer.RenderEndTag();

            //horizontaal of verticaal
            if (targetControl.RepeatDirection == RepeatDirection.Vertical)
            {
                writer.Write("<br />");
            }

            //register item for postback
            Page.ClientScript.RegisterForEventValidation(targetControl.UniqueID, item.Value);
        }
        writer.Indent--;

        //register for postback
        Page.ClientScript.RegisterForEventValidation(targetControl.UniqueID);
    }
}

然后通过右键单击您将在“添加”>“添加 ASP.Net 文件夹”下找到的项目添加一个“ASP.Net 文件夹”。在那里添加一个“App_browser”文件夹。在该创建的文件夹中添加一个“BrowserFile.browser”文件。把下面的代码放在那里

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.CheckBoxList" adapterType="TestOmgeving.CheckBoxListAdapter" />
    </controlAdapters>
  </browser>
</browsers>

现在 CheckBox 将呈现为

<label class="container">This is the label
    <input type="checkbox" value="val" name="ctl00$mainContentPane$CheckBoxList1$1" id="mainContentPane_CheckBoxList1_1">
    <span class="checkmark"></span>
</label>

【讨论】：