Have you ever used the Ajax ControlToolkit MaskedEdit control? Last week I found an unexpected behavior with it.
Page:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged"></asp:TextBox>
<cc1:MaskedEditExtender ID="TextBox1_MaskedEditExtender" runat="server"
CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder=""
CultureDateFormat="" CultureDatePlaceholder="" CultureDecimalPlaceholder=""
CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True"
Mask="99-99-99" TargetControlID="TextBox1" ClearMaskOnLostFocus="False"
MaskType="Number">
</cc1:MaskedEditExtender>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />
</div>
</form>
CodeBehind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = "101208";
}
protected void Button2_Click(object sender, EventArgs e)
{
}
This page has one edit with a MaskEditExtender and two buttons. On the first button click I change the value of the TextBox. On the second button click I do nothing. If I click the first button then the second, the TextChanged event of the edit will fire. Funny, right? Here is the reason.
Let’s say you have a mask like this: 99-99-99. To apply the value to the textbox you do:
TextBox1.Text = "101208";
The resulting value on the web page will be: 10-12-08. Here is the catch: The mask is applied to the textbox only after the page is rendered using JavaScript. So the value for the control in the ViewState is 101208 and the value in the page is 10-12-08. When another postback occurs the framwork will detect that the value in the page is different from the value in the ViewState therefore it fires the TextChanged event when in fact the value hasn’t changed.
You can avoid this behavior by setting the value to the TextBox already with masked value.
TextBox1.Text = "10-12-08";
I hope this can help someone out there.