Web控件和Html控件雖然好多功能相同并且長得很像
但是它們的內(nèi)部實(shí)現(xiàn)機(jī)制是完全不一樣的
Web控件要比Html控件執(zhí)行效率要好
1. 使用起來也相當(dāng)方便,舉個(gè)簡(jiǎn)單的例子,例如Button的生成:
Html控件是將龐大控件集合全部弄到頁面中,用到哪個(gè)功能,就設(shè)置一下屬性,如下:
<input type=submit/button runat=server>
這樣會(huì)占用相當(dāng)大的控件資源
Web控件是將集成式的拆解成單功能的:
<asp:button id="btnOK" />
這樣就可以節(jié)省不必要的控件所占用的資源了
2.Web控件具有回送功能,能夠用ViewState維持控件的狀態(tài).
Html控件則不能,當(dāng)點(diǎn)擊頁面的操作,其狀態(tài)就會(huì)丟失.
可以做這樣的一個(gè)實(shí)驗(yàn):
I. 分別建立兩個(gè)文件: a.html b.aspx
II.在a.html頁面中加Html控件的RadioButton和一個(gè)button,
在b.aspx中加Web控件的RadioButton和一個(gè)button
III.a.html直接雙擊瀏覽器運(yùn)行,b.aspx通過IIS運(yùn)行
IV.在a.html運(yùn)行界面中,選中RadioButton,再單擊Button按鈕,會(huì)發(fā)現(xiàn)RadioButton會(huì)
取消選中(丟失其狀態(tài)),但在b.aspx頁面執(zhí)行同樣的操作,RadioButton不會(huì)丟失,因?yàn)閂iewState
給它保存了狀態(tài). 您可以在運(yùn)行界面點(diǎn)擊瀏覽器菜單"查看"->“源文件",打開Html代碼文件,
找到加密后的ViewState,類似于下面:
<input type="hidden" name="_VIEWSTATE" value="dDw0ajfmafmjfzzmj4"/>
其實(shí)ViewState實(shí)現(xiàn)原理也是將一些信息放到隱藏的一個(gè)控件中,并且asp.net生成的ViewState信息
是存儲(chǔ)在客戶端的
這里要注意的一點(diǎn)是:
只有當(dāng)格式為*.aspx文件,并且控件具有屬性:"runat=server"時(shí),回送功能才能打開
3. Html控件與Web控件最大的區(qū)別是它們對(duì)事件處理的方法不同。對(duì)于Html窗體控件,
當(dāng)引發(fā)一個(gè)事件時(shí),瀏覽器會(huì)處理它。但對(duì)于Web控件,事件僅由瀏覽器生成,但瀏覽
器不會(huì)處理它,客戶端要給服務(wù)器發(fā)個(gè)信息,告訴服務(wù)器處理事件。 不過有些事件,
比如:
按下鍵/移動(dòng)/鼠標(biāo)等事件,Asp.net中沒有這些事件
(因?yàn)檫@些事件即時(shí)性強(qiáng),服務(wù)器處理得不夠及時(shí)),這時(shí)候Html控件就發(fā)揮其作用了,結(jié)合Html事件
協(xié)助完成.
如下是一些Html常用的事件:
在瀏覽器上執(zhí)行的Html控件事件:
單擊時(shí)觸發(fā):
<INPUT type="button" value="Click Me" onclick="alert('Hi,你好!');">
鼠標(biāo)彈起時(shí)觸發(fā):
<INPUT type="button" value="Click Me" onmouseup="alert('Hi,你好!');">
//懸浮在控件上方時(shí)觸發(fā)
<INPUT type="button" value="Click Me" onmouseover="alert('Hi,你好!');">
//鼠標(biāo)在控件上方移動(dòng)時(shí)觸發(fā)
<INPUT type="button" value="Click Me" onmousemove="alert('Hi,你好!');">
//雙擊控件時(shí)觸發(fā)
<INPUT type="button" value="Click Me" ondblclick="alert('Hi,你好!');">
//當(dāng)焦點(diǎn)在控件時(shí),按鍵時(shí)觸發(fā)
<INPUT type="button" value="Click Me" onkeypress="alert('Hi,你好!');">
//按鍵按下時(shí)觸發(fā)
<INPUT type="button" value="Click Me" onkeydown="alert('Hi,你好!');">