multiple updatepanel

Question

I'm just starting on stackoverflow, as writer at least... I'd appreciate your help on some issues that I ran into regarding AJAX. First, I've implemented AJAX before at work but only on basic stuffs such as an UpdatePanel refreshed by a button_onclick. But now I need to implement multiple UpdatePanel which are refreshed by multiple ways.

I have simplified my HTML code, but basically it looks like:

<script type="text/javascript">
    function mostrarDatosSolicitante() {
        var nroDoc = document.getElementById('<%=txtDocumento.ClientID%>').value;

        if (nroDoc != "") {
            __doPostBack('<%=up1.ClientID%>', '');
        }
    }        
</script>
<table>
    <tr>
        <td>
            <b>Documento </b>
        </td>
        <td>
            <asp:TextBox runat="server" id="txtDoc" 
                         onblur="mostrarDatosSolicitante()"/>                    
        </td>
        <td>
            <asp:Button runat="server" id="btnConfirmar" 
                        Text="Confirmar" />
        </td>
    </tr>            
</table>
<asp:ScriptManager ID="ScriptManager1" runat="server" 
                   EnablePartialRendering="True" />
    <asp:UpdatePanel ID="up1" runat="server" 
                     OnLoad="refreshUP1" UpdateMode="Conditional">            
        <ContentTemplate>

            <!--some stuff-->

        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="up2" runat="server" 
                     OnLoad="refreshUP2" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnConfirmar" />
        </Triggers>
        <ContentTemplate>  

                <!--some stuff 2-->

            <asp:UpdatePanel ID="up3" runat="server" 
                             OnLoad="refreshUP3" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ddlTipoConvInt" />
                </Triggers>
                <ContentTemplate>

                    <!--some stuff 3-->

                </ContentTemplate>
            </asp:UpdatePanel>

        </ContentTemplate>
    </asp:UpdatePanel>
</div>

And my code behind looks like:

protected void refreshUP1(object sender, EventArgs e)
{
    //do something
}
protected void refreshUP2(object sender, EventArgs e)
{
    //do something
}
protected void refreshUP3(object sender, EventArgs e)
{
    //do something
}

The issue I need to solve is when I leave the textbox, then the javascript is fired refreshing the updatepanel up1 firing the method 'refreshUP1'. BUT in my case, all of the updatepanels are being refreshed, at least methods 'refreshUP2' and 'refreshUP3' run, causing an undesired behaviour...

Any approach will be welcome!!!

Answer 1

This is caused by the OnLoad event.

You must understand that, no matter if the Postback is Async, all control on the pages are loaded and go through a life-cycle. Basicaly, the difference with an UpdatePanel is that only it's content is returned on the page on AsyncPostBack.

You could look at this for more information : Asynchronous and synchronous postback in ASP.NET

To do what you want to do, you should not link the refreshUP subs to the OnLoad event. The solution I use often is to link each of them to a hidden button's click event that I set as a AsyncPostBackTrigger.