JS中__doPostBack用法

电玩女神 2021-06-26 16:06 1151阅读 0赞

要理解`__doPostback`函数的用法，首先我们要理解`Asp.net` 中服务端控件事件是如何触发的。

`Asp.net` 中在客户端触发服务端事件分为三种情况：

## 一. `WebControls`中的`Button` 和`HtmlControls`中的`Type`为`submit`的`HtmlInputButton` ##

这两种按钮最终到客户端的表现形式为： `<input name="Submit1" id="Submit1" type="submit" value="Submit">`，这是`Form`表单的提交按钮，点击以后会作为参数发送到服务端，参数是这样的： 控件的`name`属性=控件的`value`值，对应上面的例子就是：`Submit1= Submit`。 服务端会根据接收到的控件的`name`属性的这个`key`来得知是这个按钮被点击了，从而在服务端触发这个按钮的点击事件。

## 二. `ImageButton`或者`HttpInputImage`: ##

这些控件到客户端的表现类似这样的： `<input type=image id=img1>`，点击了这样的控件会直接提交表单，作用同提交按钮。点击了这样的控件传到服务端的参数是这样的：`id.x=nn&id.y=nn`，对应到上面的例子就是：`img1.x=nn&img1.y=nn`

## 三. `HtmlControls` 中的 `Type`为`button`的`HtmlInputButton` 和其它所有的控件事件，比如`LinkButton`点击，`TextBox`的`Change`事件等等： ##

这些事件在客户端产生后会经过一个统一的机制发送到服务端。

**1. 首先`asp.net`页框架会使用两个`Hidden`域来存放表示是哪个控件触发的事件，以及事件的参数：**

<!-表示触发事件的控件，一般是这个控件的name -->
    <input type="hidden" name="__EVENTTARGET" value="" />
    
    <!-表示触发事件的参数，一般是当某个控件有两个以上的事件时，用来区别是哪个事件 -->
    <input type="hidden" name="__EVENTARGUMENT" value="" />

**2. 服务端会生成一个`jscript`的方法来处理所有这些事件的发送，这段代码是：**

function __doPostBack(eventTarget, eventArgument) {   
              
            var theform = document.WebForm2;  
              
            theform.__EVENTTARGET.value = eventTarget;  
              
            theform.__EVENTARGUMENT.value = eventArgument;  
              
            theform.submit();  
              
            }

**3. 每个会引发服务端事件的控件都会在响应的客户端事件中调用上面的代码：**

比如，`HtmlControls` 中的 `Type`为`button`的`HtmlInputButton`的点击事件

<!-客户端的点击事件调用__doPostBack，eventTarget参数为'Button2'，表示是name为'Button2'控件触发的事件，eventArgument为空，表示这个Type为button的HtmlInputButton只有一个客户端触发的服务端事件-->
    
    <input language="javascript" onclick="__doPostBack('Button2','')" name="Button2" id="Button2" type="button" value="Button" />

又比如，`TextBox`控件的`Change`事件

<!-客户端的onchange事件调用__doPostBack，eventTarget参数为'TextBox1'，表示是name为'TextBox1'控件触发的事件，而TextBox控件只有一个客户端触发的服务端事件TextChanged，故服务器就会去触发这个TextBox的TextChanged事件->
    
    <input name="TextBox1" type="text" id="TextBox1" onchange="__doPostBack('TextBox1','')" language="javascript" />

**4. 客户端触发事件后调用`__doPostBack`方法，将表示触发的控件源的`eventTarget` 和事件参数`eventArgument`分别付给两个隐藏域`__EVENTTARGET`和`__EVENTARGUMENT`，然后提交`Form`，在服务端根据`__EVENTTARGET`和`__EVENTARGUMENT`来判断是哪个控件的什么事件触发了。**

--------------------

[了解了Asp.net][Asp.net] 中服务端控件事件是如何触发的后，我们再去认识`__doPostback`这个函数和它的作用。下面是`__doPostback`函数的具体内容：

<div>  
            <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />  
            <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />  
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NDIzMDg2NDRkZMlHJoBQ9CYcWBtBK+zrfZzKoh/i" />  
    </div>  
              
     <script type="text/javascript"> 
            //...   
    	var theForm = document.forms['form1'];
    	if (!theForm) {
    	    theForm = document.form1;
    	}
    	
    	function __doPostBack(eventTarget, eventArgument) {
    	    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    	        theForm.__EVENTTARGET.value = eventTarget;
    	        theForm.__EVENTARGUMENT.value = eventArgument;
    	        theForm.submit();
    	    }
    	}
      <script>

