zoukankan      html  css  js  c++  java
  • 客户端触发服务器端事件

    asp.net在客户端触发服务器端事件分为两种情况:
    一.   WebControls中的Button HtmlControls中的TypesubmitHtmlInputButton
    这两种按钮最终到客户端的表现形式为:< input type="submit" value="Submit">,这是Form表单的提交按钮,点击以后会作为参数发送到服务端,参数是这样的:
    控件的name属性=控件的value值,对应上面的例子就是:Submit1= Submit。服务器端会根据接收到的控件的name属性的这个key来得知是这个按钮被点击了,从而在服务端触发这个按钮的点击事件。
    二.   HtmlControls 中的 TypebuttonHtmlInputButton 和其它所有的控件事件,比如LinkButton点击,TextBoxChange事件等等:
    这些事件在客户端产生后会经过一个统一的机制发送到服务端。
    1.首先asp.net页框架会使用两个Hidden域来存放表示是哪个控件触发的事件,以及事件的参数:
    < !―表示触发事件的控件,一般是这个控件的name -->
    < input type="hidden" value="" />
    < !―表示触发事件的参数,一般是当某个控件有两个以上的事件时,用来区别是哪个事件 -->
    < input type="hidden" value="" />
    2.服务端会生成一个jscript的方法来处理所有这些事件的发送,这段代码是:
    < script language="javascript" type="text/javascript">
        function __doPostBack(eventTarget, eventArgument)
        {
            var theform = document.WebForm2;
            theform.__EVENTTARGET.value = eventTarget;
            theform.__EVENTARGUMENT.value = eventArgument;
            theform.submit();
        }
    < /script>  

    3.每个会引发服务端事件的控件都会在响应的客户端事件中调用上面的代码:
    比如,HtmlControls 中的 TypebuttonHtmlInputButton的点击事件
    < !―客户端的点击事件调用__doPostBackeventTarget 参数为'Button2',表示是name'Button2’控件触发的事件,eventArgument 为空,表示这个TypebuttonHtmlInputButton只有一个客户端触发的服务端事件-->
    < input language="javascript" Button2','')" type="button" value="Button" />
    又比如,TextBox控件的Change事件
    < !―客户端的onchange事件调用__doPostBackeventTarget 参数为’TextBox1’,表示是name’TextBox1’控件触发的事件,而TextBox控件只有一个客户端触发的服务端事件TextChanged,故服务器就会去触发这个TextBoxTextChanged事件->
    < input type="text" TextBox1','')" language="javascript" />
    4.客户端触发事件后调用__doPostBack方法,将表示触发的控件源的eventTarget 和事件参数eventArgument分别付给两个隐藏域__EVENTTARGET__EVENTARGUMENT,然后提交Form,在服务端根据__EVENTTARGET__EVENTARGUMENT来判断是哪个控件的什么事件触发了。
    第二章 PostBack的原理
    __doPostBack是一个纯粹并且是非常简单的javascript函数,大部分的页面PostBack都是由它触发的。注意,这里是大部分,因为只有两个Web Server Control    会自己触发页面的PostBack,其它的所有控件都是通过__doPostBack函数触发页面的PostBack,那先来看一下这个函数的定义吧:
    CODE1:
    < input type="hidden" value="" />
    < input type="hidden" value="" />
    function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
    }
    通过上面的代码可以看到,__doPostBack带有两个参数,eventTarget是标识将要引发页面PostBack的控件IDeventArgument参数提供了在引发页面PostBack事件时所带的额外参数。当然这个函数被函数时,这两个参数的值将赋值给页面的两个隐含变量__EVENTTARGET__EVENTARGUMENT,然后调用页面的submit方法提交页面表单。这就是为什么我们可以通过Request.Form[“__EVENTTARGET”]获取得到引发页面PostBack的控件ID的原因。
    了解了__doPostBack函数后,我们可以很容易的利用它非常方便地自己触发自定义的PostBack事件。那上面也说了,大部分的控件都是调用
    第三章 Button PostBack做法
    引了页面的PostBack,只有两个控件是例外,Button ImageButton,正是因为它们不是通过调用__doPostBack来回发事件,所以通过表单隐含变量__EVENTTARGET__EVENTARGUMENT是无法获取得到引发PostBackButtonImageButtonID和参数值的,可通过下面的方式实现
    1)在页面中加如 LinkButton ,页面就会在页面中加载POSTBACK所需的JS
    < input type="hidden" value="" />
    < input type="hidden" value="" />
    function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
    }
    2)利用GetPostBackEventReference给客户端生成__doPostBack()
    如:
    比如前台页面
    < asp:Button id="Button1" runat="server" Text="Button">< /asp:Button>
    1
    < a href="#" onclick="document.getElementById('Button1').click()">触发服务器端按钮事件< /a>
    2
    利用GetPostBackEventReference给客户端生成__doPostBack()
    前台
    < a href="#" onclick="< %=PostBack()%>">触发服务器端按钮事件< /a>
    后台
    protected string PostBack()
             {
                
    return this.Page.GetPostBackEventReference(this.Button1,"haha");
             }
    通过__EVENTARGUMENT="haha"可以判断是不是点了那个链接的PostBackButton1的按钮事件这么写:
    if(Request["__EVENTARGUMENT" ]=="haha")
                 {
                     Response.Write("
    这个是链接的PostBack");
                 }
                
    else
                 {
                     Response.Write("
    这个不是链接的PostBack");
                 }
  • 相关阅读:
    【Express系列】第3篇——接入mysql
    【Express系列】第2篇——主程序的改造
    【Express系列】第1篇——项目创建
    AngularJS内置指令
    node服务端搭建学习笔记
    生成ssh key
    webstorm的常用操作
    VSCode 常用插件
    php集成包
    composer安装特别慢的解决方案
  • 原文地址:https://www.cnblogs.com/skyshenwei/p/1651846.html
Copyright © 2011-2022 走看看