视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Asp.net自定义控件之单选、多选控件
2020-11-27 22:37:23 责编:小OO
文档


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

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

先看看效果:

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<Select2Item> Items数据项属性。

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

  

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中的写法为<%=WebResource("命名空间.文件夹名.文件名")%> 
 PerformSubstitution 表示嵌入式资源的处理过程中是否分析其他Web 资源 URL,并用到该资源的完整路径替换。
c.重写protected override void OnPreRender(EventArgs e),引入嵌入的脚本或样式文件
 if(Page!=null) Page.Header.Controls.Add(LiteralControl),将<script><link>标签放到LiteralControl中,然后将LiteralControl添加到Page.Header中,最后在页面里你就会看到引入的<script><link>标签。

 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("<div id='div" + this.ClientID + "' class='c01-tag-div' mul='" + (Multiple == true ? "1" : "0") + "'>");
 if (Multiple == false)
 writer.Write("<input name='tb" + this.ClientID + "' type='hidden' value='" + Items[0].Value + "' />");
 else
 writer.Write("<input name='tb" + this.ClientID + "' type='hidden' />");
 bool first = true;
 foreach (var item in Items)
 {
 if (Multiple == false)
 {
 if (item.Selected && first)
 {
 writer.Write("<a title='" + item.Text + "' class='c01-tag-item c01-tag-select' val='" + item.Value + "' tag='Y'>" + item.Text + "</a>");
 first = false;
 }
 else
 {
 writer.Write("<a title='" + item.Text + "' class='c01-tag-item' val='" + item.Value + "' tag='N'>" + item.Text + "</a>");
 }
 }
 else
 {
 if (item.Selected)
 writer.Write("<a title='" + item.Text + "' class='c01-tag-item c01-tag-select' val='" + item.Value + "' tag='Y'>" + item.Text + "</a>");
 else
 writer.Write("<a title='" + item.Text + "' class='c01-tag-item' val='" + item.Value + "' tag='N'>" + item.Text + "</a>");
 }
 }
 writer.Write("</div>");
 }
 } 

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

 public List<Select2Item> 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<Select2Item>)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 = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />\r\n";
 private static readonly string SCRIPT_TEMPLATE = "<script type=\"text/javascript\" src=\"{0}\"></script>\r\n";

效果图:

下载本文
显示全文
专题