Asp.net control development (1)-display control content

The display of the Asp.net control is naturally inseparable from the display of HTML, CSS, JavaScript, and other front-ends. Content So the first thing to do when developing a control is to know how to output the content to be displayed on the client.

1. Select base class

All in Asp.net Standard Controls can be taken as the base class. If the control we want to develop is only to enhance the functions of the original standard control (for example: you can add some follow-up functions to the checkbox of the Treeview to directly use the standard control as the base class.

Generally, if the developed control cannot be found from the standard, it can be inherited from three classes:

System. Web. UI. Control

System. Web. UI. webcontrols. webcontrol

System. Web. UI. webcontrols. compositecontrol

The following describes the relationships and differences between the three classes:

Control: only simple rendering is provided. Supported . For example, literal control

Webcontrol: Creates support for the control appearance. Suitable for visual control inheritance, such as: button

Compositecontrol: Composite of multiple derived controls. It is suitable for developing standard controls in application Asp.net.

　　 Three Control is the base class of all controls in Asp.net, webcontrol is inherited from control, and compositecontrol is inherited from webcontrol.

Ii. How to present

Rendering of control

In the control class Method Render. Render prototype:

Protected internal virtual void render (htmltextwriter writer ){...}

The htmltextwriter writer parameter is provided by the framework that calls the render method at runtime, so we can rewrite the render method to render the content.

Helloworld example:

Public class helloworld: Control {

Protected override void render (htmltextwriter writer)

{

Writer. writeline ("henllo world ");

}

}

After compilation Project The DLL file is displayed as "Hello World ".

Control output html Content

In the render method, we need to implement the output html Tag Follow-up styles can be implemented through the following enumeration types: htmltextwritertag, htmltextwriterattribute, and htmltextwriterstyle. Htmltextwritertag indicates the HTML Tag, htmltextwriterattribute indicates the attribute on the tag, and htmltextwriterstyle indicates the style.

Picture example:

Public class picshow: Control
{
Protected override void render (htmltextwriter writer)
{
Writer. addstyleattribute (htmltextwriterstyle. textalign, "center ");
Writer. addstyleattribute (htmltextwriterstyle. Height, "100px ");
Writer. addstyleattribute (htmltextwriterstyle. Width, "100px ");
Writer. renderbegintag (htmltextwritertag. Div );
// Create IMG tag
Writer. addattriter( htmltextwriterattribute. SRC, "Your Image Address ");
Writer. addstyleattribute (htmltextwriterstyle. Width, "80px ");
Writer. addstyleattribute (htmltextwriterstyle. Height, "80px ");
Writer. renderbegintag (htmltextwritertag. IMG );
Writer. renderendtag ();
// End of Div
Writer. renderendtag ();
}
}

After you specify the above image address, you can display the specified image. After viewing the source file, we can find that the source code generated by the client is the HTML content we want to create.

Webcontrol Rendering

The presentation of webcontrol consists of three steps: rendering the start tag, rendering the content in the tag, and rendering the end tag. Method Renderbegintag, rendercontents, and renderendtag. The tag generated by renderbegintag is determined by the webcontrol. tagkey or webcontrol. tagname attribute. The default rendering label of webcontrol. tagkey is, so if we want to change the rendering label at the beginning, we can rewrite webcontrol. tagkey or webcontrol. tagname.

 

In addition, webcontrol provides addattributetorender Method To add control properties. Note that when you override the addattributetorender method to add attributes, you must also call the base. addattributetorender method.

We use webcontrol to implement the above picshow control:

Public class pictureweb: webcontrol
{
Protected override htmltextwritertag tagkey
{
Get
{
Return htmltextwritertag. div;
}
}
Protected override void addattributestorender (htmltextwriter writer)
{
Base. addattributestorender (writer );
Writer. addstyleattribute (htmltextwriterstyle. textalign, "center ");
Writer. addstyleattribute (htmltextwriterstyle. Width, "100px ");
Writer. addstyleattribute (htmltextwriterstyle. Height, "100px ");
}
Protected override void rendercontents (htmltextwriter writer)
{
Writer. addattriter( htmltextwriterattribute. SRC, "Your Image Address ");
Writer. addstyleattribute (htmltextwriterstyle. Width, "80px ");
Writer. addstyleattribute (htmltextwriterstyle. Height, "80px ");
Writer. renderbegintag (htmltextwritertag. IMG );
Writer. renderendtag ();
}
}

In the above Code, we first need to create a div tag, so we need to modify the tagkey attribute. In order to add an attribute to the outer Div, We have rewritten the addattributestorender method, and finally implemented it in the rendered img in the rendercontents method. The <div> ending </div> of the outer layer is handed over to renderbegbegintag and renderendtag without rewriting.

 

Rendering of compositecontrol

Because compositecontrol inherits from webcontrol, it also has the attribute tagkey to determine the start tag. To implement compositecontrol rendering, you only need to add a domain. For example, if our control requires a Textbox Control, it can be expressed as private textbox _ txtinput. Then, rewrite the createchildcontrols method and use this. Controls. Add method to render it.