RadAjaxManager + Asp.net Validators: duplicated messages

[Daniel]

Hello,

I'm having trouble using the Asp.net validators with Telerik RadAjaxManager. The messages are "duplicated" after ajax requests.

I have an example to explain.

<telerik:RadScriptManager ID="telerik_ajax_manager" runat="server"/>

<telerik:RadAjaxLoadingPanel ID="ajax_loading_panel" Enabled="true" runat="server" MinDisplayTime="1000"         BackColor="#cccccc" Transparency="50"></telerik:RadAjaxLoadingPanel>

<asp:ValidationSummary ID="validator_summary" runat="server" />

<div id="div_test_1" runat="server" style="border-style:solid;border-color:Black;padding:20px;">
    Test 1:
    <asp:TextBox ID="txt_test_1" runat="server" OnTextChanged="txt_test_1_TextChanged" AutoPostBack="true"></asp:TextBox>
    <asp:Literal ID="ltl_test_1" runat="server"></asp:Literal>
    <asp:RequiredFieldValidator ID="rfv_test_1" runat="server" ControlToValidate="txt_test_1" Display="None"            ErrorMessage="RequiredFieldValidator Test 1"></asp:RequiredFieldValidator>
</div>
<br />
<div id="div_test_2" runat="server" style="border-style:solid;border-color:Black;padding:20px;">
    Test 2:
    <asp:TextBox ID="txt_test_2" runat="server" OnTextChanged="txt_test_2_TextChanged" AutoPostBack="true"></asp:TextBox>
    <asp:Literal ID="ltl_test_2" runat="server"></asp:Literal>
    <asp:RequiredFieldValidator ID="rfv_test_2" runat="server" ControlToValidate="txt_test_2" Display="None"            ErrorMessage="RequiredFieldValidator Test 2"></asp:RequiredFieldValidator>
</div>
<br />
<br />
<asp:Button ID="btn_submit" runat="server" OnClick="btn_submit_Click" Text="Submit" />

<telerik:RadAjaxManager ID="ajax_manager" runat="server" DefaultLoadingPanelID="ajax_loading_panel">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="txt_test_1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="div_test_1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="txt_test_2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="div_test_2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

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

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

protected void txt_test_1_TextChanged(object sender, EventArgs e)
{
    ltl_test_1.Text = txt_test_1.Text;
    txt_test_1.Text = null;
}

protected void txt_test_2_TextChanged(object sender, EventArgs e)
{
    ltl_test_2.Text = txt_test_2.Text;
    txt_test_2.Text = null;
}

The page has two updateable areas, each area has a textbox and a Asp.net validator, and each textbox triggers an ajax request updating your area.
If you type something in Test 1, its area will be updated, so if you click the submit button, the summary will show twice the message of the field Test 2 (which has not been updated). Each ajax generates another message.

I verified that this only occurs when the validator is inside an updateable area that is not being updated at this time. Also checked that when you are updating an area, the request create (then duplicating) all the validators that are located in other areas, when the validator is not in an updateable area, it is not created in ajax request.

What could I do?

[Andrey]

Hi,

The problem you are facing is caused by the fact that you have set the TextBox as an Ajax initiator, but instead you should set the div control.

The other problem is mentioned in this help topic, you should wrap the validation summary in a panel control and set this panel as an updated control in the Ajax manager.

At the end your code should look like this:

<telerik:RadAjaxLoadingPanel ID="ajax_loading_panel" Enabled="true" runat="server"
            MinDisplayTime="1000" BackColor="#cccccc" Transparency="50">
        </telerik:RadAjaxLoadingPanel>
        <asp:Panel ID="PanelSummary" runat="server">
            <asp:ValidationSummary ID="validator_summary" runat="server" />
        </asp:Panel>
        <div id="div_test_1" runat="server" style="border-style: solid; border-color: Black;
            padding: 20px;">
            Test 1:
            <asp:TextBox ID="txt_test_1" runat="server" AutoPostBack="true" CausesValidation="true"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfv_test_1" runat="server" ControlToValidate="txt_test_1"
                Display="None" ErrorMessage="RequiredFieldValidator Test 1"></asp:RequiredFieldValidator>
        </div>
        <br />
        <div id="div_test_2" runat="server" style="border-style: solid; border-color: Black;
            padding: 20px;">
            Test 2:
            <asp:TextBox ID="txt_test_2" runat="server" AutoPostBack="true" CausesValidation="true"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfv_test_2" runat="server" ControlToValidate="txt_test_2"
                Display="None" ErrorMessage="RequiredFieldValidator Test 2"></asp:RequiredFieldValidator>
        </div>
        <br />
        <br />
        <asp:Button ID="btn_submit" runat="server" Text="Submit" />
        <telerik:RadAjaxManager ID="ajax_manager" runat="server" DefaultLoadingPanelID="ajax_loading_panel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="div_test_1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="div_test_1" />
                        <telerik:AjaxUpdatedControl ControlID="PanelSummary" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="div_test_2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="div_test_2" />
                        <telerik:AjaxUpdatedControl ControlID="PanelSummary" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Additionally, please note that if you want the TextBoxes to fire the RequiredFieldValidatiors you need to set their CausesValidation property to true.

All the best,
Andrey
the Telerik team

[Daniel]

Hello,

I did some tests and it really works, but investigating, I saw that all areas are being updated on all ajax requests.

For example, typing something in the Test 1, should update:

<telerik:AjaxSetting AjaxControlID="div_test_1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="div_test_1" />
        <telerik:AjaxUpdatedControl ControlID="PanelSummary" />
    </UpdatedControls>
</telerik:AjaxSetting>

But observing the response of the ajax request updates all areas:

1|#||4|491|updatePanel|ctl00_MainContent_ctl00_MainContent_div_test_1Panel|...
|135|updatePanel|ctl00_MainContent_ctl00_MainContent_PanelSummaryPanel|...
|489|updatePanel|ctl00_MainContent_ctl00_MainContent_div_test_2Panel|...

[Daniel]

Hi,

I have not found a solution for this.
This would be a bug in Telerik's ajax? or am I doing something wrong?

[Daniel]

Anybody?

[Andrey]

Hello,

There should not be a problem with the suggested approach. Could you isolate the issue in a sample project and place it in some shared location so we could test/debug it.

Please note that we need to replicate and investigate what is causing the issue before considering it as bug.

Kind regards,
Andrey
the Telerik team