ASP.NET 自定义控件(一)

作者:互联网   出处:控件中国网   2014-11-05 19:15:29   阅读:1

我学习技术讲究以实践为主、理论为辅的方式学习,以成果来激励学习的积极性。这也是我教书的一贯策略。所以在本系列所有的章节中,我都会以示例的方式来展示自定义控件开发的细节,请各位博友点评并指正。

闲话少提,转入正题。本节中,我们要完成一个如图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>密&nbsp;&nbsp;码:</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" />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<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>
&nbsp;&nbsp;码:
</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' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='reset' id='btnReset' value='
重置' /></td></tr> </tbody> </table>"
);

}

    }

}

注意:这里我将写好的HTML代码中所有的换行符替换为空格,将所有的双引号替换为单引号,使用HtmlTextWriterWrite()方法写出来而已。在替换换行符时,使用CTRL+F调用VS2005的查找和替换功能,使用正则表达式替换换行符。

现在我们重新生成解决方案,在当前解决方案中新建网站,为工具栏添加自定义控件引用,拖入新建的网站的Default.aspx页面。效果如图1.2所示:

 

 

 

1.2 使用自定义控件的效果图

 

 

 

 

 

总结展示了一个最基本的自定义控件的开发,在我写的这个系列中将首先从这个实例出发,然后逐步深入至自定义控件开发的核心。我会给大家演示:

  • 注册控件
  • 登陆控件
  • 自定义导航
  • 人员选择控件
  • 部门选择控件
  • 父子表控件
  • 广告窗体控件
  • 联动控件

源码下载  (本文由控件中国网转载)

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat