首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

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

2012-04-20 
【2008年最后一次散300分】示例:如何处理UpdatePanel中控件Autopostback时的焦点假设我们在页面上放置几个Te

【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" Text="什么也不做,测试页面回发状态是否正确" />    <uc2:ActiveElementID ID="ActiveElementID1" runat="server" />    </form></body></html> 



这里使用了一个很简单的功能,假设用户焦点离开TextBox的时候,我们需要首先使用一个很简单的正则来验证用户录入的是否正确。实际上,我们可以在后台编写任意复杂的验证功能,使用数据库甚至远程服务来进行验证,然后将结果实时显示在客户端。这里使用TextBox做演示,实际上稍加分辨你就可以看到这个用户控件的功能对于使用或者不使用UpdataPanel都是可行的,而且可以也可以使用在这里演示的TextBox的AutoPostback判断以外任意控件的回发处理时。。

[解决办法]
谢谢分享.
新年快乐!
[解决办法]
学习.
[解决办法]
更细致的以人为本!!
[解决办法]
学习~
[解决办法]
学习了,,,sp1234真好人,,,与人分享自己的劳动成果
[解决办法]
呵呵!又见分享帖。
[解决办法]
太强了!
[解决办法]
学习了
[解决办法]
学习中 ...
[解决办法]
感谢分享.

热点排行