iT邦幫忙

DAY 6
3

ASP.NET技巧系列 第 7

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

這一篇最終的目的,是希望能夠透過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>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<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.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端的瀏覽器裡。因此我們在瀏覽器中,去檢視一下原始碼

<html xmlns="http://www.w3.org/1999/xhtml">
<title>
</title>

    <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>
        

        <span id="Label1">LinkButton PostBack: aaa</span>
    </div>
    </form>

觀察原始碼
我們來觀察一下原始碼,首先可以觀察到,本來在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】的目的囉

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

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


上一篇
ASP.NET 2.0如何使用Login來存取自己的使用者資料庫
下一篇
TreeView使用拖拉放的方式更改樹的結構 Part1
系列文
ASP.NET技巧17

尚未有邦友留言

立即登入留言