Saturday, January 05, 2008

asp.net 2.0 : TextBox User Control with TextChanged Event (Event Bubbling from user controls)

including a textbox in a user control can save a lot of messy code in a form, as well as encapsulate validation and other functionalities (such as ajax calendar functionality). A small challenge though, it's bubbling the textchanged event from the TextBox to the top

Here's a link to a sample website with an aspx page and the TextBox user control in it :

>> TextBox Changed Event in a user control sample

Code :

TextBox User Control :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TextBox.ascx.cs" Inherits="Controls_ReferenceData_ChiffresTextBox" %>
<asp:TextBox ID="TextBox1" runat="server" CssClass="champ" /><br />
<asp:RequiredFieldValidator ID="RequeiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="This Field is Required" Display="Dynamic" />



Code Behind :




using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Controls_ReferenceData_ChiffresTextBox : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{

}

public string Text
{
get { return this.TextBox1.Text; }
set { this.TextBox1.Text = value; }
}

public bool AutoPostBack
{
get { return TextBox1.AutoPostBack; }
set { TextBox1.AutoPostBack = value; }
}

#region "Other properties"
public bool EnabledRfv
{
get { return this.RequeiredFieldValidator1.Enabled; }
set { this.RequeiredFieldValidator1.Enabled = value; }
}


#endregion

protected override void OnInit(EventArgs e)
{
this.TextBox1.TextChanged += new EventHandler(TextBox1_TextChanged);
base.OnInit(e);
}

void TextBox1_TextChanged(object sender, EventArgs e)
{
OnBubbleTextChanged(e);
}

public event EventHandler BubbleTextChanged;

protected void OnBubbleTextChanged(EventArgs e)
{
if (BubbleTextChanged != null)
BubbleTextChanged(this, e);

}


}



 



For Implementation in an aspx page, here's what the code looks like:



Register tag




<%@ Register Src="Controls/DataEntryControls/TextBox.ascx" TagName="TextBox" TagPrefix="uc1" %>



 


Control's tag



<uc1:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnBubbleTextChanged="OnTextChanged" />



 



Code Behind




using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class TextBoxWithTextChange : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void OnTextChanged(object sender, EventArgs e)
{
Response.Write(this.TextBox1.Text);
}

}



in the code behind, we create the method OnTextChanged to handle the event. This sample I picked out from a blog, and added the possiblity to add properties. Sadly, I search and can't find it easily, so I prefered to post something similar, for more search results regarding the textchanged event bubbling from a user conrol subject.



The TextChanged event does not show in the list of events for the user control. something to think about, otherwise, this technique makes it easy to develop such a functionality.



Comments are welcome.

10 comments:

oudinia said...
This comment has been removed by the author.
oudinia said...
This comment has been removed by the author.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

this code was helpful, thank you.

Anonymous said...

Just want to say thank you, I have spent almost all day looking for a simple, straightforward explanation of event bubbling and I finally found it here.

r4 nds said...

That event-bubling was just fantastic......Thanx for the valuable information. This was just the thing I was looking for, keep posting. Will be visiting back soon.

Anonymous said...

Hey thank you very much.....

akd said...

displays the text twice

Unknown said...

Hi,The most popular and powerful HTML editors are Microsoft FrontPage and Macromedia DreamWeaver in Web Design Cochin. Free HTML editors are also available and can be downloaded from various Internet sites.Thanks.......