UpdatePanel中Textbox焦点丢失解决方法

Introduction

Atlas Updatepanel control is one of the most useful features of Atlas framework which provides partial page rendering and lets the page post back data to the server and render a specific area of the page instead of refreshing the whole page.

According to Microsoft, the Updatepanel provides the following benefits:

• It reduces the amount of page flicker that commonly occurs when data pages perform updates.
  
• It reduces the amount of data sent over the wire for page updates (because the entire page does not have to be re-rendered on every postback).
  
• It improves the user experience by making the user interface (UI) seem more immediate and responsive.

Beside its great functionality it has a seemingly trivial downside as well. After postback and partial rendering the page looses the focus status and it resets to the beginning of the page. This means it is not possible for the page to maintain the control focus or set the focus to another control by Focus method in Updatepanel post back event.

The example of this issue is that the following code does not work appropriately: 

‘NOTE: Textbox1 is nested in an Updatepanel and its AutoPostBack property set to true. Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) TextBox2.Text = TextBox1.Text TextBox2.Focus() End Sub 

Solution

To fix this issue I found the best way is using “focus” method in Javascript and the following function works instead of Focus method of a Textbox.

Public Sub MySetFocus (ByRef TBox As TextBox) Dim focusJS As String = "setTimeout(""$('" & TBox.ClientID & "').focus(); "", 100);" ClientScript.RegisterStartupScript(Me.GetType, "focusJS", focusJS, True) End Sub 

Why ClientID?

May be you will ask why I used ClientID in the MySetFocus function. The reason to use this property of the control is that the control IDs will be unpredictable in the case of using Master page. By using the Master page in ASP.Net 2, the controls at the run time will have different name form the design time. The new name will include the name of the ContentHolder and some other prefixes which makes it very difficult or impossible to predict. Fortunately .Net  framework returns this rather unreadable ID as the value of ClientID property of each control.

Example:

The following code includes 3 Textboxes in which the third Textbox always includes the content of the Textbox1 plus the content of Textbox2. After typing in the Textbox1 the cursor will go to the Textbox2 and then goes to the Textbox3. All the three Textboxes nested in an Updatepanel with Enabled partial rendering; also, AutoPostBack property of the Textbox1 and Textbox2 has been set to TRUE.

<script runat="server"> 

 Public Sub MySetFocus(ByRef TBox As TextBox) Dim focusJS As String = "setTimeout(""$('" & TBox.ClientID & "').focus(); "", 100);" ClientScript.RegisterStartupScript(Me.GetType, "focusJS", focusJS, True) End Sub Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) TextBox3.Text = TextBox1.Text & TextBox2.Text MySetFocus(TextBox2) TextBox3.Focus() End Sub

 Protected Sub TextBox2_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) TextBox3.Text = TextBox1.Text & TextBox2.Text
            </script> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <cc1:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"> </cc1:ScriptManager> <cc1:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" Width="56px" OnTextChanged="TextBox1_TextChanged"></asp:TextBox> & <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True" Width="48px" OnTextChanged="TextBox2_TextChanged"></asp:TextBox> = <asp:TextBox ID="TextBox3" runat="server" BackColor="#FFE0C0" Width="72px"></asp:TextBox> </ContentTemplate> </cc1:UpdatePanel> </asp:Content> 

References:

This article is a solution which my friend Peter Vats and I found as a  fix for the problem of losing focus in the Atlas Updatepanel postback event and I should mention the following Asp.Net forums as the main resource for this article.

• http://forums.asp.net/
• http://atlas.asp.net/docs/Walkthroughs/GetStarted/UpdatePanel.aspx