zoukankan      html  css  js  c++  java
  • 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刷新

    <script type="text/javascript">
        function doRefresh() {
            <%=ClientScript.GetPostBackEventReference(pnlTime, "") %>;
        }
        </script>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="sm" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="pnlTime" runat="server">
                <ContentTemplate>
                    <asp:Label ID="lblTime" runat="server" />
                </ContentTemplate>
            </asp:UpdatePanel>
            
            <div onmouseover="doRefresh()">鼠标划过时更新时间</div>
        </div>
        </form>
    </body>

      这里使用了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了。

  • 相关阅读:
    解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题
    wid是一个字符串 必须转化成整型
    如何获取内联样式的width值
    onresize方法
    jquery中$("#afui").get(0)为什么要加get(0)呢?
    jquery $(document).ready() 与window.onload的区别
    鼠标点击
    添加二级菜单颜色
    homepage左边的导航菜单怎么做的?
    center
  • 原文地址:https://www.cnblogs.com/xfoolishpig/p/2705238.html
Copyright © 2011-2022 走看看