[Implement the ASP. Net Control as day2] create the first Server Control

The ASP. NET Server Control Project has been created in the previous article. Next we will learn how to write the first Server Control.

Write server controls are roughly divided into the following three methods:

1. Create a new control from scratch. Generally, it will inherit from the system. Web. UI. control or system. Web. UI. webcontrols. webcontrol category.
2. inherit existing controls and extend the functions of the original controls, for example, inherit the original textbox to extend the functions.
3. composite Control, which combines multiple existing controls into a new control. For example, if a button is added to the right of the textbox to form a control, it is generally inherited to system. web. UI. webcontrols. compositecontrol category.

This article will first introduce the 1st methods, from scratch to build controls, the followingArticle2nd and 3 controls will be introduced in succession. To create a new control, it inherits control or webcontrol. controls without a UI can be inherited by control (such as sqldatasource). controls with a UI are inherited by webcontrol. In the following example, we inherit webcontrol to create the first mytextbox control.

1. New MytextboxWidget

In bee. right-click a web project and choose Add/Add project from the shortcut menu. select ASP. NET Server Control, enter mytextbox In the Name text box, and press the OK button to add the mytextbox control category to the project.

The newly added control has a text attribute and overwrites the rendercontents method. The rendercontents method is to "display the content of the control in the specified writer". Simply put, the HTML code corresponding to the output control is used to render it in the browser of the client. Suppose we want to write a text box on the web page, first let's take a look at the HTML code corresponding to the text box in the web page, and then try to identify and output the HTML code in the rendercontents method.

Ii. Output ControlHtmlCode

You can use an HTML editor such as FrontPage to edit the display mode of the control, view its HTML code, and then think about how to write this server control. Assume that the mytextbox control contains a text box and a button, the final output HTML code should be as follows.

 
<Input ID= "Text1" Type= "Text" />
 

<Input ID= "Button1" Type= "Button" Value= "Button" />
 

 

We output the preceding HTML code in the rendercontents method of mytextbox.

 
Protected Overrides SubRendercontents (ByvalWriterAsHtmltextwriter)
 

 
DimShtmlAs String
 

 
Shtml ="<Input id =""Text1""Type =""Text""/>"&_
 

 
"<Input id =""Button1""Type =""Button""Value =""Button""/>"
 

Writer. Write (shtml)
 

 
EndSub
 

 

Build the control project and drag mytextbox on the test page. The design phase shows the expected results.

 

RunProgramIn the browser, check whether the output result of the mytextbox control is as expected.

 

3. Apply attributes to controlsHtmlCode

It is impossible for the control to output the HTML code in this way. the settings of related properties of the control generally affect the output HTML code. Assume that mytextbox has two attributes: Text and buttontext, which correspond to the content of the text box and the text of the button respectively. mytextbox originally has the text attribute, and adds the buttontext attribute to the image-based lugao.

 
<_
 

 
Bindable (True),_
 

 
Category ("Appearance"),_
 

 
Defaultvalue (""),_
 

 
Localizable (True)> _
 

 
PropertyButtontext ()As String
 

 
Get
 

DimSAs String=CSTR(Viewstate ("Buttontext"))
 

 
IfSIs Nothing Then
 

 
Return String. Empty
 

 
Else
 

 
ReturnS
 

 
End If
 

 
End Get
 

Set(ByvalValueAs String)
 

 
Viewstate ("Buttontext") = Value
 

 
End Set
 

 
EndProperty
 

 

The rendercontents method is rewritten as follows.

 
Protected Overrides SubRendercontents (ByvalWriterAsHtmltextwriter)
 

DimShtmlAs String
 

 
Shtml ="<Input id =""Text1""Type =""Text""Value =""{0 }""/>"&_
 

 
"<Input id =""Button1""Type =""Button""Value =""{1 }""/>"
 

 
Shtml =String. Format (shtml,Me. Text,Me. Buttontext)
 

 
Writer. Write (shtml)
 

EndSub
 

 

Re-build the control project and test the text and buttontext attributes of mytextbox on the page.

 

4. Enable Clientid (htmlThe ID)Is a unique value

Place two mytextbox controls on the page, execute the program, and check the original HTML code of mytextbox in the browser. You will find that mytextbox will wrap the control content with a span, and the clientid output by each control is unique. However, the text boxes and buttons in mytextbox are repeated. Therefore, the clientid of the child control usually contains the ID of the parent control.

 
<Span ID= "Mytextbox1">
 

 
<Input ID= "Text1" Type= "Text" Value= "This is text"/>
 

<Input ID= "Button1" Type= "Button" Value= "This is by hour" />
 

 
</Span>
 

 
<BR />
 

 
<Span ID= "Mytextbox2">
 

<Input ID= "Text1" Type= "Text" Value= "This is text"/>
 

 
<Input ID= "Button1" Type= "Button" Value= "This is by hour" />
 

 
</Span>
 

 

So we modify the rendercontents method again.Code.

Protected Overrides SubRendercontents (ByvalWriterAsHtmltextwriter)
 

 
DimShtmlAs String
 

 
Shtml ="<Input id =""{0} _ text""Type =""Text""Value =""{1 }""/>"&_
 

 
"<Input id =""{0} _ button""Type =""Button""Value =""{2 }""/>"
 

Shtml =String. Format (shtml,Me. ID,Me. Text,Me. Buttontext)
 

 
Writer. Write (shtml)
 

 
EndSub
 

Execute the program and view the original HTML code again. All clinetid will be unique.

 
<Span ID= "Mytextbox1">
 

 
<Input ID= "Mytextboxshorttext" Type= "Text" Value= "This is text"/>
 

 
<Input ID= "Mytextboxshortbutton" Type= "Button" Value= "This is by hour" />
 

</Span>
 

 
<BR />
 

 
<Span ID= "Mytextbox2">
 

 
<Input ID= "Mytextbox2_text" Type= "Text" Value= "This is text"/>
 

<Input ID= "Mytextbox2_button" Type= "Button" Value= "This is by hour" />
 

 
</Span>
 

V. Control prefixes

The default prefix of the custom control is "0", but this can be modified. Add the following definition to the assemblyinfo. VB file of the project. For more information, see the "Custom Server Control prefix" section in my blog.

 
'Specify the prefix of the preset metric. <Assembly: tagprefix ("Bee. Web. webcontrols", "Bee")>
 

 

Vi. Conclusion

In this article, server controls are written using the method of steel-making by soil method. Generally, there will be a better way of writing and easier maintenance when implementing controls, and relevant practices will be introduced in subsequent articles.

Note: This article is also published in "the first it state help tie Ren Competition". If you think this article is helpful to you, remember to repeat it to improve your popularity ^
Http://ithelp.ithome.com.tw/question/10011523