本文介绍了一种在ASP.NET中保持客户端焦点的方法，通过自定义用户控件在页面回发后重新设置输入焦点，改善用户体验。该方法适用于使用或不使用UpdatePanel的情况。
假设我们在页面上放置几个TextBox，设置其AutoPostback为True，这样虽然能够处理TextChanged事件，但是最新的焦点失去了，用户需要重新用鼠标或者键盘去指定输入焦点，这样的用户体验很不好。所以，我们需要多写一行代码来重新设置焦点。
首先我们来解决获取Postback时客户端焦点问题，这是关键。由于这很有普遍性，我写成一个用户控件，使用时只要将用户控件拖入页面即可获得客户端焦点。用户控件的全部内容是：
这个用户控件内部只有一个HiddenField控件，它在第一次装载时将页面的Form控件的客户端事件onsubmit插入一句脚本，使得当页面回发时（执行theForm.submit()时）首先将当前的焦点(如果有的话)的id记录到这个HiddenField上。可以通过用户控件的属性ActiveClientID查询到这个返回值。
而在Updapanel内编程时，我们就需要这个ActiveClientID参数来准确地设置焦点，来弥补Updatanel缺少的这项保持焦点的功能。具体示例，可以在网站里贴入下面这个测试页面看看效果：
这里使用了一个很简单的功能，假设用户焦点离开TextBox的时候，我们需要首先使用一个很简单的正则来验证用户录入的是否正确。实际上，我们可以在后台编写任意复杂的验证功能，使用数据库甚至远程服务来进行验证，然后将结果实时显示在客户端。这里使用TextBox做演示，实际上稍加分辨你就可以看到这个用户控件的功能对于使用或者不使用UpdataPanel都是可行的，而且可以也可以使用在这里演示的TextBox的AutoPostback判断以外任意控件的回发处理时。。
首先我们来解决获取Postback时客户端焦点问题，这是关键。由于这很有普遍性，我写成一个用户控件，使用时只要将用户控件拖入页面即可获得客户端焦点。用户控件的全部内容是：
-
HTML code
-
<% @ Control Language = " C# " %> < script runat ="server" > protected void Page_PreRender(object sender, EventArgs e) { if ( ! IsPostBack) { var sc = this .Page.Form.Attributes[ " onsubmit " ]; if (sc == null ) sc = " return true; " ;
-
//给HTML的FROM标签添加onsubmit事件，这个事件是在按钮事件触发时发送的。用来保存当前鼠标焦点的控件ID，在这里就是BUTTON的ID this .Page.Form.Attributes[ " onsubmit " ] = string.Format( " document.getElementById('{0}').value=document.activeElement.id; " , this .HiddenField1.ClientID) + sc; } } public string ActiveClientID { get { return this .HiddenField1.Value; } } </ script > < asp:HiddenField ID ="HiddenField1" runat ="server" />
这个用户控件内部只有一个HiddenField控件，它在第一次装载时将页面的Form控件的客户端事件onsubmit插入一句脚本，使得当页面回发时（执行theForm.submit()时）首先将当前的焦点(如果有的话)的id记录到这个HiddenField上。可以通过用户控件的属性ActiveClientID查询到这个返回值。
而在Updapanel内编程时，我们就需要这个ActiveClientID参数来准确地设置焦点，来弥补Updatanel缺少的这项保持焦点的功能。具体示例，可以在网站里贴入下面这个测试页面看看效果：
-
HTML code
-
<% @ Page Language = " C# " %> <% @ Register Src = " ActiveElementID.ascx " TagName = " ActiveElementID " TagPrefix = " uc2 " %> < script runat ="server" > protected void TextBox2_TextChanged(object sender, EventArgs e) { Regex reg = new Regex( " ^[1-9]([0-9]{3})$ " );
-
if (reg.Match(TextBox2.Text).Success) { this .Message1.Visible = false ; if (ActiveElementID1.ActiveClientID != string.Empty) Page.SetFocus(ActiveElementID1.ActiveClientID);//把焦点根据保存的BUTTONID设置到BUTTON上 } else { this .Message1.Visible = true ; TextBox2.Focus();//设置TEXTBOX的输入焦点 } this .Message2.Visible = ! Message1.Visible; } </ script > <! 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 ></ title > </ head > < body > < form id ="form1" runat ="server" > < asp:ScriptManager ID ="ScriptManager1" runat ="server" /> < asp:UpdatePanel ID ="UpdatePanel1" runat ="server" UpdateMode ="Conditional" > < ContentTemplate > < asp:TextBox ID ="TextBox2" runat ="server" AutoPostBack ="true" OnTextChanged ="TextBox2_TextChanged" /> < asp:Label runat ="server" ID ="Message1" Visible ="false" Text ="验证失败，只能输入4位数字" SkinID ="Warning" /> < asp:Label runat ="server" ID ="Message2" Visible ="false" Text ="验证通过" SkinID ="Pass" /> < br /> < asp:TextBox ID ="TextBox3" runat ="server" /> < br /> < asp:TextBox ID ="TextBox4" runat ="server" /> < br /> < asp:TextBox ID ="TextBox5" runat ="server" /> </ ContentTemplate > </ asp:UpdatePanel > < br /> < br /> < br /> < asp:Button ID ="Button1" runat ="server" Text ="什么也不做，测试页面回发状态是否正确" /> < uc2:ActiveElementID ID ="ActiveElementID1" runat ="server" /> </ form > </ body > </ html >
这里使用了一个很简单的功能，假设用户焦点离开TextBox的时候，我们需要首先使用一个很简单的正则来验证用户录入的是否正确。实际上，我们可以在后台编写任意复杂的验证功能，使用数据库甚至远程服务来进行验证，然后将结果实时显示在客户端。这里使用TextBox做演示，实际上稍加分辨你就可以看到这个用户控件的功能对于使用或者不使用UpdataPanel都是可行的，而且可以也可以使用在这里演示的TextBox的AutoPostback判断以外任意控件的回发处理时。。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
