Create a custom text box with asp.net

asp.net| Create | text box

In one. NET application, you can greatly enhance the functionality of your application by adding the properties and behaviors you want to the original control, or even creating your own custom controls. In asp.net, we can increase the functionality and efficiency of the program by adding some client-side JavaScript functionality to the previous controls, reducing the number of times the data is returned to the server each time the page is submitted. In this article, we'll look at how to create a custom text box control with asp.net that changes the background color of the text box control when the focus is on the text box control and when you leave the control. This control will contain the following features:
1 when a user enters data in a text box, the background color of the text box is displayed in a preset color, and the background color of the original text box can be restored when the user's input focus leaves the text box.

2 The various properties of the custom control can be changed during the design of the vs.net.

Let's start by creating the control step-by-step. First, create an empty vs.net solution, add a asp.net project (named WebApplication) and a Web Control Library project (named Controlib). Rename the WebForm1.aspx in the ASP.net project to container.aspx, and rename the Webcustomercontrol1.cs in the Web Control Library project to PimpedOutTextbox.cs.


Next, add the code to the Pimpedouttextbox class. Because this is a Web control library, VS. NET has introduced a related class library. Since our application will use color features, we introduce a drawing class.

Using System.Drawing;
Replace the previously predefined code with the following code.

Line 1: [Assembly:tagprefix ("Controllib", "Lib")]
Line 2:namespace Controllib
Line 3: {
Line 4: [Defaultproperty ("Backcoloron"),
Line 5:toolboxdata ("<{0}:P impedouttextbox runat=server></{0}:P impedouttextbox>")]
Line 6:public class PimpedOutTextbox:System.Web.UI.WebControls.TextBox
Line 7: {
At the outset, the Assembly property was added, which is designed to automatically add TagPrefix control markup when the control is dragged in vs.net. In the Pimedouttexbox class, Added several properties: the attribute Backcoloron in Defaultproperty and toolboxdata.defaultproperty means that when the control is dragged from the Vs.net Toolbox to the designer, the property is selected by default in the control. The ToolBoxData property is related to the [Assembly:tagprefix] property and is used to indicate how the control was generated from the HTML view. These properties are explained in more detail below.

Finally, on line 6th, note that the public class PimpedOutTextbox:System.Web.UI.WebControls.TextBox a sentence that shows that the control is adding new behavior than the original text box control. In general, the control we create is still a text box control, but it inherits the properties and behavior of the existing text box control and has its own new properties.



Next, you will add two additional properties to the Pimedouttextbox control. We assume that when the user enters the text box or the text box has the focus, the color of the text box changes, so name the new property backcoloron; When the control loses focus, the color of the text box is named Backcoloroff.

Line 1:private Color _coloff;
Line 2: [Category ("appearance"), Description ("The background color while 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 while 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 of the assignment and access to the statement, I believe that everyone is familiar with. One thing to mention is that the category and Descriptiton properties of lines 2nd and 9th are a description of the Backcoloron and Backcoloroff two properties in the Properties window of the control. Note that we use the color class to make it easier to use the vs.net color selector instead of the hexadecimal value of the color.

Next, here is the more important part. In this new control, we will output the new content to the browser using a AddAttributesToRender () overload method. In which, a response to the onfocus and onblur events for the client is added. Also, note that when the control is created in Vs.net, the method is called automatically, so we can set the properties in it during design time.

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 Ten: _coloff = this. BackColor;
Line 11:}
Line 12:writer. AddAttribute ("OnBlur", "javascript:this.style.backgroundcolor=") + colortranslator.tohtml (coloff) + "';");
Line 13:}
Line 14:}
The purpose of line 3rd is to call the base class and inherit the properties of the original text box. The AddAttributesToRender method uses the HtmlTextWriter stream as a parameter. In lines 9th, 12th, the output of its clients is increased by calling the AddAttribute method of the HTML text stream. Two parameters are passed in, the first parameter is the HTML property, and the second is the value of the property. They go through the browser output and become <input type= "text" onblur= "JavaScript ..." > form.

Because browsers use hexadecimal colors, we use the ColorTranslator class to convert the. NET color type to the recognized color type in the browser (lines 7th and 12th). On line 8th, check that the _coloroff property is not assigned, and if it is not assigned, the Backcoloroff color is set to the back color of the original text box.

In line 5th, we examine whether the browser's type supports onfocus and onblur events, and adds a function of judgment by changing the properties of the control as it is designed to be vs.net Indesignmode:

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 line 4th of the above code, by determining if the HttpContext instance is null or NULL, the current is in vs.net design mode and the HTTP request is not responding. Next, we'll test the controls we've made.


First, we compile a good control project, and then, in the ASP.net project, we add just the controls. The method is to right-click the Add reference in WebApplication to select the DLL file in the control Library directory that you just compiled. Again in Vs.net's toolbox, add new items and select DLLs in the newly done Control Library directory, and you'll find more pimedouttextbox in the Toolbox than you've just done.



Next, drag the controls we made from the Toolbox onto the page. Note that this time the control's property page is automatically positioned in the Backcoloron property. This is because we set the Defaultproperty property before. Also note the descriptive text under this property, because the Description property is set. Then switch to HTML view and you'll see

<%@ Register tagprefix= "Lib" namespace= "Controllib" assembly= "Controllib"%>
This is due to the previous

[Assembly:tagprefix ("Controllib", "Lib")]
of the definition.

Then switch back to Design view and set the color of the text box control to gray, and you'll see that Backcoloroff is also set to the same color, because the Backcoloroff was not assigned before. Then change the background color of the text box, this will find that the value of Backcoloroff has not changed, because this time the value of Backcoloroff is not a null value (you can look at the above code). Next, set the background color of the text box to any color except white, and run the program. When the text box control receives the focus, the color of the text box is displayed in Backcoloron color, and when the text box loses focus, the color of the text box is displayed Backcoloroff.

If you want to step through the client's code, you can add debugger to the JavaScript statement you want to debug, such as

Javascript:debugger;this.style.backgroundcolor= ' Blue ';
When you run the program, you can monitor the related variables, such as input document.forms[0].all[1].name, through the monitoring window.

The above is just a brief introduction of how to create a custom control in asp.net, and I'm sure readers will be inspired. The program can be raised at Vs.net 2002,2003 for a trial run.