The first person who can help me fix the following problem will get a free Pearson Vue MCP voucher as a little "thank you" present:

I use a RequiredFieldValidator together with a ValidatorCalloutExtender. Both are generated at run time by a custom field type (derived from BoundField) that I use inside a DetailsView. The purpose of this custom field type is to automatically generate some things that I use often in my application, so that I don't have to create template fields whenever I need such common things like validation or multiline textboxes.

This works until I put the DetailsView which uses my field type inside an UpdatePanel. When I use it in an UpdatePanel, the code for the validator generated during the postback does not set the validators attributes. This causes an error in the client side code of the ValidatorCalloutExtender, because it accesses the controltovalidate attribute of the validator, which is then undefined.

I've tried to solve this problem for several days now, but without success. So far I think the following is causing the problem: The RequiredFieldValidator calls "AddAttributesToRender" to write its attributes (like controltovalidate) to the output stream. AddAttributesToRender calls AddExpandoAttribute, and this method uses a page.ClientScript.RegisterExpandoAttribute call to generate some JavaScript code that should set the attribute on the client. However, because of some problem that I could not yet identify, this JavaScript code is either not generated, not transfered back with the PostBack, or not executed on the client. The attribute values are never set. Therefore, controltovalidate is undefined after the callback, I get a JavaScript error and my validators don't work any more.

I have created a small ASP .NET web site that reproduces the problem. You can download it from http://blog.outofcoffeeexception.de/downloads/AjaxValidatorProblem.zip.

Please help, I have no idea how I could fix this problem.

The first person who finds a clean fix for my problem  (I want something I could use in production code, no dirty hacks or something like that ;) ) and posts it as reply to this forum will get a Pearson Vue MCP voucher from me. This voucher will expire on February 28th and is a "not for resale" voucher which I got for passing some beta exam. The fix must also work on my "real" project, not just on the demo I posted here.

After many hours of debugging and analysing what's going on beind the scenes with .NET Reflector (this tool is a must have, it's really great and helped me often), I finally found the solution for my problem.

Symptoms
Validation controls which where created in code and inside of an UpdatePanel don't work after a postback. All ExpandoAttributes of these controls are undefined after the postback. The problem does not occur when xhtmlconformance of the ASP .NET web site is set to "legacy".

Cause
In XHTML documents, custom attributes are not allowed until they are defined in an xml schema and have their own custom namespace. Therefore, ASP .NET uses JavaScript to set these attributes when ASP .NET is configured to render XHTML compliant (which is the default). JavaScript code which is used inside an UpatePanel has to be registered with the ASP.NET Ajax Script Manager, so that the script gets executed during a partial rendering postback. ASP .NET validation controls where created before ASP .NET Ajax existed, so they don't know anything about the ScriptManager and they don't register their scripts. ASP .NET Ajax has it's own version of these validation controls which are compatible to partial rendering. When validation controls are defined declaratively (in the asmx file), they are automatically mapped to the (compatible) ASP .NET Ajax versions of the validation controls. This mapping does not work for controls which are created in code. Therefore, validation controls which were created in code won't work after a partial rendering postback inside of an UpatePanel.

Resolution
Instead of creating ASP .NET validation controls from the System.Web.UI namespace, create ASP .NET Ajax validation controls from the System.Web.UI.Compatibility namespace. This namespace contains ASP .NET Ajax compatible versions of every validation control.

References
http://ajax.asp.net/docs/mref/N_System_Web_UI_Compatibility.aspx

Supposedly a patch is going to be coming out for ASP.NET to allow the validators to work with UpdatePanels.  In the meantime, check this out:

 http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx

I'm having a problem with the AJAX ValidatorCalloutExtender but only in Internet Explorer -- it works in Firefox.  Simple form with asp text boxes, a dropdown and 2 radiolist buttons.  All fields have use the RequiredFieldValidator and the ValidatorCalloutExtender but the ValidatorCalloutExtender does not popup the extender for the radio buttons.  I added InitialValue="" to the RequiredFieldValidator and extender still doesn't show.  Also, the RequiredFieldValidator prohibits the form from being submitted if a radio button is not selected.  The code for one radio button is below.

So strange that the form works perfectly in Firefox and not IE7.

Any help greatly appreciated!!!

Dave.

    <asp:Label ID="lblnewletteroptin" CssClass="labels" runat="server" Text="I would like to recieve 'Whiteboard' our popular newsletter" meta:resourcekey="lblnewletteroptin"></asp:Label>
    <br /><asp:RadioButtonList ID="fsAgreedContactInfoUsage" runat="server" Font-Size="11px" RepeatColumns="2">
        <asp:ListItem Text="Yes" Value="Yes" meta:resourcekey="Yes"></asp:ListItem>
        <asp:ListItem Text="No" Value="No" meta:resourcekey="No"></asp:ListItem>
    </asp:RadioButtonList>
    <asp:RequiredFieldValidator runat="server" ID="InfoUsageReq"
        ControlToValidate="fsAgreedContactInfoUsage"
        Display="None"
        ErrorMessage="<b>Required Field Missing</b><br />Yes or No required." 
        meta:resourceKey="InfoUsageMissing"
        InitialValue="" />
    <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="InfoUsageReqE"
        TargetControlID="InfoUsageReq" width="140px" WarningIconImageUrl="images/error.png"
        HighlightCssClass="validatorCalloutHighlight" />