Using Client-side Script to Focus Controls in ASP.NET
In a web page contains a large number of controls (or virtually anything), it could be quite nasty to find out where were you all about after a postback or on finishing a subroutine. This article suggests a simple way to ‘bookmark’ the interested control by injecting dynamic client-scripting, which sets the focus on page load.
Here is a little sample on the idea. A web page with five buttons, all will do a postback. Focus varied depends on the button been clicked. Extend this idea, we can effectively bookmark anything, e.g. a large table required the use of scroll bar.
<!-- FocusContorl.aspx-->
<%@ Page language="c#" Codebehind="FocusContorl.aspx.cs" AutoEventWireup="false" Inherits="WebSamples.FocusContorl" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 104px; POSITION: absolute; TOP: 96px" runat="server"
Text="Button 1"></asp:Button>
<asp:Button id="Button2" style="Z-INDEX: 102; LEFT: 104px; POSITION: absolute; TOP: 152px" runat="server"
Text="Button 2"></asp:Button>
<asp:Button id="Button3" style="Z-INDEX: 103; LEFT: 104px; POSITION: absolute; TOP: 200px" runat="server"
Text="Button 3"></asp:Button>
<asp:Button id="Button4" style="Z-INDEX: 104; LEFT: 104px; POSITION: absolute; TOP: 248px" runat="server"
Text="Button 4"></asp:Button>
<asp:Button id="ButtonPostBack" style="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 328px"
runat="server" Text="PostBack"></asp:Button>
</form>
</body>
</HTML>
//FocusControl.aspx.cs
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 WebSamples
{
///
/// demostrates using dynamic client-script to set focus to a client control after a postback
///
public class FocusContorl : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.Button Button3;
protected System.Web.UI.WebControls.Button ButtonPostBack;
protected System.Web.UI.WebControls.Button Button4;
private void Page_Load(object sender, System.EventArgs e)
{
if (Request["callerControl"]!=null)
{
Label lb = new Label();
lb.Text = Request["callerControl"];
this.Controls.Add(lb);
SetFocusControl(Request["callerControl"]);
}
}
private void SetFocusControl(string controlName)
{
string dynamicScript = string.Format(@"",controlName);
this.RegisterStartupScript("Focus",dynamicScript);
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
///
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Button2.Click += new System.EventHandler(this.Button2_Click);
this.Button3.Click += new System.EventHandler(this.Button3_Click);
this.Button4.Click += new System.EventHandler(this.Button4_Click);
this.ButtonPostBack.Click += new System.EventHandler(this.ButtonPostBack_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void ButtonPostBack_Click(object sender, System.EventArgs e)
{
RedirectPage((Button)sender);
}
private void Button4_Click(object sender, System.EventArgs e)
{
RedirectPage((Button)sender);
}
private void Button3_Click(object sender, System.EventArgs e)
{
RedirectPage((Button)sender);
}
private void Button2_Click(object sender, System.EventArgs e)
{
RedirectPage((Button)sender);
}
private void Button1_Click(object sender, System.EventArgs e)
{
RedirectPage((Button)sender);
}
private void RedirectPage(Control caller)
{
Response.Redirect("http://localhost/WebSamples/FocusContorl.aspx?callerControl="+caller.ClientID);
}
}
}
