html单选框样式复写,Asp.net自定义控件之单选、多选控件

我不是女神ヾ 2022-10-06 04:00 255阅读 0赞

本文实例为大家分享了Asp.net单选、复选框控件的具体实现代码，供大家参考，具体内容如下

将常用的jquery插件封装成控件也是个不错的选择。

先看看效果：

![85096343adce6c4cbc7895e6027db032.png][]

1.新建类库项目，创建数据源类

\[Serializable\]

public class Select2Item

public bool Selected \{ get; set; \}

public string Text \{ get; set; \}

public string Value \{ get; set; \}

public Select2Item() \{ \}

public Select2Item(string text, string value)

this.Text = text;

this.Value = value;

public Select2Item(string text, string value, bool selected)

this.Text = text;

this.Value = value;

this.Selected = selected;

2.创建控件类CheckList，继承与WebControl，并定义 public List Items数据项属性。

3.引入脚本文件及样式文件

a.创建脚本或样式文件，设置文件的属性-生成操作-嵌入的资源

![35708820ab53edc975fc82803aa9d983.png][]

b.需要在namespace上添加标记 \[assembly: WebResource("命名空间.文件夹名.文件名", "mime类型")\]

如：

\[assembly: WebResource("Control.Style.checklist.css", "text/css",PerformSubstitution = true)\]

\[assembly: WebResource("Control.Scripts.checklist.js", "application/x-javascript")\]

如果css文件里面存在图片的话，同样将图片设置为嵌入的资源，在css中的写法为

PerformSubstitution 表示嵌入式资源的处理过程中是否分析其他Web 资源 URL，并用到该资源的完整路径替换。c.重写protected override void OnPreRender(EventArgs e)，引入嵌入的脚本或样式文件

if(Page!=null) Page.Header.Controls.Add(LiteralControl),将

protected override void OnPreRender(EventArgs e)

if (this.Page != null)

StringBuilder sbb = new StringBuilder();

sbb.Append(string.Format(STYLE\_TEMPLATE, Page.ClientScript.GetWebResourceUrl(this.GetType(), "HandControl.Style.checklist.css")));

sbb.Append(string.Format(SCRIPT\_TEMPLATE, Page.ClientScript.GetWebResourceUrl(this.GetType(), "HandControl.Scripts.checklist.js")));

bool hascss = false;

LiteralControl lcc = new LiteralControl(sbb.ToString());

lcc.ID = "lccheck";

foreach (Control item in Page.Header.Controls)

if (item.ID == "lccheck")

hascss = true;

if (!hascss)

Page.Header.Controls.Add(lcc);

base.OnPreRender(e);

4.重写控件的protected override void Render(HtmlTextWriter writer)方法这里主要是渲染控件的html，根据你的控件而定。

protected override void Render(HtmlTextWriter writer)

if (Items.Count > 0)

writer.Write("

");

if (Multiple == false)

writer.Write("");

else

writer.Write("");

bool first = true;

foreach (var item in Items)

if (Multiple == false)

if (item.Selected && first)

writer.Write("" + item.Text + "");

first = false;

else

writer.Write("" + item.Text + "");

else

if (item.Selected)

writer.Write("" + item.Text + "");

else

writer.Write("" + item.Text + "");

writer.Write("

");

5.添加GetSelected方法，返回List，添加GetSelectValue，返回String(多选以,号隔开)

public List GetSelected()

if (Page != null)

var values = Page.Request.Form\["tb" + this.ClientID\].Split(',');

var res = Items.Where(t => values.Contains(t.Value)).ToList();

foreach (var item in Items)

if (res.Contains(item))

item.Selected = true;

else

item.Selected = false;

return res;

else

return null;

public string GetSelectValue()

if (Page != null)

return Page.Request.Form\["tb" + this.ClientID\];

return "";

6.保存状态 你需要重写两个方法protected override object SaveViewState() 、protected override void LoadViewState(object savedState)，旨在将Items数据项属性保存到ViewState

protected override object SaveViewState()

var valuestr = Page.Request.Form\["tb" + this.ClientID\];

if (!string.IsNullOrEmpty(valuestr))

var values = valuestr.Split(',');

var temp = Items.Where(t => values.Contains(t.Value)).ToList();

foreach (var item in temp)

item.Selected = true;

return new object\[\] \{ base.SaveViewState(), Items \};

protected override void LoadViewState(object savedState)

object\[\] vState = (object\[\])savedState;

if (vState\[0\] != null)

base.LoadViewState(vState\[0\]);

if (vState\[1\] != null)

Items = (List)vState\[1\];

7.单选和复选的设置，在js中控制 添加属性

\[Description("获取和设置多选"), DefaultValue(true), Browsable(true), Category("杂项")\]

public bool Multiple \{ get; set; \} 在OnPreRender代码中你会发现Multiple属性会影响div的mul属性值，从而判断是否多选(默认多选)

8.其它说明private static readonly string STYLE\_TEMPLATE = "\\r\\n";

private static readonly string SCRIPT\_TEMPLATE = "\\r\\n";

效果图：

![8992f9a38f18bc7c545f7b734d1d1587.png][]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[85096343adce6c4cbc7895e6027db032.png]: /images/20221005/4d358e82afc942a29ad02e2fa4d1ec05.png
[35708820ab53edc975fc82803aa9d983.png]: /images/20221005/ecafce92c0a948dd8ef567c0730a085a.png
[8992f9a38f18bc7c545f7b734d1d1587.png]: /images/20221005/226884542da34ca9a5b84aa71862b91b.png