In 91

前言
這一篇要介紹的是Button, HyperLink, LinkButton, ImageButton，原本想把Image也放進來，因為Button, HyperLink, Image後面還帶著變形的LinkButton與ImageButton，會比較完整。不過因為Image比較沒啥好介紹的，所以就先省略了，有興趣的人請自行至MSDN文件庫查閱。

Button的介紹

1. MSDN reference：http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.button(VS.80).aspx
   
   
2. 屬性
   1. CauseValidation
      • 設定為false，即可避免觸發同ValidationGroup的Validator驗證功能。通常用在取消、清畫面、關閉視窗等用途…
   2. CommandName
      • 藉由設定 CommandName 屬性，[命令] 按鈕可以擁有與按鈕關聯的命令名稱，例如 Sort。這使您可以在 Web 網頁上建立多個 Button 控制項，並以程式設計的方式判斷已經按下哪個 Button 控制項。
   3. CommandArgument
      • 搭配命令按鈕來使用 CommandArgument 屬性，提供有關所要執行命令的額外資訊，例如 Ascending。
   4. UseSubmitBehavior
      • 可改變Render出來的HTML tag為submit或button。
   5. OnClientClick
      • 透過此屬性，可直接設定client端的onclick事件要執行什麼樣的JavaScript，等同於thisButton.Attribute.add("onclick","my JavaScript");。
        
        
        
3. 事件
   OnClick，若有多個按鈕使用同一個委派方法，可透過e.CommandName來辨別此事件為哪一個Button觸發。可再透過e.CommandArgument取得需要的資訊。
   
   
   
4. HTML tag
   根據UseSubmitBehavior而有所不同
   1. true：<input type='submit' />
   2. false：<input type='button' />
      
      
      
5. 注意
   1. 若只是需要使用client端JavaScript的動作，請盡量避免使用server control的Button，直接使用HTML control的button，可避免postback以及無謂的資源浪費。若非得用server control的button，又不希望觸發client端的onclick後postback，記得在JavaScript執行完後，加上return false;即可。
   2. Button放在一些資料繫結的server control裡面，例如GridView，CommandName會有一些關鍵字，會觸發GridView等control的特定事件
              http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.gridview.rowcommand(v=VS.80).aspx

HyperLink的介紹

1. MSDN reference：http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.hyperlink(VS.80).aspx
   
   
2. 屬性
   1. ImageUrl
      • 以顯示為 ImageUrl 屬性所指定的影像，如果已設定 Text 和 ImageUrl 屬性，則以 ImageUrl 屬性為優先。如果沒有影像，將會顯示 Text 屬性中的文字。
   2. NavigateUrl
      • 按一下 HyperLink 控制項時所要連結的 URL，對應到HTML <a>裡面的href屬性
   3. Target
      • _top：在無框架的完整視窗中呈現內容。
      • _blank：在無框架的新視窗中呈現內容。
      • _parent：在即時父代框架組中呈現內容。
      • _search：在搜尋窗格中呈現內容。
      • _self：在擁有焦點 (Focus) 的框架中呈現內容。
        
   4. HTML tag：<a>
      
   5. 注意
      1. 由於Text的部分仍可以用來顯示HTML，所以也要注意XSS，可參考 91之ASP.NET由淺入深 不負責講座 Day5 - Server Controls Introduction(1)
      2. 若希望此hyperlink點選後沒導頁
         • href設定為"#"：回到本網頁的最上方
         • HTML的onclick或href中，執行javascript:void(0);

LinkButton的介紹

1. MSDN reference：http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.linkbutton(VS.80).aspx
   
   
2. 有Button行為的HyperLink
   
   
   
3. HTML tag
       <a>，預設會Render出這樣的HTML：<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>
   
   
   
4. 在server端可用Button的事件和屬性

ImageButton的介紹

1. MSDN reference：http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.imagebutton(VS.80).aspx
2. 有Button行為的Image
   
3. HTML tag：<input type="image" />
   
4. 在server端可用Button的事件和屬性，也具備Image的屬性

 

---

最後，請想學習的客倌，看完這篇文章思考一下，下列的問題該如何回答：

1. Button該如何取消驗證？
2. 如何辨認這次事件是由哪一個Button所觸發？
3. 如何點選一個超連結後，設定開啟的window？
4. 如何讓HyperLink點選後無反應？
5. 如何讓HyperLink點選後PostBack，且在Server端觸發事件？
6. 如何用圖片來呈現連結或按鈕？

---

blog 與課程更新內容，請前往新站位置：http://tdd.best/