【2008年最后一次散300分】示例：如何避免UpdatePanel中控件Autopostback时的焦点-ASP.NET教程-爱易网页

【2008年最后一次散300分】示例：如何避免UpdatePanel中控件Autopostback时的焦点

日期：2014-05-18　浏览次数：20384 次

【2008年最后一次散300分】示例：如何处理UpdatePanel中控件Autopostback时的焦点
假设我们在页面上放置几个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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

【2008年最后一次散300分】示例：如何避免UpdatePanel中控件Autopostback时的焦点

相关资料更多>

推荐阅读更多>