Create an ASP.NET Web Custom Control - RRR 2
Author: Qing Gu Gang prettywolf@vip.sina.com
This article describes the production of composite custom controls through a complete code to readers, including: custom properties, event processing, inter-control data transfer, etc.
The following is a login code, including: Username Entering TextBox, password Entering TextBox, submitting Button, resetting Button, and carries the above four items. The control class name is LogInctrl.
(Routine uses C #)
Using system;
Using system.Web.ui;
Using system.Web.ui.webcontrols;
Using system.componentmodel;
Using system.drawing;
Namespace Testlib
{
[DefaultProperty ("Backcolor"),
ToolboxData ("<{0}: loginctrl runat = server> ")]
Public class loginctrl: System.Web.ui.WebControls.WebControl
{
Private color _fontcolor = color.black; // Declaration font color variable
Private color _backcolor = color.white; // Declare control background variable
First, declare the child controls to be used in the composite control.
Private label lblusername = new label (); // Displays the "User Name" Label Control
Private label lblpassword = new label (); // Displays the "password" Label control
Private textbox txtusername = new textbox (); // Username Enter the TextBox control
Private textbox txtpassword = new textbox (); // password entered TextBox control
Private button submitbutton = new button (); // Submit the Button control
Private button clearbutton = new button (); // Reset button control
Private system.web.ui.webcontrols.panel pnlframe = new system.Web.ui.WebControls.Panel (); // Carries container Panel control for other controls
Of course, events to be used in the control must be declared, they will appear in the event bar of the properties box.
Public Event EventHandler SubmitonClick; // Statement Custom Control LoginCtrl Submission Event
Public Event EventHandler ClearonClick; // Declare a reset event for custom control LoginCtrl
Public loginctrl ()
{
The sub-controls and events just declared are initialized here.
// Initialization of the properties of the control
This.lblusername.text = "User Name:";
THIS.LBLPASSWORD.TEXT = "Password:";
THIS.TXTPASSWORD.TEXTMODE = System.Web.ui.WebControls.TextBoxMode.Password;
THIS.PNLFRAME.WIDTH = 240;
This.Pnlframe.height = 120;
This.PnLframe.BackColor = color.empty;
/ / Add Submit button Click the event submitbutton.text = "OK";
SubmitButton.Click = New EventHandler (this.Submitbtn_Click);
// Add a reset button Click event
ClearButton.Text = "Reset";
ClearButton.click = new eventhandler (this.clearbtn_click);
// Add the individual sub-controls to the LoginCtrl
This.Controls.add (this.submitbutton);
This.Controls.Add (this.clearbutton);
This.Controls.add (this.txtusername);
This.Controls.add (this.txtpassword);
This.Controls.add (this.lblusername);
This.Controls.add (this.lblpassword);
This.Controls.add (this.PnLframe);
}
Add or overload public properties that meet controls according to your needs
// Font Color Properties
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Color Forecolor
{
get
{
Return this._fontcolor;
}
set
{
THIS._FONTCOLOR = VALUE;
}
}
// Control Background Attribute
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Color Backcolor
{
get
{
Return THIS._BACKCOLOR;
}
set
{
THIS._BACKCOLOR = VALUE;
}
}
// User Name Properties
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public String Username
{
get
{
Return this.txtusername.text;
}
set
{
THIS.TXTUSERNAME.TEXT = VALUE;
}
}
// Password property
[Bindable (False),
Category ("APPEARANCE"),
DefaultValue (""), browsable (false)]
Public String Password
{
get
{
Return this.txtpassword.text;
}
set
{
this.txtpassword.text = value;
}
}
// Control width attribute
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Unit Width
{
get
{
Return this.PnLframe.width;
}
set
{
THIS.PNLFrame.width = value;
}
}
// Control height attribute
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Unit Height
{
get
{
Return this.Pnlframe.height;}
set
{
THIS.PNLFrame.height = value;
}
}
// Control Border Color Property
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Color Bordercolor
{
get
{
Return this.PnLframe.BorderColor;
}
set
{
This.PnLframe.BorderColor = value;
}
}
// Control Border Style Properties
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Border Borderstyle Border Border
{
get
{
Return this.Pnlframe.Borderstyle;
}
set
{
This.PnLframe.Borderstyle = value;
}
}
// Control Border Width Properties
[Bindable (False),
Category ("APPEARANCE"),
DEFAULTVALUE ("")]
Public Override Unit Borderwidth
{
get
{
Return this.PnLframe.Borderwidth;
}
set
{
This.Pnlframe.BorderWidth = value;
}
}
Below you will output the control, display it on the page.
///
/// Rendeze this control to the specified output parameter.
///
/// HTML writer to be written
Protected Override Void Render (HTMLTextWriter Output)
{
this.Pnlframe.Renderbegintag (Output); // Output Panel Control
// Draw a form in Panel
Output.addattribute (HTMLTextWriterattribute.Border, "0");
Output.addattribute (HTMLTextWriterattribute.cellpadding, "0");
Output.addattribute (HTMLTextwriterattribute.cellspacing, "0");
Output.addattribute (System.Web.ui.htmlTextWriterattribute.width, "100%");
Output.addattribute (System.Web.ui.htmlTextwriterattribute.Height, "100%");
Output.addattribute (HTMLTextWriterattribute.bgcolor, this._backcolor.name);
Output.renderbegintag (HTMLTextWritertag.Table);
Output.renderbegintag (HTMLTextWritertag.tr);
Output.renderbegintag (HTMLTextWritertag.td);
/ / Add label control in the table
This.lblusername.ForeColor = this._fontcolor;
THIS.LBLUSERNAME.RENDERCONTROL (OUTPUT); OUTPUT.RENDERENDTAG ();
Output.renderbegintag (HTMLTextWritertag.td);
// Add a TextBox control in the table
THIS.TXTUSERNAME.RENDERControl (Output);
Output.renderendtag ();
Output.renderendtag ();
Output.renderbegintag (HTMLTextWritertag.tr);
Output.renderbegintag (HTMLTextWritertag.td);
/ / Add label control in the table
this.lblpassword.forecolor = this._fontcolor;
This.lblpassword.renderControl (Output);
Output.renderendtag ();
Output.renderbegintag (HTMLTextWritertag.td);
// Add a TextBox control in the table
This.txtPassword.renderControl (Output);
Output.renderendtag ();
Output.renderendtag ();
Output.renderbegintag (HTMLTextWritertag.tr);
Output.addattribute (HTMLTextWriterattribute.Align, "Right");
Output.renderbegintag (HTMLTextWritertag.td);
// Add button control in the table
This.SubmitButton.RenderControl (Output);
Output.renderendtag ();
Output.addattribute (HTMLTextWriterattribute.Align, "Center");
Output.renderbegintag (HTMLTextWritertag.td);
// Add button control in the table
This.clearButton.RenderControl (Output);
Output.renderendtag ();
Output.renderendtag ();
Output.renderendtag ();
This.PnLframe.Renderendtag (Output);
}
How do you do when the button is clicked? This is an incident bubbling.
// Process the Submit button Click event
Private Void Submitbtn_Click (Object Sender, Eventargs E)
{
Eventargs e1 = new eventargs ();
IF (this.submitonclick! = null)
This.Submitonclick (this.Submitbutton, E1);
}
// Process the reset button Click event
Private void Clearbtn_Click (Object Sender, Eventargs E)
{
THIS.TXTPASSWORD.TEXT = "";
THIS.TXTUSERNAME.TEXT = "";
Eventargs e1 = new eventargs ();
IF (this.clearonclick! = NULL)
this.clearonclick (this.clearButton, E1);
}
}
}
Compile, OK!
This control has no actual use value. This example is made to show the reader's production method, it is also very simple, right?
