如何透過JavaScript來觸發LinkButton的PostBack，呼叫後端的程式

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

緣起

這一篇最終的目的，是希望能夠透過JavaScript來觸發Server端的Function來做一些事情，在這個過程中，我們透過觀察LinkButton的PostBack運作，進而想出如何使用JavaScript利用LinkButton的PostBack來達到這樣的目的。

觀察Button與LinkButton的PostBack動作

首先，在畫面中安排一個TextBox，一個Button，一個LinkButton，以及一個Label

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button" /><asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton><br /><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

接著撰寫後端的Button1與LinkButton1的Click事件

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click    Me.Label1.Text = "Button PostBack: " + Me.TextBox1.TextEnd SubProtected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click    Me.Label1.Text = "LinkButton PostBack: " + Me.TextBox1.TextEnd Sub

以上是很簡單的範例，執行後就是把TextBox中輸入的內容，加上一些文字，顯示在Label1上。不過我們的重點，是要觀察這樣的內容，會產生什麼樣的HTML與JavaScript在Client端的瀏覽器裡。因此我們在瀏覽器中，去檢視一下原始碼

<!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><title></title></head><body>    <form name="form1" method="post" action="Default.aspx" id="form1"><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="/wEPDwUKMTI0MzMyNTQxMw9kFgICAw9kFgICBw8PFgIeBFRleHQFGExpbmtCdXR0b24gUG9zdEJhY2s6IGFhYWRkZG/Mw6b4JgMDyr44Wysx+J+xFb4r" /></div><script type="text/javascript">//<![CDATA[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><div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKntYX5AwLs0bLrBgKM54rGBgLM9PumD3NI60/Yb7kCeqTjhk8wrZHsWt8U" /></div>    <div>        <input name="TextBox1" type="text" value="aaa" id="TextBox1" />        <input type="submit" name="Button1" value="Button" id="Button1" />        <a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>        <br />        <span id="Label1">LinkButton PostBack: aaa</span>    </div>    </form></body></html>

觀察原始碼

我們來觀察一下原始碼，首先可以觀察到，本來在ASPX中的Button與LinkButton分別變為

Button:<input name="TextBox1" type="text" value="aaa" id="TextBox1" />
LinkButton:<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

這邊可以看出來，Button變為Submit的按鈕，透過Submit來運作PostBack，這點對於JavaScript要運用上，比較使不上力。不過再來觀察【LinkButton】，他所產生的是一個超連結<a>的Tag，並且透過JavaScript中呼叫【javascript:__doPostBack('LinkButton1','')】，這個如果我要透過JavaScript來模擬她，就很簡單，只要呼叫相同的【__doPostBack】就可以囉。

用Input type=Button利用LinkButton

我們就來是試試看，是否可以透過一個HTML的button來觸發LinkButton的PostBack

因此我們畫面中在安排一個Input type=button

<input id="Button2" type="button" value="我是HTML的button" onclick="__doPostBack('LinkButton1','')" />

接著運作看看。果然跟LinkButton的運作結果是一模一樣的。

加上呼叫字定的Function==>JavaScript呼叫Server端自訂Function

在最後，我們在後端加上一個自訂的Function，然後改寫一下LinkButton的click事件呼叫這個Function，這樣，就可以達到【Client端透過JavaScript呼叫後端自訂Function】的目的囉

view plaincopy to clipboardprint

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
'Me.Label1.Text = "LinkButton PostBack: " + Me.TextBox1.Text
Me.Label1.Text = Test("LinkButton PostBack: " + Me.TextBox1.Text)
End Sub
Private Function Test(ByVal str As String) As String
Return str + ",這是透過自訂Function處理的唷!!"
End Function

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click    'Me.Label1.Text = "LinkButton PostBack: " + Me.TextBox1.Text    Me.Label1.Text = Test("LinkButton PostBack: " + Me.TextBox1.Text)End SubPrivate Function Test(ByVal str As String) As String    Return str + ",這是透過自訂Function處理的唷!!"End Function

結論

透過觀察LinkButton所產生的HTML原始碼，就可以大致上瞭解他是怎麼做PostBack，也就可以自己更靈活的去運用他。例如，如果我們要在GridView中，讓每個Row都能夠點選Row的任一位置，就有【選擇(Select) Row】的效果，就可以透過這樣的技巧來達成唷。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More