I have a server side control that embeds text boxes, validation and toolkit extenders. Some of the text boxes are created during postbacks as additional input fields. This works flawlessly if
a) I do not use the ValidatorCalloutExtender
b) do always full postbacks
But as soon as the control is embedded in an UpdatePanel the ValidatorCalloutExtenders break the javascript execution of the page it seems.
I made a little sample page to demonstrate the behavior:
TextBox1 is static and always validates correctly: no text -> press OK -> requiredfield error appears and validator callout extender appears
Now check the CheckBox and press OK again: some javascript error at line 3072
What Do I do wrong here? I mean creating controls like this is not much different than loading usercontrol dynamically or doesn't that work either with the toolkit?
(Btw.: I use the validators.dll and the tag mapping in the web.config)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title><script runat="server" type="text/C#">
protected void OnCheckChanged(object sender, EventArgs e)
{
CheckBox checkBox = sender as CheckBox;
this.CreateCheckBox = checkBox.Checked;
this.RecreateTextBox();
}
protected bool CreateCheckBox
{
get { return this.ViewState["CreateCheckBox"] != null ? (bool)this.ViewState["CreateCheckBox"] : false; }
set { this.ViewState["CreateCheckBox"] = value; }
}
protected void RecreateTextBox()
{
this.Panel1.Controls.Clear();
if (this.CreateCheckBox)
{
TextBox textBox = new TextBox();
textBox.ID = "TextBox2";
textBox.Text = "";
this.Panel1.Controls.Add(textBox);
RequiredFieldValidator requiredFieldValidator = new RequiredFieldValidator();
requiredFieldValidator.ID = "TextBox2Req";
requiredFieldValidator.ControlToValidate = "TextBox2";
requiredFieldValidator.ErrorMessage = "Required";
this.Panel1.Controls.Add(requiredFieldValidator);
ValidatorCalloutExtender validatorCalloutExtender = new ValidatorCalloutExtender();
validatorCalloutExtender.ID = "TextBox2ReqExt";
validatorCalloutExtender.TargetControlID = "TextBox2Req";
this.Panel1.Controls.Add(validatorCalloutExtender);
}
}
protected override void CreateChildControls()
{
base.CreateChildControls();
this.RecreateTextBox();
}
</script></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /><div>
Works: <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox><asp:RequiredFieldValidator ID="TextBox1Req" runat="server" ControlToValidate="TextBox1" ErrorMessage="Required"></asp:RequiredFieldValidator><ajaxToolkit:ValidatorCalloutExtender ID="TextBox1ReqExt" runat="server" TargetControlID="TextBox1Req"></ajaxToolkit:ValidatorCalloutExtender><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
Create TextBox: <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="OnCheckChanged" /><asp:Panel ID="Panel1" runat="server"></asp:Panel><br /><br /><br /><asp:Button ID="Button1" runat="server" Text="OK" CausesValidation="true" /></ContentTemplate></asp:UpdatePanel><asp:Button ID="Button2" runat="server" Text="DoPostBack" CausesValidation="false" /></div></form></body></html>