轻松创建ASP.NET三态复选框

• 下载演示 - 6.66 KB
• 下载源代码 - 4.84 KB

引言

三态复选框对于实现自定义功能非常有用，它可以在单个控件中提供三种不同的选择。例如，您可能希望实现一个安全控制面板UI来设置一组用户的权限，而这些权限的可能状态可能是：“允许”、“拒绝”、“未设置”。

背景

几天前，我被要求构建一个三态复选框Web控件。我的第一种方法是通过继承自CheckBox类的Web控件类来实现。我发现这种方法有点枯燥，所以我决定尝试另一种方法，使用JavaScript和表示这三种状态的图像。在本文中，我将使用一种足够简单的方法，通过构建Web控件类来保持代码的可重用性原则。

Using the Code

1. 创建一个新的Web控件类来包含我们的三态复选框控件。您可以使用Visual Studio 2005创建新的Web控件类库。“Class1.cs”将出现在解决方案资源管理器中。将类的名称更改为其他更相关的名称。记住在您的新类中继承WebControl类。还要添加所需的引用。
2. 为以下内容创建类属性：DefaultState、DefaultAction、ImagePath、Name和CheckBoxstyle。为复选框的三种状态实现图像和状态值容器。我使用“span”容器来存储状态值，并使用<img>标签来分配状态图像。
3. 实现JavaScript来处理我们三态复选框的客户端OnClick事件，并将此脚本嵌入到名为Build()的C#函数中。
4. 编写代码以将控件呈现为一个图像和两个<span>标签：一个用于状态值，另一个用于复选框自定义操作。
5. 为Web控件的OnLoad事件编写代码，以编写我们前面讨论过的JavaScript。
6. 构建解决方案。

public class TriStateCheckBox : WebControl
{
    // Member variables
    //
    string _DefaultState = "1";
    string _DefaultAction = "1";
    string _name = string.Empty;
    string _imagespath = "images/";
    CheckBoxTableStyle _CheckBoxStyle = CheckBoxTableStyle.classic;

    // Public properties
    //
    public string DefaultState
    {
        get { return _DefaultState; }
        set { _DefaultState = value; }
    }

    public string DefaultAction
    {
        get { return _DefaultAction; }
        set { _DefaultAction = value; }
    }

    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    public string ImagePath
    {
        get { return _imagespath; }
        set { _imagespath = value; }
    }

    // Behavior
    //
    public enum CheckBoxTableStyle
    {
        classic,
        flat,
        xp
    }

    public CheckBoxTableStyle CheckBoxStyle
    {
        get { return _CheckBoxStyle; }
        set { _CheckBoxStyle = value; }
    }

    private string 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"
    protected override void 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>");
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        HttpContext.Current.Response.Clear();
        HttpContext.Current.Response.Write(Build());
    }

如所示，三态复选框可以添加到任何ASPX页面中。

使用属性标签设置TriStateCheckBox的名称。您还可以设置（可选）DefaultState和DefaultAction，我希望将来添加一个设置复选框样式的选项。

历史

• 首次构建：2007年8月22日。