Aaron Li's Blog

Write it down before I forget

  Home  |   Contact  |   Syndication    |   Login
  30 Posts | 0 Stories | 21 Comments | 1 Trackbacks

News

Google

Archives

Other's Idea

Set Focus After Postback

 

To set the focus on a certain control after a page postback, we can either add a dynamic script javascript block; or set the SmartNavigation attribute to true in the @ Page directive in the .aspx file.

 

SmartNavigation is only supported by IE 5.5 browser, or later. It resets the focus and scroll position between post back, and  the user won't feel the whole screen flickering. However, it is said that from time to time it is not smart enough to cooperate well with javascript and CSS-Styles. Anyway, if your code runs only on IE and is not too complex, SmartNavigation is quite cute to use.

 

The following is the JavaScript way. The supposed scenario is, there are two dropdownlists, ddlCountry and ddlProvState. the autopostback porperty of ddlCountry is set to true; as a result, when the selected value is changed, a postback happens, and ddlProvState is bound to a new datasource and get the focus.

 

Step 1 - Declare variables in class

 

            protected string Focus = "";

            protected string ControlType = "";

 

Step 2 - Event Handler

 

            private void ddlCountry_SelectedIndexChanged(object sender, System.EventArgs e)

            {

                        Focus = "ddlProvState";

                        ControlType = "DropDownList";

            }

 

Step 3 - The javascirpt block

 

<script language="javascript">

                        var o = document.getElementById("<%= Focus %>");

            if (o != null) o.focus();

            if("<%= ControlType %>" == "TextArea") document.all["<%= Focus %>"].select();

</script>

 

We can embed above javascript in the HTML portion of the aspx page (not the code behind), before the the closing </form> tag. It would work fine.

 

Of course, we also can implement it through code behind by a method,

 

            private void CSBSetFocus()

            {

                        string strJS;

                        strJS="<script language='javascript'>" +

                                    "var o = document.getElementById('" + Focus.ToString() +"'); " +

                                    "if (o != null) o.focus(); " +

                                    "if('" + ControlType.ToString() + "' == 'TextArea') " +

                                    "document.all['" + Focus.ToString() +"'].select(); " +

                                    "</script>";

                        Page.RegisterStartupScript("CSB-focus-function", strJS);

            }

 

Step 4 - Call the method

 

            private void Page_PreRender(object sender, System.EventArgs e)

            {

                        CSBSetFocus();

            }

 

Done!

 

This works in both ASP.NET 1.0 and 2.0. For ASP.NET 2.0, there are other methods to maintain the focus after postback. We’ll discuss that another time.

 

 

posted on Monday, February 12, 2007 2:49 PM

Feedback

# re: Set Focus After Postback 5/22/2007 8:35 AM Talha Aziz
Useful Stuff !

# re: Set Focus After Postback 6/27/2008 8:08 AM Paramjeet
Hey,
Thanks ,i had done lot of search and not getting good solution due to other functionality but its working fine .

Paramjeet Kaur

# re: Set Focus After Postback 10/16/2008 4:00 PM Dilip Baboo
Enter the below code inside the
<form> </form> tags

<!-- script to reset the page focus after page postback -->
<script language="javascript">
var o = document.getElementById("");
o.focus();
</script>

It should NOT be in the <head></head> tags

this will keep the focus on the same element before the postback

this is handly for asp.net 1.0 users where functions like setfocus(control) does not exists.

Another cool feature this look like Ajax

Thanks
Dilip




# re: Set Focus After Postback 1/15/2009 3:09 PM Kartik
Useful Stuff !

But it's not working if we have any master page in the project.

If we create project with master page and add any aspx file with the reference of master page and then try this code is not working on that condition.

Can you please tell me what's wrong or is any things more require to run with master page.

I really need this answer as soon as possible please.

Thanks in advance


Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: