LogArchive
TAGS/WIKI
Comments
Messages
He/She's blog rss XNA
Photo
Friend
浪人ㄨ黑白 - 如何处理UpdatePanel中控件Autopostback时的焦点
进入相册>>
New:tlbb225于2010-09-05 07:27:47发布了评论:查看此日志
Online: 29/355 Since:2005-01-01(DD:2073) Your IP:38.107.191.89
Total: 34574448Visited/ 975Members/ 994Articles/ 1351comments/ 454Messages/ 114Photos.
如何处理UpdatePanel中控件Autopostback时的焦点 

/ 2009-10-08 / author:浪人 / from:本站原创 / 3 commends / 632 Views


设我们在页面上放置几个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;"; //给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判断以外任意控件的回发处理时。。 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/zhouxing_24/archive/2008/12/31/3666377.aspx
引用通告:
你可以随意复制/转发该文章,但禁止用于商业用途。如果你要引用该文章,您需要提供以下文章来源信息。
[Click to Copy] http://or2.com.cn/blogview.asp?logID=1065
[Click to Copy] 浪人ㄨ黑白-如何处理UpdatePanel中控件Autopostback时的焦点
[收藏本文] 你也可以直接收藏本文到你的收藏夹。
3 Treeview 无限分类 终极解决方案C#无与伦比的美丽 4 

评论列表
引用这个评论 浪人 于 2009-11-22 00:37 AM 发表评论:
在滴,博雅's blog 在首页的右边。
浪人 's小站: 浪人ㄨ黑白
签名:生长在〖三生石畔〗的绛珠草 等待着海枯石烂后的×鱼化石×
引用这个评论 博雅 于 2009-11-02 10:53 AM 发表评论:
http://www.manboya.cn/

我的链子,今天过来一看,怎么没了.
博雅 's小站:
签名:
引用这个评论 博雅 于 2009-11-02 10:53 AM 发表评论:
我的链接掉了.
博雅 's小站:
签名:

发表评论: 禁止表情 禁止UBB 禁止图片 识别链接 识关键字
ID:  PWD:  注册?  验证:  


Member center
username:
password:

register? sign up now!
Newly Top 5
/ Latest Logs
Google adsense