JS触发服务端控件回发以及触发AJAX.NET控件回发的整理

1、服务端控件

后台注册下客户端的回发事件

例子1：

this.Page.ClientScript.GetPostBackEventReference(控件ID, string.Empty);

例子2：

this.bt_refresh.Attributes["click"] = this.Page.ClientScript.GetPostBackEventReference(this, " ");

前端JS函数的调用

__doPostBack('<%= bt_refresh.ClientID %>', '');

比如asp:Button就会触发按钮默认的服务端的onclick事件！

2、AJAX.NET控件

1）动态刷新

function test()

{

var prm = Sys.WebForms.PageRequestManager.getInstance();

alert('<%= bt_refresh.ClientID %>');

prm._doPostBack('<%= bt_refresh.ClientID %>', '');

}

2)AJAX刷新

　　这里使用了ClientScript.GetPostBackEventReference，最终生成的前台代码如下：

function doRefresh() {
__doPostBack('pnlTime','');
}

　　这样也能达到我们的目的。

　　而这种方式相应的后台代码如下：

public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblTime.Text = DateTime.Now.ToString("hh:mm:ss");
        }
    }

　　表明该种实现方式其实是利用了即使是异步postback，也会触发页面的完整生命周期的原理。

　　虽然这种方式在简单情形下很有效，但也存在一个很严重的弊端：没有对应的处理回发事件的地方，像上面的例子就只能在Page_Load里处理。如果一个页面只有一个按钮会引起回发，那么我们也完全可以不用设置该按钮的OnClick事件，而在Page_Load等中进行处理。但是如果很多按钮呢，映射到上面的例子：如果还需要点击div显示完整的日期呢？这种方式就捉襟见肘了。

　　这时候我想到了从UpdatePanel入手:如果UpdatePanel自身能处理回发事件就好了。于是一个自定义的UpdatePanel产生了：

namespace MyControls
{
    public delegate void PostBack(string source);
    public class MyUpdatePanel : UpdatePanel, IPostBackEventHandler
    {
        public static object PostBackObj = new object();
        public event PostBack PostBack
        {
            add
            {
                Events.AddHandler(PostBackObj, value);
            }
            remove
            {
                Events.RemoveHandler(PostBackObj,value);
            }
        }
        #region IPostBackEventHandler Members

        public void RaisePostBackEvent(string source)
        {
            if( Events[PostBackObj] != null)
            {
                var handler = (MyControls.PostBack) Events[PostBackObj];
                handler(source);
            }
        }

        #endregion
    }

MyUpdatePanel 不仅具有UpdatePanel的所有功能，还能够处理回发事件。这样实现点击div显示完整的日期就很容易了。

再前部注册下控件

<%@ Register Assembly="程序集" Namespace="MyUpdatePanel 所在命名空间" TagPrefix="asp" %>

<body>
<script type="text/javascript">
    function showFullTime()
    {
   <%=ClientScript.GetPostBackEventReference(pnlTime, "click") %>;
    }
    function refreshTime()
    {
        <%=ClientScript.GetPostBackEventReference(pnlTime, "over") %>;
    }

    </script>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <asp:MyUpdatePanel ID="pnlTime" runat="server" OnPostBack="Refresh">
            <ContentTemplate>
                <asp:Label ID="lblTime" runat="server" />
            </ContentTemplate>
        </asp:MyUpdatePanel>

        <div onmouseover="refreshTime()" >鼠标划过时更新时间</div>
        <div onclick="showFullTime()">点击显示完整时间</div>
    </div>
    </form>
</body>　　

　　Refresh的定义如下:

protected void Refresh(string type)
        {
            switch (type)
            {
                case  "over":
                    lblTime.Text = DateTime.Now.ToString("hh:mm:ss");
                    break;
                case "click":
                    lblTime.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
                    break;
            }
        }

　　这样我们就比较完善地实现了不添加辅助按钮，仅用JS刷新UpdatePanel了。