Focus lost on partial postback with UserControls inside UpdatePanel

Question

I have a bunch of user controls on a form inside an AJAX UpdatePanel, containing a couple of controls including a TextBox.

Each of these usercontrols makes up a field on a data entry form. Some of the fields have AutoPostBack turned on and fire an event which updates the value in another form field server-side.

However, when the partial postback returns and the calculated field is updated, the form focus is lost - the first field on the form gets focus back. Therefore the form is pretty useless for data entry.

I have seen workarounds that involve working out server-side which field to focus on next and using ScriptManager.SetFocus(), passing in the next UserControl in the form, but I can't get this to work with my usercontrols. This still feels like a hack anyhow, and it's disappointing that UpdatePanel doesn't just make this work.

Using ASP.NET 4.0, Visual Studio 2010.

score 2 · Accepted Answer · answered Jan 19 '11 at 19:51

Ok, I think your problem is that you are including everything inside the updatepanel, my approach would be to use updatepanels only for the controls that need to be updated (maybe you would need more than one), the updatepanels would need have UpdateMode=Conditional and triggered only by the control that affects the controls inside, the control that does the postback should be outside of the updatepanel, I'm posting an example that I've already tested and works fine.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
    <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True" 
                    ontextchanged="TextBox2_TextChanged"></asp:TextBox>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TextBox2" />
            </Triggers>
        </asp:UpdatePanel>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True" 
            ontextchanged="TextBox4_TextChanged"></asp:TextBox>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TextBox4" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>

As you can guess TextBox2 updates Label1 and Textbox4 updates Label2.

Thanks, this helps a lot. Apparently it works better to split them in different updatepanels. — Cerveser, Feb 20 '13 at 21:27
While this is a workaround, this doesn't solve for cases where the updating control must be in the UpdatePanel. This can be for design reasons or just the way the page works, but I've run into several cases where the children are the triggers and they can't be moved outside the UpdatePanel. — David R., May 06 '15 at 19:32

Focus lost on partial postback with UserControls inside UpdatePanel

1 Answers1

Linked