其中`eventTarget` 和`eventArgument`，是两个就是用来存储在回送的时候获取是哪个控件触发了回送，并且带了什么参数。总之，调用`__doPostBack`函数可以实现客户端控件调用服务器端控件的响应。或者是在`javascript`里面调用`.net`的服务器控件事件（这也是我想要解决的问题）。这一点可以充分用在子窗口调用父窗口中某个服务器控件的服务器端的事件

比如，在我们写程序的时候经常会需要动态的生成一些控件，最简单的方法就是通过一个字符串,比如`string strButton = <input type ="button" ID="button1">`,然后输出到页面，但是如果我们需要这个控件来执行一些服务器的功能，就比较困难了。

这里我们就可以用过借用 `__doPostBack`这个函数来完成。以这个例子来说明一下具体如何调用。

我们可以声明一个不可见的`LinkButton`控件，那通常，我们希望一个控件不可见，通常都是把`visible`属性设为`false`。但是在这里我们把`LinkButton`的`Text`属性设置为空，这样这个`LinkButton`不可见（因为当我们把`visible`属性设置为 `false`的时候，浏览器在解析的时候，根本不会把这个控件放在页面上，也就是说这个控件是不存在的，所以我们在调用`__doPostBack`函数的时候，便会找不到控件 ），接下来我们可以在`LinkButton`里面写一些服务器端的代码。然后就是如何通过我们动态生成的客户端控件来调用`LinkButton`里面的功能,我们可以通过一个`JavaScript`函数来实现

function ExcuteOnServer()  
            {   
            //第一个参数是你希望提交到服务器的控件的ID号，第二个参数是事件参数 
            __doPostBack('LinkButtonID','');  
            }

接下去我们只需要在动态生成的这个`Button`控件的`onclick`事件中写上`onclick="JavaScript:ExcuteOnServer();"`，这样当我们点击这个动态生成的客户端控件的时候，他便会执行`LinkButton`中的代码。这样便实现了动态生成的客户端控件提交到服务器端的功能。

**客户端js利用`__doPostBack(sender,args)`函数来提交到服务器的方法：**

__doPostBack(sender,args)
        sender:提交的控件
        args: 事件参数。一般赋空值。

`web.aspx`页面上放置任何一个控件：`<asp:button id="btnTest"/>`

客户端调用js代码：`__doPostBack("btnTest","")`; 注意是双下划线。即可提交到服务器端。调用该函数提交不会触发控件的任何js事件而直接进入服务器端。

可以利用该特性来做二次提交：在`button`控件的`Click`事件中做一个标记利用`hidden`控件或其他方式保存一个`Flag`  
`__doPostBack`提交则无此`Flag`

服务器端则根据该`Flag`来判断是`button`提交还是`__doPostBack`提交。注意在后台处理`__doPostBack`提交的逻辑中将`Flag`刷新。

自己实践的例子如下，为了便于理解，举了一个比较简单的：

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>
    <!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">
            <input onclick="__doPostBack('Button1','')" name="Button1" type="button" value="点击调用后台方法" />
            <div>
              <asp:Button ID="Button1" runat="server" Text="Button" Visible="false" onclick="Button1_Click" />
              
              <asp:LinkButton ID="LinkButton1" runat="server" Text="">LinkButton</asp:LinkButton></div>
          </form>
        </body>
      
      </html>

注意`EnableEventValidation`属性要定义为`false`，因为它默认是`true`，否则无法回调。 为了实现`__doPostBack`函数，我们可以为页面添加一个`LinkButton`，因为它本身就有这个属性，或者可以添加其他控件，如`DropDownList`，但该控件`AutoPostBack`属性应该定义为`true`。

后台代码：

using System;  
        using System.Collections.Generic;  
    
        using System.Linq;  
        using System.Web;  
        using System.Web.UI;  
        using System.Web.UI.WebControls;  
          
        public partial class _Default : System.Web.UI.Page   
        {   
            protected void Page_Load(object sender, EventArgs e)  
            {   
          
            }  
            protected void Button1_Click(object sender, EventArgs e)  
            {   
                Response.Write("成功调用后台方法!");  
            }  
        }

这样就可以成功通过前台调用后台的方法。这只是一个简单的举例，更复杂的应用与此相似。

[Asp.net]: http://xn--Asp-0h9da5922g.net