我学习技术讲究以实践为主、理论为辅的方式学习,以成果来激励学习的积极性。这也是我教书的一贯策略。所以在本系列所有的章节中,我都会以示例的方式来展示自定义控件开发的细节,请各位博友点评并指正。
闲话少提,转入正题。本节中,我们要完成一个如图1.1所示的用户注册控件的开发:
图1.1 设计器效果图
这个注册页面的HTML代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
无标题页
</title>
<style type="text/css">
table
{
border:solid 1px blue;
width:auto;
height:auto;
font-family:黑体;
font-size:9pt;
text-align:center;
}
div
{
text-align:center;
}
</style>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTI1MTk2NDQzM2RkeKVXxlbRlC6kwkW0xZb24MJiHos=" />
</div>
<div>
<table>
<caption>用户注册</caption>
<tbody>
<tr>
<td>用户名:</td>
<td>
<input name="txtUserName" type="text" id="txtUserName" />
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input name="txtPassword" type="password" id="txtPassword" />
</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" />
<input type="reset" id="btnReset" value="重置" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__
EVENTVALIDATION" value=
"/wEWBQKhrtqbCQKl1bKzCQK1qbSRCwLcl5zHDgKGxZ2yDwScGUd5EoBIuuHJkqOSRr5qNbjG" />
</div></form>
</body>
</html>
现在我们新建自定义控件库项目来完成这个注册控件,在VS2005中选择项目类型为Windows,选择模板为Web控件库。将默认WebCustomerControl1.cs文件重命名为RegisterControl.cs。
打开RegisterControl.cs文件,我们会发现所有的自定义控件都继承与WebControl这个基类,为了生成自定义界面,首先我们复写Render方法。代码如下所示:
[DefaultProperty("Text")]
[ToolboxData("<{0}:WebCustomControl1 runat=server ID='Register1'>
</{0}:WebCustomControl1>")]
public class RegisterControl : WebControl
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["Text"] = value;
}
}
protected override void RenderContents(HtmlTextWriter output)
{
output.Write(Text);
}
protected override void Render(HtmlTextWriter writer)
{
writer.Write(@" <table><caption>用户注册
</caption><tbody><tr><td>用户名:
</td><td><input name='txtUserName' type=
'text' id='txtUserName' /></td></tr><tr><td>密 码:
</td><td><input name='txtPassword' type='password' id='txtPassword' />
</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' />
<input type='reset' id='btnReset' value='重置' /></td></tr> </tbody> </table>");
}
}
}
注意:这里我将写好的HTML代码中所有的换行符替换为空格,将所有的双引号替换为单引号,使用HtmlTextWriter的Write()方法写出来而已。在替换换行符时,使用CTRL+F调用VS2005的查找和替换功能,使用正则表达式替换换行符。
现在我们重新生成解决方案,在当前解决方案中新建网站,为工具栏添加自定义控件引用,拖入新建的网站的Default.aspx页面。效果如图1.2所示:
图1.2 使用自定义控件的效果图
总结展示了一个最基本的自定义控件的开发,在我写的这个系列中将首先从这个实例出发,然后逐步深入至自定义控件开发的核心。我会给大家演示:
-
注册控件
-
登陆控件
-
自定义导航
-
人员选择控件
-
部门选择控件
-
父子表控件
-
广告窗体控件
-
联动控件