這一篇要介紹的是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.屬性
(a)CauseValidation:設定為false,即可避免觸發同ValidationGroup的Validator驗證功能。通常用在取消、清畫面、關閉視窗等用途…
(b)CommandName:藉由設定 CommandName 屬性,[命令] 按鈕可以擁有與按鈕關聯的命令名稱,例如 Sort。這使您可以在 Web 網頁上建立多個 Button 控制項,並以程式設計的方式判斷已經按下哪個 Button 控制項。
(c)CommandArgument:搭配命令按鈕來使用 CommandArgument 屬性,提供有關所要執行命令的額外資訊,例如 Ascending。
(d)UseSubmitBehavior:可改變Render出來的HTML tag為submit或button。
(e)OnClientClick:透過此屬性,可直接設定client端的onclick事件要執行什麼樣的JavaScript,等同於thisButton.Attribute.add("onclick","my JavaScript");。
3.事件:OnClick,若有多個按鈕使用同一個委派方法,可透過e.CommandName來辨別此事件為哪一個Button觸發。可再透過e.CommandArgument取得需要的資訊。
4.HTML tag:根據UseSubmitBehavior而有所不同
(a)true:<input type='submit' />
(b)false:<input type='button' />
5.注意
(a)若只是需要使用client端JavaScript的動作,請盡量避免使用server control的Button,直接使用HTML control的button,可避免postback以及無謂的資源浪費。若非得用server control的button,又不希望觸發client端的onclick後postback,記得在JavaScript執行完後,加上return false;即可。
(b)Button放在一些資料繫結的server control裡面,例如GridView,CommandName會有一些關鍵字,會觸發GridView等control的特定事件,參考[http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.gridview.rowcommand(v=VS.80).aspx
](http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.gridview.rowcommand(v=VS.80).aspx<br />
)
HyperLink的介紹
1.MSDN reference:http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.hyperlink(VS.80).aspx
2.屬性
(a)ImageUrl:以顯示為 ImageUrl 屬性所指定的影像,如果已設定 Text 和 ImageUrl 屬性,則以 ImageUrl 屬性為優先。如果沒有影像,將會顯示 Text 屬性中的文字。
(b)NavigateUrl:按一下 HyperLink 控制項時所要連結的 URL,對應到HTML <a>裡面的href屬性
3.Target
(a)_top:在無框架的完整視窗中呈現內容。
(b)_blank:在無框架的新視窗中呈現內容。
(c)_parent:在即時父代框架組中呈現內容。
(d)_search:在搜尋窗格中呈現內容。
(e)_self:在擁有焦點 (Focus) 的框架中呈現內容。
4.HTML tag:<a>
5.注意
(a)由於Text的部分仍可以用來顯示HTML,所以也要注意XSS,可參考 91之ASP.NET由淺入深 不負責講座 Day5 - Server Controls Introduction(1)
(b)若希望此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.如何用圖片來呈現連結或按鈕?