Asp.net自定义控件之单选、多选控件

本文实例为大家分享了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";

效果图：

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