Use ASP. NET to create a custom text box

In. using self-created controls in applications of. Net can greatly enhance the functions of applications. You can add the desired attributes and behaviors on the basis of the original controls, and even create custom controls. In Asp.net, we can add some client JavaScript Functions to some controls to reduce the number of times data is returned to the server each time when the page is submitted, thus improving the function and efficiency of the program. In this article, we will see how to use Asp.net to create a custom text box control. when the focus is on the text box control and the control is left, the background color of the text box control changes accordingly. This control will include the following features:

1) when you enter data in the text box, the background color of the text box is displayed in a preset color. When the user's input focus leaves the text box, the background color of the original text box can be restored.

2) You can change the attributes of the custom control during vs.net design.

Next we will start to create the control step by step. First, create an empty vs.net solution and add an Asp.net Project (named webapplication) and a web control library project (named controlib ). Rename webform1.aspx in the Asp.net project to container. aspx, and rename webmermercontrol1.cs in the web control library project to pimpedouttextbox. CS. As shown in figure:

Then, add the code to the pimpedouttextbox class. Because this is a web control library, vs. Net has introduced related class libraries. Because our application will use the color function, we introduce the plotting class.

Using system. drawing;

Use the following code to replace the original predefined code.

Line 1: [Assembly: tagprefix ("controllib", "lib")]
Line 2:NamespaceControllib
Line 3 :{
Line 4: [defaultproperty ("backcoloron "),
Line 5: toolboxdata ("<{0}: pimpedouttextbox runat = Server> </{0}: pimpedouttextbox>")]
Line 6: PublicClassPimpedouttextbox: system. Web. UI. webcontrols.Textbox
Line 7 :{

The Assembly attribute was added at the beginning to automatically add the tagprefix control flag to vs.net when you drag the control in vs.net. Added several attributes in the pimedouttexbox class: defaultproperty and toolboxdata. the attribute backcoloron in defaultproperty indicates that when the control is removed from. when the toolbox of net is dragged to the designer, the default properties of the control are selected. The toolboxdata attribute is related to the [Assembly: tagprefix] attribute to show how the control is generated from the HTML view. These attributes are described in detail below.

Finally, in row 6th, pay attention to the public class pimpedouttextbox: system. Web. UI. webcontrols. textbox statement, which indicates that this control adds new behavior than the original text box control. In general, the control we created is still a text box control, but inherits the attributes and behaviors of the original text box control and has its own new attributes.

Next, two properties will be added to the pimedouttextbox control. Here, we imagine that the color of the text box changes when the user enters the text box or the text box gets the focus, so the new attribute backcoloron is named; when the control loses the focus, the color of the text box is named backcoloroff.

Line 1: Private color _ coloff;
Line 2: [category ("appearance"), description ("the background color when the control loses focus")]
Line 3: Public color backcoloroff
Line 4 :{
Line 5: Get {return _ coloff ;}
Line 6: set {_ coloff = Value
Line 7 :}
Line 8: Private color _ colon;
Line 9: [category ("appearance"), description ("the background color when the control has the Focus")]
Line 10: Public color backcoloron
Line 11 :{
Line 12: Get {return _ colon ;}
Line 13: set {_ colon = value ;}
Line 14 :}

The above code is a typical attribute assignment and access statement. I believe everyone is familiar with it. One thing to mention is that the category and descriptiton attributes of rows 2nd and 9th are a description of backcoloron and backcoloroff attributes in the Properties window of the control. Note that we use the color class, which is more convenient. You can use the color selector that comes with vs.net without entering the hexadecimal value of the color.

Next, the following is an important part. In this new control, we will use the method of reloading an addattributestorender () to output new content to the browser. The response to the onfocus and onblur events of the client will be added. In addition, it should be noted that this method is automatically called when vs. Net creates the control, so we can set the attributes during the design.

Line 1: protected override void addattributestorender (htmltextwriter writer)
Line 2 :{
Line 3: Base. addattributestorender (writer );
Line 4: // only add the client-side JavaScript For design mode or IE
Line 5: If (indesignmode () | system. Web. httpcontext. Current. Request. browser. type. indexof ("ie")>-1)
Line 6 :{
Line 7: writer. addattribute ("onfocus", "javascript: This. style. backgroundcolor = '" + colortranslator. tohtml (_ colon) + "';");
Line 8: If (_ coloff. Equals (color. Empty ))
Line 9 :{
Line 10: _ coloff = This. backcolor;
Line 11 :}
Line 12: writer. addattrir ("onblur", "javascript: This. style. backgroundcolor = '" + colortranslator. tohtml (coloff) + "';");
Line 13 :}
Line 14 :}

The purpose of row 3rd is to call the base class and inherit the attributes of the original text box. The addattributestorender method uses the htmltextwriter stream as the parameter. In rows 9th and 12th, the client output is added by calling the addattribute method of the HTML text stream. Two parameters are input. The first parameter is the HTML attribute, and the second parameter is the value corresponding to the attribute. After being output by the browser, they are in the form of <input type = "text" onblur = "javascript...">.

Because the browser uses a hexadecimal color, we use the colortranslator class to convert the. NET color type to the color type that can be recognized in the browser (lines 7th and 12th ). In row 3, check whether the _ coloroff attribute is not assigned a value. If no value is assigned, set the color of backcoloroff to the background color of the original text box.

In row 5th, we checked whether the browser type supports onfocus and onblur events, and. net can be used to change the properties of the control. Therefore, an indesignmode function is added:

Line 1: Private bool indesignmode ()
Line 2 :{
Line 3: bool blnout = false;
Line 4: If (object. referenceequals (system. Web. httpcontext. Current, null ))
Line 5 :{
Line 6: blnout = true;
Line 7 :}
Line 8: else
Line 9 :{
Line 10: blnout = false;
Line 11 :}
Line 12: Return blnout;
Line 13 :}

In the first line of the code above, we can determine whether the httpcontext instance is null or not. If it is null, it indicates that it is in the Vs. Net Design Mode and does not respond to the HTTP request. Next, let's test the widget.

First, we compile the control project, and then add the newly prepared control to the ASP. NET project. By right-clicking Add reference in webapplication, select the DLL file in the compiled control library directory. In the toolbox of vs.net, add a new item and select the DLL in the directory of the newly prepared control library. Then, you will find that the pimedouttextbox you just created is added to the toolbox. For example:

Then, drag the control we made from the toolbox to the page. Note that the property page of the control is automatically located in the backcoloron attribute. This is because we have set the defaultproperty Attribute before. Pay attention to the description text under this attribute because the description attribute is set. Switch to the HTML view and you will see

<% @ Register tagprefix = "lib" namespace = "controllib" assembly = "controllib" %>

This is because

[Assembly: tagprefix ("controllib", "lib")]

.

Switch back to the design view and set the color of the text box control to Gray. At the same time, backcoloroff is set to the same color, because backcoloroff is not assigned a value before. Then, change the background color of the text box. This will find that the value of backcoloroff has not changed, because the value of backcoloroff is no longer a null value at this time (For details, refer to the above Code ). Next, set the background color of the text box to any color except white to run the program. When the text box control gets the focus, the color of the text box is displayed in the backcoloron color. When the text box loses the focus, the color of the text box is displayed in backcoloroff.

If you want to track the client code in one step, you can add debugger to the Javascript statement to be debugged, as shown in figure

Javascript: debugger; this. style. backgroundcolor = 'blue ';

To run the program, you can monitor related variables in the monitoring window, such as entering document. Forms [0]. All [1]. Name.

The above is just a brief introduction to how to create custom controls in Asp.net. I believe readers will be inspired. The program can be upgraded and tested in vs.net 2002,2003.