Tuesday, February 22, 2011

Control Focus Is Lost After AutoPostBack

When you press the TAB key on an ASP.NET Web Server control, the Web page is posted back to the Web server. After the operation is complete, the focus is not set to any control. You expect the focus to be set to the next control.

This problem occurs because the AutoPostBack property of the control is set to True.


This behavior is by design.


If the AutoPostBack property is set to True, postback occurs when you press ENTER or when the control loses the focus after the contents are modified.

To work around this behavior:
  1. In the HTML view of WebForm1.aspx, replace the existing code with the following:

    Visual C# .NET Code

    <%@ Page Language="C#" AutoEventWireup="false" Codebehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <body>
      <form id="Form1" method="post" runat="server">
  <asp:Label id="Label1" runat="server" style="LEFT: 10px; POSITION: absolute; TOP: 20px">Label</asp:Label>
  <asp:textbox id="TextBox1" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 23px"></asp:textbox>
  <asp:Label id="Label2" runat="server" style="LEFT: 11px; POSITION: absolute; TOP: 54px">Label</asp:Label><asp:textbox id="TextBox2" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 58px"></asp:textbox>
  <asp:Label id="Label3" runat="server" style="LEFT: 12px; POSITION: absolute; TOP: 95px">Label</asp:Label><asp:textbox id="TextBox3" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 96px"></asp:textbox>
  <asp:Button id="Button1" runat="server" Text="Button" style="LEFT: 85px; POSITION: absolute; TOP: 136px"></asp:Button>
        <script language="javascript">
   document.all["<%= Focus %>"].focus();
   if("<%= ControlType %>" == "TextArea")
    document.all["<%= Focus %>"].select();
  </script>
 </form>
   </body>
</HTML>
    Visual Basic .NET Code

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication11.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <body>
      <form id="Form1" method="post" runat="server">
  <asp:Label id="Label1" runat="server" style="LEFT: 10px; POSITION: absolute; TOP: 20px">Label</asp:Label>
  <asp:textbox id="TextBox1" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 23px"></asp:textbox>
  <asp:Label id="Label2" runat="server" style="LEFT: 11px; POSITION: absolute; TOP: 54px">Label</asp:Label><asp:textbox id="TextBox2" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 58px"></asp:textbox>
  <asp:Label id="Label3" runat="server" style="LEFT: 12px; POSITION: absolute; TOP: 95px">Label</asp:Label><asp:textbox id="TextBox3" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 96px"></asp:textbox>
  <asp:Button id="Button1" runat="server" Text="Button" style="LEFT: 85px; POSITION: absolute; TOP: 136px"></asp:Button>
  <script language="javascript">
   document.all["<%= Focus %>"].focus();
   if("<%= ControlType %>" == "TextArea")
    document.all["<%= Focus %>"].select();
  </script>
      </form>
   </body>
</HTML>
  2. In Solution Explorer, right-click WebForm1.aspx, and then click View Code.
  3. In the code-behind class, replace the existing code with the following:

    Visual C# .NET Code

    using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebApplication22
{
 public class WebForm1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.Label Label1;
  protected System.Web.UI.WebControls.TextBox TextBox1;
  protected System.Web.UI.WebControls.Label Label2;
  protected System.Web.UI.WebControls.TextBox TextBox2;
  protected System.Web.UI.WebControls.Label Label3;
  protected System.Web.UI.WebControls.TextBox TextBox3;
  protected System.Web.UI.WebControls.Button Button1;
  protected string Focus;
  protected string ControlType;

  private void Page_Load(object sender, System.EventArgs e)
  {
   Focus = "TextBox1";
   ControlType = "TextArea";
  }

  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   InitializeComponent();
   base.OnInit(e);
  }
  
  private void InitializeComponent()
  {    
   this.TextBox1.TextChanged += new System.EventHandler(this.TextBox1_TextChanged);
   this.TextBox2.TextChanged += new System.EventHandler(this.TextBox2_TextChanged);
   this.TextBox3.TextChanged += new System.EventHandler(this.TextBox3_TextChanged);
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion

  private void TextBox1_TextChanged(object sender, System.EventArgs e)
  {
   Focus = "TextBox2";
   ControlType = "TextArea";
  }
  
  private void TextBox2_TextChanged(object sender, System.EventArgs e)
  {
   Focus = "TextBox3";
   ControlType = "TextArea";
  }
  
  private void TextBox3_TextChanged(object sender, System.EventArgs e)
  {
   Focus = "Button1";
   ControlType = "Button";
  }
 }
}
    Visual Basic .NET Code

    Public Class WebForm1
   Inherits System.Web.UI.Page
   Protected WithEvents Label1 As System.Web.UI.WebControls.Label
   Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
   Protected WithEvents Label2 As System.Web.UI.WebControls.Label
   Protected WithEvents TextBox2 As System.Web.UI.WebControls.TextBox
   Protected WithEvents Label3 As System.Web.UI.WebControls.Label
   Protected WithEvents TextBox3 As System.Web.UI.WebControls.TextBox
   Protected WithEvents Button1 As System.Web.UI.WebControls.Button
   Protected Focus As String
   Protected ControlType As String

