來源網址：http://www.dotblogs.com.tw/topcat/archive/2010/12/07/19959.aspx　- topcat 姍舞之間的極度凝聚

緣起

有位網友在小舖裡面小喵的留言板中提到這個問題，這個問題其實只要一些小技巧，並不難。所以小喵在此作兩個方式的範例，一個是用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，大致如下：

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

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

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

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

 

從HTML+Javascript中挖寶

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

01     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02   
03 <html xmlns="http://www.w3.org/1999/xhtml">
04 <head><title>
05   
06 </title></head>
07 <body>
08     <form method="post" action="Default2.aspx" id="form1">
09 <div class="aspNetHidden">
10 <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
11 <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
12 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzI2NzU0MzkzZGReyvQGdgtjHP9/LNroz2O1fG0h6Qg1z8UUfFAVBfo29g==" />
13 </div>
14   
15 <script type="text/javascript">
16 //<![CDATA[
17 var theForm = document.forms['form1'];
18 if (!theForm) {
19     theForm = document.form1;
20 }
21 function __doPostBack(eventTarget, eventArgument) {
22     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
23         theForm.__EVENTTARGET.value = eventTarget;
24         theForm.__EVENTARGUMENT.value = eventArgument;
25         theForm.submit();
26     }
27 }
28 //]]>
29 </script>
30   
31   
32 <div class="aspNetHidden">
33   
34     <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKntfbDBwLT8dy8BQL/scmlDC4a6VO2nh3sOgvHwzRkusn50gml6hLDJ38Sa7UOjhDp" />
35 </div>
36     <div>
37       
38         使用者代號：<input name="txtUserID" type="text" id="txtUserID" />
39         <span id="lblChkUserIDMsg"></span>
40         <a id="lbChkUserID" href="javascript:__doPostBack(&#39;lbChkUserID&#39;,&#39;&#39;)">LinkButton</a>
41         <hr />
42   
43     </div>
44     </form>
45 </body>
46 </html>

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

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

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

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

其中的&#39;是單引號【'】的意思，所以他是做了【_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的屬性：

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

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

 

隱藏LinkButton

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

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

搭配UpdatePanel

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

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

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

 

全站熱搜
創作者介紹
創作者 mouse 的頭像
mouse

打工鼠的網路雜記

mouse 發表在 痞客邦 留言(0) 人氣()

E-mail轉寄