使用 UpdatePanel 中的 UserControls 将注意力集中在部分回发上 [英] Focus lost on partial postback with UserControls inside UpdatePanel

问题描述

我在 AJAX UpdatePanel 内的表单上有一堆用户控件，其中包含几个控件，包括一个 TextBox.

这些用户控件中的每一个都构成数据输入表单上的一个字段.某些字段已打开 AutoPostBack 并触发一个事件，该事件会在服务器端更新另一个表单字段中的值.

但是，当部分回发返回并更新计算字段时，表单焦点丢失 - 表单上的第一个字段重新获得焦点.因此，表单对于数据输入毫无用处.

我已经看到了一些解决方法，包括计算服务器端下一个要关注的字段并使用 ScriptManager.SetFocus()，在表单中传递下一个 UserControl，但我无法让它与我的用户控件一起使用.无论如何，这仍然感觉像是一个 hack，令人失望的是，UpdatePanel 并没有让这项工作发挥作用.

使用 ASP.NET 4.0、Visual Studio 2010.

解决方案

好的，我认为您的问题是您将所有内容都包含在更新面板中，我的方法是仅将更新面板用于需要更新的控件(也许您需要多个)，更新面板需要 UpdateMode=Conditional 并且仅由影响内部控件的控件触发，执行回发的控件应该在更新面板之外，我发布了一个示例，我'已经测试并且工作正常.

<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<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"><内容模板><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></内容模板><触发器><asp:AsyncPostBackTrigger ControlID="TextBox2"/></触发器></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"><内容模板><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></内容模板><触发器><asp:AsyncPostBackTrigger ControlID="TextBox4"/></触发器></asp:UpdatePanel><asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>

你可以猜到 TextBox2 更新 Label1，Textbox4 更新 Label2.

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.

解决方案

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.

这篇关于使用 UpdatePanel 中的 UserControls 将注意力集中在部分回发上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！