#Region " Web Form Designer Generated Code "

   'This call is required by the Web Form Designer.
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

   End Sub

   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
      'CODEGEN: This method call is required by the Web Form Designer
      'Do not modify it using the code editor.
      InitializeComponent()
   End Sub

#End Region

   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      Focus = "TextBox1"
      ControlType = "TextArea"
   End Sub
   Private Sub TextBox1_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged
      Focus = "TextBox2"
      ControlType = "TextArea"
   End Sub

   Private Sub TextBox2_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TextBox2.TextChanged
      Focus = "TextBox3"
      ControlType = "TextArea"
   End Sub

   Private Sub TextBox3_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TextBox3.TextChanged
      Focus = "Button1"
      ControlType = "Button"
   End Sub
End Class
  4. On the Build menu, click Start to view WebForm1.aspx in the browser.
  5. Type text in the text box, and then press the TAB key. The focus is set to the next control after the post back operation.
Back to the top

Steps to Reproduce the Behavior


  1. Create a new ASP.NET Web Application project. By default, WebForm1.aspx is created.
  2. In the HTML view of WebForm1.aspx, replace the existing code with the following code:

    Visual C# .NET Code

    <%@ Page Language="C#" AutoEventWireup="false" Codebehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <body>
      <form id="Form1" method="post" runat="server">
  <asp:Label id="Label1" runat="server" style="LEFT: 10px; POSITION: absolute; TOP: 20px">Label</asp:Label>
  <asp:textbox id="TextBox1" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 23px"></asp:textbox>
  <asp:Label id="Label2" runat="server" style="LEFT: 11px; POSITION: absolute; TOP: 54px">Label</asp:Label><asp:textbox id="TextBox2" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 58px"></asp:textbox>
  <asp:Label id="Label3" runat="server" style="LEFT: 12px; POSITION: absolute; TOP: 95px">Label</asp:Label><asp:textbox id="TextBox3" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 96px"></asp:textbox>
  <asp:Button id="Button1" runat="server" Text="Button" style="LEFT: 85px; POSITION: absolute; TOP: 136px"></asp:Button>
      </form>
   </body>
</HTML>
    Visual Basic .NET Code

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication11.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <body>
      <form id="Form1" method="post" runat="server">
  <asp:Label id="Label1" runat="server" style="LEFT: 10px; POSITION: absolute; TOP: 20px">Label</asp:Label>
  <asp:textbox id="TextBox1" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 23px"></asp:textbox>
  <asp:Label id="Label2" runat="server" style="LEFT: 11px; POSITION: absolute; TOP: 54px">Label</asp:Label><asp:textbox id="TextBox2" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 58px"></asp:textbox>
  <asp:Label id="Label3" runat="server" style="LEFT: 12px; POSITION: absolute; TOP: 95px">Label</asp:Label><asp:textbox id="TextBox3" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 96px"></asp:textbox>
  <asp:Button id="Button1" runat="server" Text="Button" style="LEFT: 85px; POSITION: absolute; TOP: 136px"></asp:Button>
      </form>
   </body>
</HTML>
  3. On the Debug menu, click Start to run the project. 
SOLUTION IN ASP.NET 3.5 SP1
--------------------------------
In the HTML view of DEFAULT.ASPX, replace the existing code with the following:

