Web Controls and Pop Up Windows with ASP.Net 2.0

One of the first web controls that we developed with good reusability is a web control that pops up another window. This doesn't seem much, but does give more posibilites of what can then be done on the newly open window.

Well, to have a pop up window, we developed a image button, which can be used and is more user friendly. We also wanted to make it more possible to change the size of the pop up window.

private System.Web.UI.WebControls.ImageButton _imageBtn; //Button with image used to call pop-up page
private System.String _popUpLoc; //Location of the popup page
private System.Web.UI.WebControls.Unit _popUpPageWidth; //Width of the pop up page
private System.Web.UI.WebControls.Unit _popUpPageHeight; //Height of the pop up page

Next are the properties so we can change values during the design view. Most of which are obvious, so here is an example of one:

[Bindable(true)]//used for binding
[Category("Pop Up Window")] //in properties section "Pop Up Window"
[Description("The URL of the pop-up webpage")]//description of PagePopUp
[DefaultValue("")]//default value
[Localizable(true)]//allow multi-language
public virtual System.String PopUpURL
{
get
{
return this._popUpLoc; //returns a string representing the location of the image
}
set
{
this._popUpLoc = value; //set the string value for the location of the image button
}
}

etc... for the other properties you might want to set. Use EnsureChildControls(); for controls that are used on the page.

Next override the CreateChildControls:

protected override void CreateChildControls()
{
Controls.Clear(); //clear the controls before adding them

this._imageBtn = new System.Web.UI.WebControls.ImageButton();//declare image button with image on it
this._imageBtn.ID = "CalendarBtn";//set the id of the image button


Controls.Add(this._imageBtn);//add the image button to the child control collection
}

In the render control is where we add an attribute to the image button.

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
AddAttributesToRender(writer); //add HTML that needs to be render
/*
* Calls javascript to open a new window and send in the text box id
*
* this.PopUpURL is the page to pop open
* this.Page.Form.ClientID represents the page's form id eg:

* this.ClientID represents the web controls's ID eg:
* the height and width variables are used to set the dimensions of the browser
* the status= no, resizable= no, scrollbars=no, toolbar=no,location=no,menubar=no are used to remove usless items and fixate the window size
*
* Note: since during the page initialization the controls are developed before the page
* we had to place the _imageBtn.Attributes.Add(...) into the render method
* to prevent NullException error.
*
*/
_imageBtn.Attributes.Add("onclick", "window.open('" + this._popUpLoc
+ "?field=" + this.Page.Form.ClientID + "." + this.ClientID
+ "',null,'height=" + this._popUpPageHeight + ", width="
+ this._popUpPageWidth + ",status= no, resizable= no, scrollbars=no, toolbar=no, location=no, menubar=no ');");
this._imageBtn.RenderControl(writer);//render the image button
}