這一篇最終的目的，是希望能夠透過JavaScript來觸發Server端的Function來做一些事情，在這個過程中，我們透過觀察LinkButton的PostBack運作，進而想出如何使用JavaScript利用LinkButton的PostBack來達到這樣的目的。
緣起
這一篇最終的目的，是希望能夠透過JavaScript來觸發Server端的Function來做一些事情，在這個過程中，我們透過觀察LinkButton的PostBack運作，進而想出如何使用JavaScript利用LinkButton的PostBack來達到這樣的目的。
觀察Button與LinkButton的PostBack動作
首先，在畫面中安排一個TextBox，一個Button，一個LinkButton，以及一個Label
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" /><br />
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<hr />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
接著撰寫後端的Button1與LinkButton1的Click事件
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Me.Label1.Text = "Button PostBack: " + Me.TextBox1.Text
End Sub
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
Me.Label1.Text = "LinkButton PostBack: " + Me.TextBox1.Text
End Sub
以上是很簡單的範例，執行後就是把TextBox中輸入的內容，加上一些文字，顯示在Label1上。不過我們的重點，是要觀察這樣的內容，會產生什麼樣的HTML與JavaScript在Client端的瀏覽器裡。因此我們在瀏覽器中，去檢視一下原始碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./tJSLinkButton.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="9cklUDEbCuLZnfvi2Bm8DGQCA4xImhvdqAbzBDcEp0OECOaY6ArBRyG5C8PgLQG0fijiLqgFH1Rg7F03aoNg6qQzgT+xlV2HqfN2DsEh7Y8=" />
</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 class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="8408C5B3" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="WVMysD+Ir3HD/Tf1mSq6OXwM5rzHmApcE7NFdCEbAG+4Rg1vTe241yJ0iZc19Y96PSFwG3j+0zp3jGs64Gso+GT11G3M32aRQNnUkaWmRSCkpnPoM+Vmx9jlGXO2ANprcQ9MlCQEzOT751UpAMCHdg==" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
<br />
<span id="Label1">Label</span>
</div>
</form>
</body>
</html>
觀察原始碼
我們來觀察一下原始碼，首先可以觀察到，本來在ASPX中的Button與LinkButton分別變為
- Button:<input type="submit" name="Button1" value="Button" id="Button1" />
- 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 type="button" id="btn1" value="ClientButton" onclick="javascript:__doPostBack('LinkButton1','')" />
接著運作看看。果然跟LinkButton的運作結果是一模一樣的。
加上呼叫字定的Function==>JavaScript呼叫Server端自訂Function
在最後，我們在後端加上一個自訂的Function，然後改寫一下LinkButton的click事件呼叫這個Function，這樣，就可以達到【Client端透過JavaScript呼叫後端自訂Function】的目的囉
結論
透過觀察LinkButton所產生的HTML原始碼，就可以大致上了解他是怎麼做PostBack，也就可以自己更靈活的去運用他。例如，如果我們要在GridView中，讓每個Row都能夠點選Row的任一位置，就有【選擇(Select) Row】的效果，就可以透過這樣的技巧來達成唷。
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
