Asp.net控件之異同：HTML控件與Web服務器控件

作者：佚名 2009-08-03 15:43:22

Asp.net控件庫十分強大，包括web服務器控件,web用戶控件，web自定義控件，html服務器控件和html控件等。這里主要介紹html控件、html服務器控件和web服務器控件的區別。

Asp.net之所以現在開發方便和快捷，關鍵是它有一組強大的控件庫，包括web服務器控件,web用戶控件，web自定義控件，html服務器控件和html控件等。這里我主要說說html控件、html服務器控件和web服務器控件的區別。

asp.net控件介紹

1、html控件:就是我們通常的說的html語言標記，這些語言標記在已往的靜態頁面和其他網頁里存在,不能在服務器端控制的，只能在客戶端通過javascript和vbscript等程序語言來控制。

< input type="button" id="btn" value="button"/>

2、html服務器控件:其實就是html控件的基礎上加上runat="server"所構成的控件.它們的注意區別是運行方式不同，html控件運行在客戶端，而html服務器控件是運行在服務器端的。參考其他資料是這樣說的: 當ASP.NET 網頁執行時，會檢查標注有無runat 屬性，如果標注沒有設定，那么Html標注就會被視為字符串，并被送到字符串流等待送到客戶端，客戶端的瀏覽器會對其進行解釋；如果Html標注有設定runat="server" 屬性，Page 對象會將該控件放入控制器，服務器端的代碼就能對其進行控制，等到控制執行完畢后再將Html服務器控件的執行結果轉換成Html標注，然后當成字符串流發送到客戶端進行解釋

< input id="Button" type="button" value="button" runat="server" />

3、web服務器控件:也稱asp.net服務器控件，是Web Form編程的基本元素，也是asp.net所特有的。它會按照client的情況產生一個或者多個html控件，而不是直接描述html元素。如：

< asp:Button ID="Button2" runat="server" Text="Button"/>

那么它和html服務器控件有什么區別呢?參照其他網頁的資料看法如下：

1、 Asp.net服務器控件提供更加統一的編程接口，如每個Asp.net服務器控件都有Text屬性。

2、隱藏客戶端的不同，這樣程序員可以把更多的精力放在業務上，而不用去考慮客戶端的瀏覽器是ie還是firefox，或者是移動設備。

3、 Asp.net服務器控件可以保存狀態到ViewState里，這樣頁面在從客戶端回傳到服務器端或者從服務器端下載到客戶端的過程中都可以保存。

4、事件處理模型不同，Html標注和Html服務器控件的事件處理都是在客戶端的頁面上，而Asp.net服務器控件則是在服務器上，舉例來說：

< input id="Button4" type="button" value="button" runat="server"/>

是Html服務器控件，此時我們點擊此按鈕，頁面不會回傳到服務器端，原因是我們沒有為其定義鼠標點擊事件。

< input id="Button4" type="button" value="button" runat="server" onserverclick="test" />

我們為Html服務器控件添加了一個onserverclick事件，點擊此按鈕頁面會發回服務器端，并執行test(object sender, EventArgs e)方法。

< asp:Button ID="Button2" runat="server" Text="Button" />

是Asp.net服務器控件，并且我們沒有為其定義click，但是我們點擊時，頁面也會發回到服務器端。

由此可見：Html標注和Html服務器控件的事件是由頁面來觸發的，而Asp.net服務器控件則是由頁面把Form發回到服務器端，由服務器來處理。

下面我就結合我自己的測試來說明問題：

這段代碼是我放在repeat中的模板里的:其中DeleteCheck是一個js腳本函數，注意是用于是否發送到服務器端的，這里就不展示腳本代碼了。

< 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    
  < asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展現出來的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   
 < input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

asp.net控件總結

可以看出以下幾點:

1、當控件屬性中有runat="server"時，生成的html控件時name和id發生的變化(.net Framework)。
2、當asp:button服務器按鈕通過生成的頁面后轉化成類型為submit類型的Client控件。
3、當控件是html控件時通過生成的頁面和原來的html代碼完全一樣(理由上面已經說名)。

另外我還測試了把這段代碼直接放到form標記中(不放到其他子標記中)如:

< 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    
< 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">

直接放到form標記中生成的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>

asp.net控件總結二

這里也可以看出幾點：

1、當html服務器控件在服務器端添加了服務器事件后生成的代碼變為:onclick="_doPostBack()"，實際上是調用腳本把整個窗體提交到服務器(如果沒有添件服務器事件,而只是添加了runat="server"是不會發送到服務器端的)這里注意如果要在html服務器控件中添加一個客戶端事件如上面的

< input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />

變成

< input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />

那樣生成的html代碼變成

< input language="javascript" onclick="return DeleteCheck(this)  __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />

提示有腳本錯誤原因是onclick事件執行了2個腳本且書寫的格式不正確。
onclick="return DeleteCheck(this)；_doPostBack()"

這樣的話就只能執行第一個函數而第二個函數就不能執行了(return).如果用
onclick="return DeleteCheck(this)，_doPostback()"
是指2個函數同時都要執行沒有影響(相當于一條語句)。

2、控件的名字沒有發生變化，這個問題我也不太明白為什么不發生變化，請高手門指教哈

3、asp:button中的onclientclick事件生成后就變成了onclick事件了,類型變成了type="submit".然而服務器事件的onclick我想是通過發送到服務器端執行的(具體我也不太很清楚)。

4、LinkButton不定義onclick事件，它會自動的生成下面代碼發送到服務器端。
href="javascript:__doPostBack('LinkButton1',' ')"

【編輯推薦】

ASP.NET下拉框呈現不同顏色的實現
Asp.Net函數集和方法集
ASP.NET編程規范之界面設計標準淺析
ASP.NET編程模型之頁面生命周期十一步詳解
ASP.NET編程模型之HTTP協議淺析

責任編輯：周立方來源：網絡轉載

asp.net控件