ASP.NET 三态复选框容易

分享于 

6分钟阅读

Web开发

  繁體

介绍

三状态复选框对于实现自定义功能非常有用,以提供三个不同的选项来在单个控件中选择。 例如你可能希望实现安全 控制面板 用户界面来设置用户的Collection 权限,而这些权限的可能状态可能是: "允许","取消","unset"。

背景

几天前,我被要求构建一个第三方复选框控件。 第一种方法是通过从 CheckBox 类继承的Web控件类来实现它。 我发现这种方法很小,所以我决定用JavaScript和表示这三种条件的图像来尝试另一种方法。 本文将使用一种简单的方法,通过构建Web控件类来保持代码重用性的原则。

使用代码

  • 使新的Web控件类包含我们的三状态复选框控件。 你可以使用 Visual Studio 2005创建Web控件的新类库。 解决方案资源管理器中将出现默认的" Class1.cs"。 将类的NAME 更改为其他更相关的NAME。 记住在新类中 inherit的WebControl 类。 添加所需的引用。
  • 创建以下类属性: DefaultStateDefaultActionImagePathNameCheckBoxstyle。 为复选框的三种状态实现图像和状态值容器。 我使用" span"容器来存储状态值和 <img> 标签来分配状态图像。
  • 实现JavaScript来处理客户端checkboxes的OnClick 事件,并将这里脚本嵌入到名为 Build()的C# 函数中。
  • 编写用于将控件呈现为图像和两个 <span> 标记的代码: 一个用于状态值,另一个用于复选框自定义操作。
  • 为Web控件编写 OnLoad 事件代码,以便编写我们之前讨论过的JavaScript。
  • 生成解决方案。
publicclass TriStateCheckBox : WebControl
{
 // Member variables//string _DefaultState = "1";
 string _DefaultAction = "1";
 string _name = string.Empty;
 string _imagespath = "images/";
 CheckBoxTableStyle _CheckBoxStyle = CheckBoxTableStyle.classic;
 // Public properties//publicstring DefaultState
 {
 get { return _DefaultState; }
 set { _DefaultState = value; }
 }
 publicstring DefaultAction
 {
 get { return _DefaultAction; }
 set { _DefaultAction = value; }
 }
 publicstring Name
 {
 get { return _name; }
 set { _name = value; }
 }
 publicstring ImagePath
 {
 get { return _imagespath; }
 set { _imagespath = value; }
 }
 // Behavior//publicenum CheckBoxTableStyle
 {
 classic,
 flat,
 xp
 }
 public CheckBoxTableStyle CheckBoxStyle
 {
 get { return _CheckBoxStyle; }
 set { _CheckBoxStyle = value; }
 }
 privatestring Build()
 {
 string script = "<script>";
 script += "function settristate(obj)";
 script += "{";
 script += "var temp='';";
 script += "var _obj=document.getElementById('value_'+obj);";
 script += "temp = _obj.innerHTML;";
 script += "if(temp == '1')";
 script += "{";
 script += "document.getElementById('tristate_'+obj).src = '" + 
 ImagePath + "2.bmp/';";
 script += "document.getElementById('value_'+obj).innerHTML = '2';";
 script += "}";
 script += "if(temp == '2')";
 script += "{";
 script += "document.getElementById('tristate_'+obj).src = '" + 
 ImagePath + "3.bmp';";
 script += "document.getElementById('value_'+obj).innerHTML = '3';";
 script += "}";
 script += "if(temp == '3')";
 script += "{";
 script += "document.getElementById('tristate_'+obj).src = '" + 
 ImagePath + "1.bmp';";
 script += "document.getElementById('value_'+obj).innerHTML = '1';";
 script += "}";
 script += "}";
 script += "function GetValues(obj){var ret =" + 
 "document.getElementById('value_'+obj).innerHTML;return ret;}";
 script += "function GetActions(obj){var ret =" + 
 "document.getElementById('accion_'+obj).innerHTML;return ret;}";
 script += "</script>";
 return script;
 }
 // Render tristatecheckbox//value_x is the current value of the checkbox"x"//action_x is the custom action for checkbox"x"protectedoverridevoid Render(HtmlTextWriter output)
 {
 output.Write("<IMG id='tristate_" + Name + "' onclick=settristate('" + 
 Name + "') src='" + ImagePath + _DefaultState + ".bmp'>");
 output.Write("<span id='value_" + Name + 
 "' style='VISIBILITY: hidden' name='value_" + 
 Name + "'>3</span>");
 output.Write("<span id='accion_" + Name + 
 "' style='VISIBILITY: hidden' name='accion_" + 
 Name + "'>" + DefaultAction + "</span>");
 }
 protectedoverridevoid OnLoad(EventArgs e)
 {
 base.OnLoad(e);
 HttpContext.Current.Response.Clear();
 HttpContext.Current.Response.Write(Build());
 }

如所示,可以将三状态复选框添加到任何ASPX页中。

屏幕截图- tristate2.jpg

使用属性标记设置 TriStateCheckBox的NAME。 另外,可以设置和 DefaultAction,我希望在不久的将来添加一个选项来设置checkbox样式。

屏幕截图- tristate1.jpg

历史记录

  • 第一个构建:2007年08月22日。

asp  asp-net  复选框  
相关文章