【2008年最后一次散300分】示例：如何避免UpdatePanel中控件Autopostback时的焦点
日期：2014-05-18 浏览次数：20458 次
【2008年最后一次散300分】示例：如何处理UpdatePanel中控件Autopostback时的焦点
假设我们在页面上放置几个TextBox，设置其AutoPostback为True，这样虽然能够处理TextChanged事件，但是最新的焦点失去了，用户需要重新用鼠标或者键盘去指定输入焦点，这样的用户体验很不好。所以，我们需要多写一行代码来重新设置焦点。
首先我们来解决获取Postback时客户端焦点问题，这是关键。由于这很有普遍性，我写成一个用户控件，使用时只要将用户控件拖入页面即可获得客户端焦点。用户控件的全部内容是：
这个用户控件内部只有一个HiddenField控件，它在第一次装载时将页面的Form控件的客户端事件onsubmit插入一句脚本，使得当页面回发时（执行theForm.submit()时）首先将当前的焦点(如果有的话)的id记录到这个HiddenField上。可以通过用户控件的属性ActiveClientID查询到这个返回值。
而在Updapanel内编程时，我们就需要这个ActiveClientID参数来准确地设置焦点，来弥补Updatanel缺少的这项保持焦点的功能。具体示例，可以在网站里贴入下面这个测试页面看看效果：
假设我们在页面上放置几个TextBox，设置其AutoPostback为True，这样虽然能够处理TextChanged事件，但是最新的焦点失去了，用户需要重新用鼠标或者键盘去指定输入焦点，这样的用户体验很不好。所以，我们需要多写一行代码来重新设置焦点。
首先我们来解决获取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;";
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})$"); // Regex("^[\u4e00-\u9fa50-9a-zA-Z]+$");
if (reg.Match(TextBox2.Text).Success)
{
this.Message1.Visible = false;
if (ActiveElementID1.ActiveClientID != string.Empty)
Page.SetFocus(ActiveElementID1.ActiveClientID);
}
else
{
this.Message1.Visible = true;
TextBox2.Focus();
}
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" T
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
