Required Field Validator not working on controls inside dynamically generated user control

Question

I have a user control containing few server controls like text boxes and drop down lists.

i have also added few required field validation controls. Normally these validation work fine, if I add the user control in design time.

But when I add the user control dynamically, the validation control just don’t work and page is posted back.

User Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="myUserControl.ascx.cs" Inherits="myUserControl" %>

<table cellpadding="0" cellspacing="0" >
<tr>
    <td>
        <asp:TextBox runat="server" ID="txtLastName" Width="80px" MaxLength="64" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtLastName" runat="server" ErrorMessage="Required Value" Display="None"></asp:RequiredFieldValidator>
        <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1"></ajaxToolkit:ValidatorCalloutExtender>
    </td>
    <td>
        <asp:TextBox runat="server" ID="txtFirstName" Width="80px" MaxLength="64" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="txtFirstName" runat="server" ErrorMessage="Required Value" Display="None"></asp:RequiredFieldValidator>
        <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2"></ajaxToolkit:ValidatorCalloutExtender>
    </td>
    <td>
    <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="DeleteButton_Click" CausesValidation="false" />
    </td>
</tr>
</table>

Containing Form Markup:

   <form id="form1" runat="server">
        <div>
            <div align="right" ><asp:Button ID="btnAdd" runat="server" Text="Add Order Line" onclick="btnAdd_Click" CausesValidation="false" /></div>
            <asp:PlaceHolder runat="server" ID="DynamicNameList" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
         </div>
        </form>

Containing Form Code:

   public partial class WebForm1 : System.Web.UI.Page, IDynamicControlContainer
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            foreach (string id in LoadControlIdList())
            {
                Create(id);
            }

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            Create(null);
        }

        public void Create(string id)
        {
            string targetId = id ?? Guid.NewGuid().ToString();
            myUserControl control = LoadControl("~/CustomControls/myUserControl.ascx") as myUserControl;
            control.ID = targetId;

            DynamicNameList.Controls.Add(control);
            SaveControlIdList();
        }

        public void Delete(Control control)
        {
            DynamicNameList.Controls.Remove(control);
            SaveControlIdList();
        }

        public void SaveControlIdList()
        {
            List<string> idList = new List<string>();
            foreach (Control control in DynamicNameList.Controls)
            {
                idList.Add(control.ID);
            }

            ViewState["IdList"] = idList;
        }

        public string[] LoadControlIdList()
        {
            var list = (List<string>)ViewState["IdList"];

            if (list == null)
            {
                return new string[0];
            }
            return list.ToArray();
        }

    }

    public interface IDynamicControlContainer
    {
        /// <summary>
        /// Deletes the specified control from the container
        /// </summary>
        /// <param name="control">The control.</param>
        void Delete(Control control);
    }
}

Answer 1

You need to use either the Page_Init or CreateChildControls events to do this. By the time Page_Load kicks in, the control tree is already loaded.