[ASP.NET]會員代號欄位失去焦點(OnBlur)檢查帳號是否曾被使用範例—LinkButton篇

2010-12-07

18119
0
(.NET)ASP.NET
2010-12-08

有位網友在小舖裡面小喵的留言板中提到這個問題，這個問題其實只要一些小技巧，並不難。所以小喵在此作兩個方式的範例，一個是用LinkButton搭配JavaScript讓TextBox OnBlur時可以等同按下LinkButton去檢查；另一個方式是使用jQuery的Ajax的方式。
本篇主要介紹利用LinkButton是透過JavaScript進行PostBack的特性，把它應用在TextBox在Client端的OnBlur事件中。有相同需求的人可以參考看看。

緣起

有位網友在小舖裡面小喵的留言板中提到這個問題，這個問題其實只要一些小技巧，並不難。所以小喵在此作兩個方式的範例，一個是用LinkButton搭配JavaScript讓TextBox OnBlur時可以等同按下LinkButton去檢查；另一個方式是使用jQuery的Ajax的方式。

本篇主要介紹利用LinkButton是透過JavaScript進行PostBack的特性，把它應用在TextBox在Client端的OnBlur事件中。有相同需求的人可以參考看看。

基本畫面安排

這樣的需求其實如果說要透過一個按鈕，按下按鈕後，就檢查是否有相同帳號，並且回應訊息到Label上。這樣的動作一般初學者應該都還做得到。關鍵的地方大概在兩個

1.如何安排TextBox的OnBlur的client端事件

2.如何從Client端的Javascript啟動Server端的某個事件或函數起來運作。

所以我們先來把這兩個關鍵以前的事情準備好。

我們準備畫面上一個TextBox,一個Label，再加上一個LinkButton，大致如下：


	使用者代號：<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
<asp:Label ID="lblChkUserIDMsg" runat="server" Text=""></asp:Label>
<asp:LinkButton ID="lbChkUserID" runat="server">LinkButton</asp:LinkButton>

接著很簡單，在LinkButton按下去後，去檢查txtUserID，我們省略資料庫讀取的部分，假設如果輸入topcat就回應已經存在帳號，其他的就回應可以使用。相關程式碼如下：


	Protected Sub lbChkUserID_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lbChkUserID.Click
    '檢查帳號是否已經存在(這裡省略資料庫的判斷，直接改以判斷是否=topcat)
    If Me.txtUserID.Text = "topcat" Then
        '回應帳號已經存在
        Me.lblChkUserIDMsg.Text = "帳號【topcat】已經存在，請選擇其他的帳號!!"
        Me.txtUserID.Text = ""
        Me.txtUserID.Focus()
    Else
        '回應帳號可以使用
        Me.lblChkUserIDMsg.Text = "帳號【" + Me.txtUserID.Text + "】可以使用!!"
    End If
End Sub

以上應該沒有困難的部分，接著就來看看如何搭配Client端的Script來呼叫。

從HTML+Javascript中挖寶

之所以要選用LinkButton這個控制項是有原因的，我們必須看看這樣的設計，在Client端產生了什麼樣的HTML與JavaScript。


	<!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 method="post" action="Default2.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="/wEPDwUJNzI2NzU0MzkzZGReyvQGdgtjHP9/LNroz2O1fG0h6Qg1z8UUfFAVBfo29g==" />
</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="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKntfbDBwLT8dy8BQL/scmlDC4a6VO2nh3sOgvHwzRkusn50gml6hLDJ38Sa7UOjhDp" />
</div>
    <div>
    
        使用者代號：<input name="txtUserID" type="text" id="txtUserID" />
        <span id="lblChkUserIDMsg"></span>
        <a id="lbChkUserID" href="javascript:__doPostBack(&#39;lbChkUserID&#39;,&#39;&#39;)">LinkButton</a>
        <hr />

    </div>
    </form>
</body>
</html>

