經常在網上看到類似的問題:如何讓ASP.Net服務器端控件響應客戶端事件?
ASP.Net服務器端控件能夠響應服務器端事件,使我們能夠像編寫Windows程序一樣編寫網頁。可有時我們並不需要讓客戶端運行的控件和服務器發生交互,這樣做的開銷是很大的:不僅占用網絡帶寬、服務器的CPU資源,還會產生一次PostBack導致客戶端浏覽器“刷新”影響界面效果。
如果直接在Web窗體的Html代碼內為服務器端控件添加客戶端事件代碼,就像這樣:
你會發現,當按下這個按鈕時,並沒有預定的消息框彈出,而是直接執行服務器端代碼內的響應按鈕按下事件的Button1_Click方法(假設我們已經為按鈕綁定了這個事件)。如果查看客戶端頁面的源代碼,按鈕的onClick事件裡,根本沒有自己寫的代碼,卻變成了"Javascript:__doPostBack(...)"。
其實這正是.Net Framework轉換工作的一部分。有了這個"Javascript:__doPostBack(...)",才能實現按鈕提交、服務器端響應事件等一系列動作。(關於這段自動加上的腳本,我會在今後的文章裡詳細說明。)
想要控件在客戶端就響應事件,必須另尋他法。好在.Net已經為我們提供了豐富的接口去實現這些功能。
所有的服務器端控件(Button、Label、TextBox……)都有一個屬性Attributes——這是一個很重要的屬性,它是服務器端控件在客戶端對應Html元素屬性及事件的集合。有了它,我們能夠自定義服務器端控件在客戶端的行為、外觀。
還是剛才的Button1,這次我們在Page_Load事件裡加上這麼一句(在IsPostBack判斷之外):
Button1.Attributes.Add("onclick", "window.alert('按鈕被按下了')");
重新生成項目之後再次浏覽頁面,這次我們終於能夠看到“按鈕被按下”的消息框被正常彈出了。
回過頭來解釋這句代碼:Attributes是Button1也是所有服務器端控件擁有的屬性,Add(...)是Attributes所屬的一個方法,作用是為控件在客戶端的Html標記內添加代碼,第一個參數是屬性的名稱,第二個參數是屬性的值。在這裡我們為按鈕的onclick事件添加了一段彈出消息框的代碼。在客戶端查看頁面源代碼,可以看到按鈕的onclick事件裡包含了這段代碼(.NET Framework自動生成的"__doPostBack(...)"就跟在後面,我們使用Add就是告訴.Net Framework:“先加入我們的代碼!”)。
Attributes還有另一種訪問的形式(C#專用):
Button1.Attributes["onclick"] = "window.alert('按鈕被按下了')"; // []內是屬性的名稱,等號右邊就是屬性的值
這個方法同樣可以用於使用服務器端代碼為控件改變屬性:
Button1.Attributes["style"] = "fontsize: 9pt"; // 改變控件樣式的字體為9磅