在我的一個(gè)項(xiàng)目中需要對(duì)于控件進(jìn)行區(qū)分總結(jié)，我在網(wǎng)上找了找加上自己的實(shí)際測(cè)試總結(jié)如下：(如果有什么不正確的請(qǐng)即使指出，一起討論，大家共同進(jìn)步)
asp.net之所以現(xiàn)在開發(fā)方便和快捷，關(guān)鍵是它有一組強(qiáng)大的控件庫(kù)，包括web服務(wù)器控件,web用戶控件，web自定義控件，html服務(wù)器控件和html控件等。這里我主要說(shuō)說(shuō)html控件、html服務(wù)器控件和web服務(wù)器控件的區(qū)別。
1。html控件:就是我們通常的說(shuō)的html語(yǔ)言標(biāo)記，這些語(yǔ)言標(biāo)記在已往的靜態(tài)頁(yè)面和其他網(wǎng)頁(yè)里存在,不能在服務(wù)器端控制的，只能在客戶端通過(guò)javascript和vbscript等程序語(yǔ)言來(lái)控制。
<input type="button" id="btn" value="button"/>
2。html服務(wù)器控件:其實(shí)就是html控件的基礎(chǔ)上加上runat="server"所構(gòu)成的控件.它們的注意區(qū)別是運(yùn)行方式不同，html控件運(yùn)行在客戶端，而html服務(wù)器控件是運(yùn)行在服務(wù)器端的。參考其他資料是這樣說(shuō)的: 當(dāng)ASP.NET 網(wǎng)頁(yè)執(zhí)行時(shí)，會(huì)檢查標(biāo)注有無(wú)runat 屬性，如果標(biāo)注沒(méi)有設(shè)定，那么Html標(biāo)注就會(huì)被視為字符串，并被送到字符串流等待送到客戶端，客戶端的瀏覽器會(huì)對(duì)其進(jìn)行解釋；如果Html標(biāo)注有設(shè)定runat="server" 屬性，Page 對(duì)象會(huì)將該控件放入控制器，服務(wù)器端的代碼就能對(duì)其進(jìn)行控制，等到控制執(zhí)行完畢后再將Html服務(wù)器控件的執(zhí)行結(jié)果轉(zhuǎn)換成Html標(biāo)注，然后當(dāng)成字符串流發(fā)送到客戶端進(jìn)行解釋<input id="Button" type="button" value="button" runat="server" /> 3。web服務(wù)器控件:也稱asp.net服務(wù)器控件，是Web Form編程的基本元素，也是asp.net所特有的。它會(huì)按照client的情況產(chǎn)生一個(gè)或者多個(gè)html控件，而不是直接描述html元素。如：<asp:Button ID="Button2" runat="server" Text="Button"/>那么它和html服務(wù)器控件有什么區(qū)別呢?
參照其他網(wǎng)頁(yè)的資料看法如下：
1、 Asp.net服務(wù)器控件提供更加統(tǒng)一的編程接口，如每個(gè)Asp.net服務(wù)器控件都有Text屬性。
2、 隱藏客戶端的不同，這樣程序員可以把更多的精力放在業(yè)務(wù)上，而不用去考慮客戶端的瀏覽器是ie還是firefox，或者是移動(dòng)設(shè)備。
3、 Asp.net服務(wù)器控件可以保存狀態(tài)到ViewState里，這樣頁(yè)面在從客戶端回傳到服務(wù)器端或者從服務(wù)器端下載到客戶端的過(guò)程中都可以保存。
4、 事件處理模型不同，Html標(biāo)注和Html服務(wù)器控件的事件處理都是在客戶端的頁(yè)面上，而Asp.net服務(wù)器控件則是在服務(wù)器上，舉例來(lái)說(shuō)：
<input id="Button4" type="button" value="button" runat="server"/>是Html服務(wù)器控件，此時(shí)我們點(diǎn)擊此按鈕，頁(yè)面不會(huì)回傳到服務(wù)器端，原因是我們沒(méi)有為其定義鼠標(biāo)點(diǎn)擊事件。
<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我們?yōu)镠tml服務(wù)器控件添加了一個(gè)onserverclick事件，點(diǎn)擊此按鈕頁(yè)面會(huì)發(fā)回服務(wù)器端，并執(zhí)行test(object sender, EventArgs e)方法。
<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服務(wù)器控件，并且我們沒(méi)有為其定義click，但是我們點(diǎn)擊時(shí)，頁(yè)面也會(huì)發(fā)回到服務(wù)器端。
由此可見(jiàn)：Html標(biāo)注和Html服務(wù)器控件的事件是由頁(yè)面來(lái)觸發(fā)的，而Asp.net服務(wù)器控件則是由頁(yè)面把Form發(fā)回到服務(wù)器端，由服務(wù)器來(lái)處理。
4。下面我就結(jié)合我自己的測(cè)試來(lái)說(shuō)明問(wèn)題：
這段代碼是我放在repeat中的模板里的:其中DeleteCheck是一個(gè)js腳本函數(shù)，注意是用于是否發(fā)送到服務(wù)器端的，這里就不展示腳本代碼了。 <input runat="server" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />
展現(xiàn)出來(lái)的html代碼如下： <input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >
<input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />可以看出以下幾點(diǎn):
1。當(dāng)控件屬性中有runat="server"時(shí)，生成的html控件時(shí)name和id發(fā)生的變化(.net Framework)。
2。當(dāng)asp:button服務(wù)器按鈕通過(guò)生成的頁(yè)面后轉(zhuǎn)化成類型為submit類型的Client控件。
3。當(dāng)控件是html控件時(shí)通過(guò)生成的頁(yè)面和原來(lái)的html代碼完全一樣(理由上面已經(jīng)說(shuō)名)。
另外我還測(cè)試了把這段代碼直接放到form標(biāo)記中(不放到其他子標(biāo)記中)如: <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form標(biāo)記中生成的html代碼
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />
<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />
<input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" />
<input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />
<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>
<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />
<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>這里有可以看出幾點(diǎn)：
1。當(dāng)html服務(wù)器控件在服務(wù)器端添加了服務(wù)器事件后生成的代碼變?yōu)?onclick="_doPostBack()"，實(shí)際上是調(diào)用腳本把整個(gè)窗體提交到服務(wù)器(如果沒(méi)有添件服務(wù)器事件而只是添加了runat="server"是不會(huì)發(fā)送到服務(wù)器端的)這里注意如果要在html服務(wù)器控件中添加一個(gè)客戶端事件如上面的<input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />
|
