深入学习JS: __doPostBack函数

Posted 2020-07-07 HongMaJu

在.NET中，所有的服务器控件提交到服务器的时候，都会调用__doPostBack这个函数，所以灵活运用这个函数对于我们的帮助还是很大的.

       比如，在我们写程序的时候经常会需要动态的生成一些控件，最简单的方法就是通过一个字符串,比如string strButton = <input type =”button” ID=”button1”>,然后输出到页面，但是如果我们需要这个控件来执行一些服务器的功能，就比较困难了.这里我们就可以用过借用__doPostBack这个函数来完成.接下来我觉个例子来说明一下具体如何调用.

   

       既然要在服务器端运行那么，我们可以声明一个不可见的LinkButton控件，那通常，我们希望一个控件不可见，通常都是把visible属性设为false.但是在这里我们把LinkButton的Text属性设置为空，来是这个LinkButton不可见(为什么要这么设置，而不是直接设置visible属性，我会在下面说明)，接下来我们可以在LinkButton里面写一些服务器端的代码.然后就是如何通过我们动态生成的客户端控件来调用LinkButton里面的功能,我们可以通过一个javascript函数来实现

       function ExcuteOnServer()

       {

       //第一个参数是你希望提交到服务器的控件的ID号，第二个参数是事件参数

       __doPostBack(\'LinkButtonID\',\'\');

       }

       接下去我们只需要在动态生成的这个Button控件的onclick事件中写上onclick=”JavaScript:ExcuteOnServer();"，这样当我们点击这个动态生成的客户端控件的时候，他便会执行LinkButton中的代码.

   

       这样便实现了动态生成的客户端控件提交到服务器端的功能.

       最后要说一下的就是为什么希望LinkButton控件不可见的时候，不是通过visible属性来完成的.因为当我们把visible属性设置为false的时候，浏览器在解析的时候，根本不会把这个控件放在页面上，也就是说这个控件是不存在的，所以我们在调用__doPostBack函数的时候，便会找不到控件.

 

这里介绍一个常用的函数_doPostBack,这个函数如果如果是ASP.Net render出来的页面就是自动产生这个函数，比如有带autopostback属性的控件，且其属性为true的页面，带编辑列的datagrid页面。

__doPostBack 是通过__EVENTTARGET,__EVENTARGUMENT两个隐藏控件向服务端发送控制信息的，__EVENTTARGET为要调用控件的名 称，如果要调用的控件是子控件，用\'\'$\'或\':\'分割父控件:子控件,__EVENTARGUMENT是调用事件时的参数

下面演示下如何调用后台事件：

1.新建工程

2.拖入一个服务端Button1,一个DropDownList1和一个客户端Button

3.设置DropDownList1的AutoPostBack属性为True,Button1的Visible为False

4.双击Button1，在事件里写下Response.Write("hello:" );

5.页面的html里找到客户端Button，写入onclick="__doPostBack(\'Button1\',\'\')"

6.编译，运行，点击Button是不是出现了"Hello"

7.查看源代码，发现里面多了下面行

<script language="javascript"><!--function __doPostBack(eventTarget, eventArgument) {

var theform;

if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {

              theform = document.forms["Form1"];

          }

else {

               theform = document.Form1;

           }

          theform.__EVENTTARGET.value = eventTarget.split("$").join(":");

           theform.__EVENTARGUMENT.value = eventArgument;

          theform.submit();

      }


</script><input type="hidden" value="" /><input type="hidden" value="" />