您的位置：首页 > 编程语言 > ASP

[ASP.NET 控件实作 Day2] 建立第一个服务器控件

2008-10-14 00:52 411 查看

上一篇中已经建立「ASP.NET服务器控件」项目，接下来我们将学习来撰写第一个服务器控件。撰写服务器控件大致分为下列三种方式1.由无到有建立全新的控件，一般会继承至System.Web.UI.Control或System.Web.UI.WebControls.WebControl类别。
2.继承现有控件，扩展原有控件的功能，如继承原有TextBox来扩展功能。
3.复合式控件，将多个现有的控件组合成为一个新的控件，例如TextBox右边加个Button整合成一个控件，一般会继承至System.Web.UI.WebControls.CompositeControl类别。本文将先介绍第1种方式，由无到有来建立控件，后面的文章中会陆续介绍第2、3种方式的控件。要建立全新的控件会继承至Control或WebControl，没有UI的控件可由Control继承下来(如SqlDataSource)，具UI的控件会由WebControl继承下来。接下来的范例中，我们将继承WebControl来建立第一个MyTextBox控件。一、新增MyTextBox控件在Bee.Web项目按右键选单，执行「加入\新增项目」，选择「ASP.NET服务器控件」，在名称文字框中输入MyTextbox，按下「确定」钮，就会在项目中加入MyTextbox控件类别。

新加入的控件预设有一个Text属性，以及覆写RenderContents方法。RenderContents方法是「将控件的内容呈现在指定的写入器」，简单的说就是输出控件对应的HTML码，用来呈现在客户端的浏览器上。假设我们要撰写一个网页上的文字框，那就先去看一下文字框在网页中对应的HTML码，然后在RenderContents方法中想辨法输出这些HTML码即可。二、输出控件的HTML码你可以使用FrontPage之类的HTML编辑器，先编辑出控件的呈现方式，进而去观查它的HTML码，再回头去思考如何去撰写这个服务器控件。假设MyTextbox控件包含一个文字框及一个按钮，那最终输出的HTML码应该如下。

<inputid="Text1"type="text"/>

<inputid="Button1"type="button"value="button"/>

ProtectedOverridesSubRenderContents(ByValwriterAsHtmlTextWriter)

DimsHTMLAsString

sHTML="<inputid=""Text1""type=""text""/>"&_

"<inputid=""Button1""type=""button""value=""button""/>"

writer.Write(sHTML)

EndSub

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

建置控件项目，然后拖曳MyTextbox在测试页面上，设计阶段就会呈现出我们期望的结果。

执行程序，在浏览器看一下MyTextbox控件输出的结果，是不是跟我们预期的一样呢。

三、属性套用到控件HTML码
控件不可能单纯这样输出HTML码而已，控件的相关属性设定，一般都影响到输出的HTML码。假设MyTextbox有Text及ButtonText二个属性，分别对应到文字框的内容及按钮的文字，MyTextbox本来就有Text属性，依像画芦葫新增ButtonText属性。

<_

Bindable(True),_

Category("Appearance"),_

DefaultValue(""),_

Localizable(True)>_

PropertyButtonText()AsString

Get

DimsAsString=CStr(ViewState("ButtonText"))

IfsIsNothingThen

ReturnString.Empty

Else

Returns

EndIf

EndGet

Set(ByValValueAsString)

ViewState("ButtonText")=Value

EndSet

EndProperty

ProtectedOverridesSubRenderContents(ByValwriterAsHtmlTextWriter)

DimsHTMLAsString

sHTML="<inputid=""Text1""type=""text""value=""{0}""/>"&_

"<inputid=""Button1""type=""button""value=""{1}""/>"

sHTML=String.Format(sHTML,Me.Text,Me.ButtonText)

writer.Write(sHTML)

EndSub

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

重新建置控件项目，在页面上测试MyTextbox的Text及ButtonText属性。

四、使ClientID(HTML原始码控件的ID)是唯一值
在页面上放置二个MyTextbox控件，执行程序，在浏览器中检查MyTextbox的HTML原始码。你会发现MyTextbox会以一个span包住控件的内容，而每个控件的输出的ClientID是唯一的。不过MyTextbox内含的文字框及按钮却会重复，所以一般子控件的ClientID会在前面包含父控件的ID。

<spanid="MyTextbox1">

<inputid="Text1"type="text"value="這是文字"/>

<inputid="Button1"type="button"value="這是按鈕"/>

</span>

<br/>

<spanid="MyTextbox2">

<inputid="Text1"type="text"value="這是文字"/>

<inputid="Button1"type="button"value="這是按鈕"/>

</span>

ProtectedOverridesSubRenderContents(ByValwriterAsHtmlTextWriter)

DimsHTMLAsString

sHTML="<inputid=""{0}_Text""type=""text""value=""{1}""/>"&_

"<inputid=""{0}_Button""type=""button""value=""{2}""/>"

sHTML=String.Format(sHTML,Me.ID,Me.Text,Me.ButtonText)

writer.Write(sHTML)

EndSub

<spanid="MyTextbox1">

<inputid="MyTextbox1_Text"type="text"value="這是文字"/>

<inputid="MyTextbox1_Button"type="button"value="這是按鈕"/>

</span>

<br/>

<spanid="MyTextbox2">

<inputid="MyTextbox2_Text"type="text"value="這是文字"/>

<inputid="MyTextbox2_Button"type="button"value="這是按鈕"/>

</span>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

五、控件前置词
自订控件的预设前置词是cc1，不过这是可以修改的，在项目中的AssemblyInfo.vb档案中，加入如下定义即可。详细的作法请参考笔者部落格中的「自订服务器控件前置词」一本有详细介绍，在此不再累述。

'設定控制項的標記前置詞
<Assembly:TagPrefix("Bee.Web.WebControls","bee")>

六、结语
本文中是用土法炼钢的方法在撰写服务器控件，一般在实作控件时会有更好的方式、更易维护的写法，后续的文章中会陆续介绍相关作法。
备注：本文同步发布于「第一届iT邦帮忙铁人赛」，如果你觉得这篇文章对您有帮助，记得连上去推鉴此文增加人气^^
http://ithelp.ithome.com.tw/question/10011523

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航