2.1 为Register自定义控件添加设计器属性

源码下载

在编写自定义控件时，需要为页面开发人员提供设计器属性，便于他们设定控件的样式、外观。并且在提供设计器属性时，需要为这些设计器属性提供便于阅读的说明。使用设计器属性注释自定义控件的属性，可以提供该项功能。

2.11 提供属性、层次属性

当页面开发人员使用我们提供的Register控件时，希望可以设定用户名文本框、密码文本框的样式、注册、重置按钮的样式。我们在开发Register控件时，需要提供如下的属性要具有以下特征：

• 属性的键值对集合。
• 属性包含属性说明，并能显示在Visual Studio中。
• 提供各种属性的默认值。
• 属性分组，便于开发人员进行属性分组。

在RegisterControl类中添加以下代码：

private string _userPwd;

[Browsable(true)]

[Description("读写属性，获取或设定用户名密码框中的值")]

[Category("杂项")]

public virtual string UserPwd

{

get { return _userPwd; }

set { _userPwd = value; }

}

private string _userName;

[Browsable(true)]

[Description("读写属性，获取或设定用户名文本框中的值")]

[DefaultValue("请输入用户名")]

[Category("杂项")]

public virtual string UserName

{

get { return this._userName; }

set { this._userName = value; }

}

以上代码实现了以下的功能（以UserName属性为例）：

• 在UserName属性上修饰Browsable特性，即设定该属性是否设计器可见。
• 在UserName属性上修饰Description特性，即设定该属性在设计器中的注释文本。
• 在UserName属性上修饰DefaultValue特性，及设定该属性的默认值。
• 在UserName属性上修饰Category特性，及设定该属性的分组。

现在修改Render()方法，代码如下所示：

protected override void Render(HtmlTextWriter writer)

{

writer.Write(string.Format(@" <table> <caption>用户注册</caption> <tbody> <tr> <td>用户名：</td> <td> <input name='txtUserName' type='text' id='txtUserName' value='{0}' /> </td> </tr> <tr> <td>密&nbsp;&nbsp;码：</td> <td> <input name='txtPassword' type='password' id='txtPassword' value='{1}' /> </td> </tr> <tr> <td>确认密码：</td> <td> <input name='txtSecPassword' type='password' id='txtSecPassword' /> </td> </tr> <tr> <td colspan='2'> <input type='submit' name='btnRegister' value='注册' id='btnRegister' /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type='reset' id='btnReset' value='重置' /> </td> </tr> </tbody> </table> ",this.UserName,this.UserPwd));

}

注意：在这里我将UserName、UserPwd作为两个文本框的值拼装在字符串中。

重新在网站页面中拖入Register控件，设定起UserName属性为"123"，效果如图2.1所示：

图2.1 设计器中的自定义控件属性属性

现在设定UserName属性为"123"，效果如图2.2所示：

图2.2 设定自定义控件属性引发的设计器联动效果图

注意：在这里设定了自定义控件的属性，会马上引起设计器中预览的效果改变。充分证明了VisualStudio的强大无匹。

实际上光有了自定义属性还不够完善，我们还需要提供高亮的自定义属性即默认属性，重新修改Register控件，为Register控件添加类属性并修改Render方法，代码如下所示：

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace RegisterControl

{

    //特别需要注意这两个特性

[DefaultProperty("UsreName")]

[ToolboxData("<{0}:ID='RegisterControl1' runat='server' UserName='请输入用户名' />")]

public class RegisterControl : WebControl

{

private string _userPwd;

[Browsable(true)]

[Description("读写属性，获取或设定用户名密码框中的值")]

[Category("杂项")]

public virtual string UserPwd

{

get { return _userPwd; }

set { _userPwd = value; }

}

private string _userName;

[Browsable(true)]

[Description("读写属性，获取或设定用户名文本框中的值")]

[DefaultValue("请输入用户名")]

[Category("杂项")]

public virtual string UserName

{

get { return this._userName; }

set { this._userName = value; }

}

protected override void Render(HtmlTextWriter writer)

{

writer.Write(string.Format(@" <table> <caption>用户注册</caption> <tbody> <tr> <td>用户名：</td> <td> <input name='txtUserName' type='text' id='txtUserName' value='{0}' onfocus='this.value=''' /> </td> </tr> <tr> <td>密&nbsp;&nbsp;码：</td> <td> <input name='txtPassword' type='password' id='txtPassword' value='{1}' /> </td> </tr> <tr> <td>确认密码：</td> <td> <input name='txtSecPassword' type='password' id='txtSecPassword' /> </td> </tr> <tr> <td colspan='2'> <input type='submit' name='btnRegister' value='注册' id='btnRegister' /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type='reset' id='btnReset' value='重置' /> </td> </tr> </tbody> </table> ",this.UserName,this.UserPwd));

}

}

}

注意：我在这里还是使用了JavaScript。

好了大功告成，现在去看看是什么样的呢？呵呵，大家去看了！~：）

在下一节中将会讲解自定义控件的状态管理。

源码下载