客戶端觸發Asp.net中服務端控件事件

第一章、 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來得知是這個按鈕被點擊了,從而在服務端觸發這個按鈕的點擊事件。
  
  
二.   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的方法來處理所有這些事件的發送,這段代碼是:
  
  <script language="javascript">
  
  <!--
  
  function __doPostBack(eventTarget, eventArgument) {
  
  var theform = document.WebForm2;
  
  theform.__EVENTTARGET.value = eventTarget;
  
  theform.__EVENTARGUMENT.value = eventArgument;
  
  theform.submit();
  
  }
  
  // -->
  
  </script>
  
  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來判斷是哪個控件的什麼事件觸發了。

第二章 PostBack的原理

 __doPostBack是一個純粹並且是非常簡單的javascript函數,大部分的頁面PostBack都是由它觸發的。注意,這裏是“大部分”,因爲只有兩

個Web Server Control    會自己觸發頁面的PostBack,其它的所以控件都是通過__doPostBack函數觸發頁面的PostBack,那先來看一下這個函

數的定義吧:

CODE1:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

   通過上面的代碼可以看到,__doPostBack帶有兩個參數,eventTarget是標識將要引發頁面PostBack的控件ID,eventArgument參數提供了在引發頁面PostBack事件時所帶的額外參數。當然這個函數被函數時,這兩個參數的值將賦值給頁面的兩個隱含變量__EVENTTARGET和__EVENTARGUMENT,然後調用頁面的submit方法提交頁面表單。這就是爲什麼我們可以通過Request.Form[“__EVENTTARGET”]獲取得到引發頁面PostBack的控件ID的原因。

   瞭解了__doPostBack函數後,我們可以很容易的利用它非常方便地自己觸發自定義的PostBack事件。那上面也說了,大部分的控件都是調用

第三章 Button PostBack做法

引了頁面的PostBack,只有兩個控件是例外,Button 和 ImageButton,正是因爲它們不是通過調用__doPostBack來回發事件,所以通過表單隱含變量__EVENTTARGET和__EVENTARGUMENT是無法獲取得到引發PostBack的Button或ImageButton的ID和參數值的,可通過下面的方式實現

1) 在頁面中加如 LinkButton ,頁面就會在頁面中加載POSTBACK所需的JS

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" 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)

<href="#" onclick="document.getElementById('Button1').click()">觸發服務器端按鈕事件</a>

(2)
利用GetPostBackEventReference給客戶端生成__doPostBack()
前臺

<href="#" onclick="<%=PostBack()%>">觸發服務器端按鈕事件</a>

後臺

protected string PostBack()
    
{
            
return this.Page.GetPostBackEventReference(this.Button1,"haha");
        }

通過__EVENTARGUMENT="haha"可以判斷是不是點了那個鏈接的PostBack
把Button1的按鈕事件這麼寫:

if(Request["__EVENTARGUMENT" ]=="haha")
        
{
                Response.Write(
"這個是鏈接的PostBack");
            }

            
else
        
{
                Response.Write(
"這個不是鏈接的PostBack");
            }

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章