Visual C# .NET Code

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label id="Label1" runat="server" style="LEFT: 10px; POSITION: absolute; TOP: 20px">Label</asp:Label>
  <asp:textbox id="TextBox1" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 23px"></asp:textbox>
  <asp:Label id="Label2" runat="server" style="LEFT: 11px; POSITION: absolute; TOP: 54px">Label</asp:Label>
        <asp:textbox id="TextBox2" runat="server" AutoPostBack="True" 
            style="LEFT: 85px; POSITION: absolute; TOP: 58px" 
            ontextchanged="TextBox2_TextChanged1"></asp:textbox>
  <asp:Label id="Label3" runat="server" style="LEFT: 12px; POSITION: absolute; TOP: 95px">Label</asp:Label><asp:textbox id="TextBox3" runat="server" AutoPostBack="True" style="LEFT: 85px; POSITION: absolute; TOP: 96px"></asp:textbox>
  <asp:Button id="Button1" runat="server" Text="Button" style="LEFT: 85px; POSITION: absolute; TOP: 136px"></asp:Button>
        
<script language="javascript">
   document.all["<%= Focus %>"].focus();
   if("<%= ControlType %>" == "TextArea")
    document.all["<%= Focus %>"].select();
  </script>

    </div>
    </form>
</body>
</html>
  1. In Solution Explorer,  right-click DEFAULT.ASPX  and then click View  Code.
    2. 

  2. In the code-behind class, replace the existing code  with     the  following: 
    

    
Visual C# .NET Code 
    3. 

  3. using System;
    
using System.Configuration;
    
using System.Data;
    
using System.Linq;
    
using System.Web;
    
using System.Web.Security;
    
using System.Web.UI;
    
using System.Web.UI.HtmlControls;
    
using System.Web.UI.WebControls;
    
using System.Web.UI.WebControls.WebParts;
    
using System.Xml.Linq;
    

    
public partial class _Default : System.Web.UI.Page 
    
{
    
    //protected System.Web.UI.WebControls.Label Label1;
    
    //protected System.Web.UI.WebControls.TextBox TextBox1;
    
    //protected System.Web.UI.WebControls.Label Label2;
    
    //protected System.Web.UI.WebControls.TextBox TextBox2;
    
    //protected System.Web.UI.WebControls.Label Label3;
    
    //protected System.Web.UI.WebControls.TextBox TextBox3;
    
    //protected System.Web.UI.WebControls.Button Button1;
    
    protected string Focus;
    
    protected string ControlType;
    

    
        private void Page_Load(object sender, System.EventArgs e)
    
        {
    
          //  if (!IsPostBack)
    
           // {
    
                Focus = "TextBox1";
    
                ControlType = "TextArea";
    
            //}
    
        }
    

    
        #region Web Form Designer generated code
    
        override protected void OnInit(EventArgs e)
    
        {
    
            InitializeComponent();
    
            base.OnInit(e);
    
        }
    
        
    
        private void InitializeComponent()
    
        {    
    
            this.TextBox1.TextChanged += new System.EventHandler(this.TextBox1_TextChanged);
    
            this.TextBox2.TextChanged += new System.EventHandler(this.TextBox2_TextChanged);
    
            this.TextBox3.TextChanged += new System.EventHandler(this.TextBox3_TextChanged);
    
            this.Load += new System.EventHandler(this.Page_Load);
    
        }
    
        #endregion
    

    
        private void TextBox1_TextChanged(object sender, System.EventArgs e)
    
        {
    
            Response.Write("abc.d.");
    
            Focus = "TextBox2";
    
            ControlType = "TextArea";
    
            TextBox2.Focus();
    
            Response.Write("abc..");
    
        }
    
        
    
        private void TextBox2_TextChanged(object sender, System.EventArgs e)
    
        {
    
            Focus = "TextBox3";
    
            ControlType = "TextArea";
    
            TextBox3.Focus();
    
           
    
        }
    
        
    
        private void TextBox3_TextChanged(object sender, System.EventArgs e)
    
        {
    
            Focus = "Button1";
    
            ControlType = "Button";
    
            Button1.Focus();
    
        
    
        }
    
        protected void TextBox2_TextChanged1(object sender, EventArgs e)
    
        {
    

    
        }
    
}
    

    4. 

  4. On the Build  menu, click     Start to view WebForm1.aspx in the  browser.
    5. 

  5. Type text in the text box, and then press the TAB key.  The      focus is set to the next control after the post back operation.
    

    

    6. 

For additional information, 

visit the following Microsoft     Developer Network (MSDN) Web site:


TextBox.AutoPostBack  Property

http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.autopostback(vs.71).aspx              (http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.autopostback(vs.71).aspx)          















Posted by



at







































No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)