ASPnet control development (1)-Introduction

ASPnet provides a lot of controls for us. Even so, we often feel that these controls are not enough and want to customize some controls as needed, for example
The implementation in the dropdownlist control can be input. ASPnet does not provide such a control for us. In this case, we need to write custom controls to meet our needs.
This series of articles will introduce the development of ASPnet controls as an entry level. For more information, seeIn-depth analysis of ASP. NET 2.0 control developmentAndVertically cutting ASP. NET 3.5 controls and component development technologyThese two books.

To put it bluntly, we usually create a class library project when developing custom controls. After coding, a DLL file is generated after compilation. This DLL file is our own control. Assume that there is already a control named helloworld. dll. Use the following method to use this control in our project.

1. Right-click the toolbox and choose add tab. You can name any tab, for example, mycontrols.

2. Right-click the newly added tab and select an item. Select the helloworld. dll file and click OK. The control is added to the toolbox, as shown in:

3. You can drag a custom control to the page, just like using a common ASPnet control. After you drag the control to the page, the following code is added to the Source view:

<%@ Register Assembly="ControlsDemo1" Namespace="ControlsDemo1" TagPrefix="cc1" %> <cc1:HelloWorld ID="HelloWorld2" runat="server"> </cc1:HelloWorld>

The first line of the code above is to register the control. The tagprefix attribute specifies the prefix of the control. The default prefix of the 0-1 control is the system prefix. You can also customize the prefix based on your preferences, as shown below:

<%@ Register Assembly="ControlsDemo1" Namespace="ControlsDemo1" TagPrefix="oec2003" %>    <oec2003:HelloWorld ID="HelloWorld1" runat="server">    </oec2003:HelloWorld>

The <% @ resgiter/> command is only used on a single page. You can configure it in Web. config to make it available globally. The Web. config configuration is as follows:

<system.web>  <pages>    <controls>      <add assembly="ControlsDemo1" namespace="ControlsDemo1" tagPrefix="oec2003"/>    </controls>  </pages></system.web>

The above briefly introduces how to use a custom control that has been compiled, and knows that writing a custom control is usually to create a class library project. Now let's take a look at the specific implementation method of a custom control.

To implement a custom control, we need to select a base class. These base classes have the most basic functions required by the control. The following three classes are commonly used base classes for development controls.

System.Web.UI.ControlSystem.Web.UI.WebControls.WebControlSystem.Web.UI.WebControls.CompositeControl

Control:The base class developed by the control. All controls directly or indirectly inherit the class. This class has the strongest scalability and flexibility.

Webcontrol:This class inherits from the control class and provides layout style and other features in addition to all control attributes. It is suitable for controls with high requirements on layout and appearance styles. The same as control is applicable to the development of a single control.

Compositecontrol:This class is a control base class provided by aspnet2.0. This class can be inherited when you want to combine existing controls to create a composite control. This class inherits webcontrol and implements the inamingcontainer interface.

If we simply expand an existing ASPnet control, we can use any of the existing controls as the base class.

The control class has the strongest basic flexibility, so we should first implement a simple helloworld control based on the control class. Create a class helloworld in the new project, inherit control, and override the render method. The Code is as follows:

public class HelloWorld:Control{    protected override void Render(HtmlTextWriter writer)    {        writer.WriteLine("hello world!");    }}

After compilation, add it to the Toolbox according to the method described above, and drag it to the page. After running, the hello World text will be displayed on the page. Now, make some changes to the above Code to add the border and background color to the display area of the hello World text. The Code is as follows:

public class HelloWorld:Control{    protected override void Render(HtmlTextWriter writer)    {        writer.WriteLine(@"<div style=""width:200px;height:100px;                border:1px solid #4DA9C2;background-color:#C3D9FF"" >");        writer.WriteLine("hello world!");        writer.WriteLine(@"</div>");    }}

Effect after running:

Although the results have come out, it is not good to directly output HTML code and embedded style in the Code. It is not good to catch errors and generate HTML code cells on the client.
Is not good. To solve this problem, we can use htmltextwriterattribute, htmltextwritertag,
Htmltextwriterstyle can be solved by the three enumerations. See the following code:

public class HelloWorld:Control{    protected override void Render(HtmlTextWriter writer)    {        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px");        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid");        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#4DA9C2");        writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "#C3D9FF");        writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "200px");        writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100px");        writer.RenderBeginTag(HtmlTextWriterTag.Div);                writer.WriteLine("hello world!");        writer.RenderEndTag();    }}

The running effect is the same as that above. Check the source code of the page to see that the HTML generated in this way has a standard indent, and the Code also complies with the XHTML specification. Therefore, we recommend that you use this method instead of directly spelling the HTML code.

Now we can use webcontrol as the base class to achieve the above effect. We need to rewrite the tagkey attribute and the rendercontents and addattributestorender methods. The default tagkey is span, what we need is Div, so we need to rewrite it to Div. The Code is as follows:

protected override HtmlTextWriterTag TagKey{    get    {        return HtmlTextWriterTag.Div;    }}

The addattributestorender method is used to set the DIV style and attributes.

protected override void AddAttributesToRender(HtmlTextWriter writer){    base.AddAttributesToRender(writer);    writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px");    writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid");    writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#4DA9C2");    writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "#C3D9FF");    writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "200px");    writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100px");}

The rendercontents method is used to present the content. The content here is "Hello World !", So there is only one line of code, of course, it can also be some other controls.

protected override void RenderContents(HtmlTextWriter writer){    writer.WriteLine("hello world!");}

Use webcontrol to complete the code for the base class:

public class HelloWorld:WebControl{    protected override HtmlTextWriterTag TagKey    {        get        {            return HtmlTextWriterTag.Div;        }    }    protected override void AddAttributesToRender(HtmlTextWriter writer)    {        base.AddAttributesToRender(writer);        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px");        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid");        writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#4DA9C2");        writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "#C3D9FF");        writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "200px");        writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100px");    }    protected override void RenderContents(HtmlTextWriter writer)    {        writer.WriteLine("hello world!");    }}

This article first introduces the use of custom controls, and then describes the simple implementation of custom controls using different classes as the basis classes. It should be said that it has entered the gate of development controls, for more information about compositecontrol, see the following section.