我們主要要觀察，LinkButton是怎麼運作的，這時開發者必須有一些HTML+JavaScript的基礎，才能看得懂這些內容。所以這裡小喵要小小的撈叨一下，很多學ASP.NET的朋友在開始學的時候，並不會HTML,JavaScript 。小喵對於初學時還不會這些沒意見，但是必須理解，ASP.NET最後還是產生HTML+JavaScript給瀏覽器來解譯與運作，因此如果想進一步地學好ASP.NET，想從初學者踏入進階之路，那麼學習一些HTML與JavaScript還是有其必要的。

撈叨完了，回頭看看上面的程式碼，您可以發現，原來LinkButton產生的是下面這些


	<a id="lbChkUserID" href="javascript:__doPostBack(&#39;lbChkUserID&#39;,&#39;&#39;)">LinkButton</a>

他是個超聯結，不過連結的卻是一段Javascript，然後他所呼叫的是【__doPostBack('lbChkUserID','')】

其中的'是單引號【'】的意思，所以他是做了【_doPostBack(‘lbChkUserID’,’’)】

也就是他是透過呼叫__doPostBack這個JavaScript來進行PostBack的，並且傳回啟動PostBack的是哪個物件。如果您使用一般的Button的話，那麼一般的Button產生的是一個<input type=”submit”>的Submit Input

這裡可以看出來，Submit Input並不方便讓我們利用，不過__doPostBack這樣的Javascript卻是可以利用的，我們只需要【在TextBox上安排onblur的client端事件，並且做出與LinkButton一樣的呼叫，就可以等同按下LinkButton了】。

為TextBox加上Onblur的Client端事件

對於TextBox，從開發介面中是沒有onblur這樣的事件的，不過我們要先理解，TextBox在Client端所產生的事<input>的HTML Tag，而所謂的事件，也是Tag中的一個【屬性(attribute)】而他要運作的內容，對於Tag來說就是他的【值(Value)】。這是HTML Tag，甚至可以說是類似XML的通則。這對於學習ASP.NET是必須有的基本認知之一。(所以說吧!!要進階，對於HTML,JavaScript,XML的概念還是要有的!!)

所以我們可以在PageLoad中，幫TextBox加上這個onblur的屬性：


	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Me.txtUserID.Attributes.Add("onblur", "__doPostBack('lbChkUserID','')")
End Sub

這個時候我們在測試一次運作起來的狀況，就可以發現在TextBox輸入資料後，按下Tab讓focus離開TextBox，此時果然會透過LinkButton來啟動PostBack進行動作，並且把我們想要的結果傳回。

隱藏LinkButton

終於到了最後的階段，這樣一直在畫面上有個LinkButton1也是怪怪的，當然要將之隱藏，其實方式也很簡單，把LinkButton1改為一個空白就可以囉。所以aspx最後是變成這樣：


	使用者代號：<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
<asp:Label ID="lblChkUserIDMsg" runat="server" Text=""></asp:Label>
<asp:LinkButton ID="lbChkUserID" runat="server"> </asp:LinkButton>
<hr />

搭配UpdatePanel

最後要讓畫面不要閃，很簡單，只要拉個ScriptManager進去，再拉個UpdatePanel進去，接著把TextBox,Label,LinkButton通通拉進UpdatePanel，就成了。

這裡還要提醒，UpdatePanel雖然簡單使用，但是可不要一股腦兒的把整個畫面都拉進去，這對效能來說是不好的，最好只要拉需要的部分就可以了。這方面，小喵推薦可以參考ASP.NET魔法學園的CallBack 與 UpdatePanel 的效能比較這篇文章。

講到效能，還記得一開始的時候小喵提到兩種做法嗎?早期小喵會用本篇的方式來做，後來對於效能考量比較多，而且又學了jQuery之後，小喵會用jQuery中的Ajax來做處理，這個就請大家看下一篇【[ASP.NET]會員代號欄位失去焦點(OnBlur)檢查帳號是否曾被使用範例—jQuery之Ajax篇】見分曉囉!!

以下是簽名：

歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考

Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)

topcat
Blog:http://www.dotblogs.com.tw/topcat

ASP.NET

回首頁

topcat 姍舞之間的極度凝聚

世界上有兩樣東西分享給別人後，不但不會變少，還會變更多：一個是快樂，另一個是知識~分享...是知識累積的開始...