在表ASP.NET中更改复选框列表的CSS样式 [英] Change the css styling of a checkboxlist in table ASP.NET
问题描述
我想将asp.net中复选框的css样式更改为与w3school上的样式相同 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox 但是我不知道如何使它工作。
I would like to change the css styling of my checkbox in asp.net to the same styling has the one on w3school https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox However i do not know how to get it to work.
这是我的ASP.NET代码。
Here is my ASP.NET code.
<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>
谢谢您的帮助。
推荐答案
您需要为此创建一个适配器。首先,将以下代码添加到项目中的某个位置。
You need to create an Adapter for this. First, add the following code to your project somewhere.
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文件。在其中放入以下代码
Then add a "ASP.Net folder" by right clicking on your project you will find under "Add" > "Add ASP.Net folder". There add a "App_browser" folder. In that created folder add a "BrowserFile.browser" file. Put the following code in there
<browsers>
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.CheckBoxList" adapterType="TestOmgeving.CheckBoxListAdapter" />
</controlAdapters>
</browser>
</browsers>
现在,复选框将呈现为
<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>
这篇关于在表ASP.NET中更改复选框列表的CSS样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!