當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

asp.net服务器控件与html服务器控件的区别

發布時間：2025/6/15 asp.net 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 asp.net服务器控件与html服务器控件的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在ASP.NET開發中用到的控件可以分為三種:傳統html控件(比如<input type="button"/>)、html服務器控件(比如<input type="button" runat="server"/>)以及ASP.NET服務器控件(比如<asp:Button runat="server"?/>)。

初學ASP.NET，第一種控件相當于在客戶端運行，在服務器端無法用代碼捕獲它；后面兩種控件都是在服務器端運行，他們都需要設置id，我們可以在服務器端用id來自動捕獲它們，html服務器控件<input type="button" runat="server"/>對應著System.Web.UI.HtmlControls.HtmlInputButton，ASP.NET服務器控件<asp:Button />對應著System.Web.UI.WebControls.Button類。但是html服務器控件和ASP.NET服務器控件的屬性并不是完全相同的，比如button1是ASP.NET服務器Button，button2是html服務器Button，如果我們想獲得ASP.NET服務器Button上的文字我們用button1.Text獲得，如圖：

如果我們想獲得html服務器Button上的文字我們用button2.value，如圖下圖：

為了進一步搞明白二者在功能實現上的區別，以下面的例子進行分析:

[html]?view plaincopy

<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="MyForm1.aspx.cs"?Inherits="MyForm1"?%>??

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??

<html?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<title></title>?????

????<script?type="text/javascript"?language="javascript">??

????????function?BtnClientClick()???

????????{??

????????????alert("客戶端Button?Clicked");??

????????}??????????

????</script>??

????<script?runat="server"?type="text/C#">??

????????protected?void?Page_Load(object?sender,?EventArgs?e)??

????????{??

????????????HttpRequest?request?=?this.Request;??

????????}??

????????protected?void?button_Click(object?sender,?EventArgs?e)??

????????{??

????????????//注意:下面的Response.Write中必須把"script"一詞拆分開，因為不能在已有的腳本中再寫script腳本，??

????????????//否則就會導致scrip匹配出現問題,只要把script拆分成兩個詞就沒事了，這樣編譯環境就不會自動將script混亂匹配了??

????????????//但是在后臺cs文件中就可以直接寫script，不用拆分??

????????????Response.Write("<scr"+"ipt?language='javascript'>alert('服務器端Button?Clieked')</scr"+"ipt>");??

????????}??

????</script>??

</head>??

<body>?????

??<form?id="form1"?runat="server"?action="MyForm1.aspx"?>??

???<div>??

???<asp:Button?ID="button1"?runat="server"??OnClientClick="BtnClientClick()"?OnClick="button_Click"?Text="ASP.NET服務器Button"??/>??

???<input?type="button"?runat="server"?id="button2"?onclick="BtnClientClick();"??onserverclick="button_Click"?value="html服務器Button"??/>??

???</div>??

???</form>??

</body>??

</html>??

?生成的界面很簡單，只有兩個按鈕，這兩個按鈕所實現的功能完全相同，如下圖所示:

單擊其中任何一個按鈕都會首先觸發客戶端單擊事件，（asp.net服務器控件的客戶端單擊事件是OnClientClick，html服務器控件的客戶端單擊事件是onclick。）（asp.net服務器控件的服務器端單擊事件是onclick()，html服務器控件的服務器端單擊事件是onserverclick（））如下圖所示:

然后會繼續觸發服務器單擊事件，如下圖所示:

下面我們看一下生成的源文件：

[html]?view plaincopy

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??

???

<html?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<title></title>?????

????<script?type="text/javascript"?language="javascript">??

????????function?BtnClientClick()???

????????{??

????????????alert("客戶端Button?Clicked");??

????????}??????????

????</script>??

??????

</head>??

<body>?????

??<form?name="form1"?method="post"?action="MyForm1.aspx"?id="form1">??

<div>??

<input?type="hidden"?name="__EVENTTARGET"?id="__EVENTTARGET"?value=""?/>??

<input?type="hidden"?name="__EVENTARGUMENT"?id="__EVENTARGUMENT"?value=""?/>??

<input?type="hidden"?name="__VIEWSTATE"?id="__VIEWSTATE"?value="/wEPDwUKLTEwODIyMzU1NWRkDveqHJXNO04bTmLlvLfoWmMw5iEk5QY6nOLJOYe9iiE="?/>??

</div>??

???

//<![CDATA[?

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

???

<div>??

???

????<input?type="hidden"?name="__EVENTVALIDATION"?id="__EVENTVALIDATION"?value="/wEWAwKjzJ3LDgKs34rGBgLbo7GGCC0eG7DCZsU97rk+MMsqMCuRNTchABLy1mmYQ3jKMmT3"?/>??

</div>??

???<div>??

???<input?type="submit"?name="button1"?value="ASP.NET服務器Button"?onclick="BtnClientClick();"?id="button1"?/>??

???<input?onclick="BtnClientClick();?__doPostBack('button2','')"?name="button2"?type="button"?id="button2"?value="html服務器Button"?/>??

???</div>??

???</form>??

</body>??

</html>??

注意：由于form1內含有服務器控件，所以form1必須具有runat="server"。只要form1具有runat="server",最終生成的html源代碼中會自動生成一個doPostBack方法，如果沒有runat="server“,那么不會產生doPostBack方法。doPostBack方法是用于進行回發的，是通過theForm.submit()這句代碼來實現，即提交表單實現了回發的過程，從而在服務器端觸發一些列事件:Page_Load事件、Button的單擊事件等等，你也許要問在服務器怎么知道該觸發哪個按鈕的單擊事件呢？其實服務器會保存服務器控件的狀態和屬性，它會利用ViewState來保存這些信息，具體是通過上面的許多自動生成的<input type="hidden" />來實現的，這部分的內容是默認經過Base64編碼的，在回傳到服務器處理時服務器又會將它們還原成控件的狀態數據。

我將源文件中的幾處做了重點標記，我們著重分析一下，如下圖所示：

1.首先來看<asp:Button ID="button1" runat="server"? OnClientClick="BtnClientClick()" OnClick="button_Click" Text="ASP.NET服務器Button"? />，這里面的OnClientClick表示的是客戶端單擊事件，OnClick表示的是服務器端單擊事件，這里的OnClick寫成onclick也是正確的。注意：該ASP.NET服務器Button沒有onserverclick，OnClick起到了onserverclick的功能。

再來看<input type="button" runat="server" id="button2" οnclick="BtnClientClick();"? onserverclick="button_Click" value="html服務器Button"? />，這里的onclick與上面的不同，這里的onclick表示的是客戶端單擊事件，onserverclick表示的是服務器端單擊事件。注意：該html服務器Button沒有onclientclick，onclick起到了onclientclick的功能。

2.由于form1是runat="server",源代碼中自動生成了一個用于回發的doPostBack客戶端腳本。

3.ASP.NET服務器控件<asp:Button runat="server"/>被解析成了<input type="submit"/>，單擊該按鈕的時候首先會執行客戶端腳本οnclick=”BtnClientClick();“，由于已經解析成了submit，所以然后會自動將表單進行提交，相當于執行了form1.submit()，實現回發，進而觸發Page_Load事件與按鈕單擊等事件。這一過程就實現了先觸發客戶端單擊事件，然后觸發服務器端單擊事件。

4.html服務器控件<input type="button" runat="server" id="button2" οnclick="BtnClientClick();"? onserverclick="button_Click" value="html服務器Button"? />被解析成了<input οnclick="BtnClientClick(); __doPostBack('button2','')" name="button2" type="button" id="button2" value="html服務器Button" />，之前的客戶端單擊事件οnclick="BtnClientClick();"? 和服務器單擊事件onserverclick="button_Click"在解析后被整合成了一個οnclick="BtnClientClick(); __doPostBack('button2','')" 。解析后，該按鈕的單擊事件綁定了兩個事件處理方法，第一個BtnClientClick()用于觸發客戶端單擊事件，后面的__doPostBack('button2','')用于進行回發，并且還給doPostBack設置了參數，符合EventHandler（object sender,EventArgs e）的風格，通過觀察doPostBack函數可以知doPostBack(eventTarget, eventArgument)最終又會執行theForm.submit()，從而對表單進行提交，進行回發，從而也觸發了服務器端的Page_Load事件和按鈕單擊事件。

需要特別注意的是，我們在編譯器中編寫單擊事件οnclick="BtnClientClick();"時，在BtnClientClick()后面加了一個分號，這樣在生成源文件的時候會發現<input οnclick="BtnClientClick(); __doPostBack('button2','')"? />在BtnClientClick()和__doPostBack('button2','')之間多了一個分號，如下圖所示:

如果我們在編寫<input type="button" runat="server" id="button2" οnclick="BtnClientClick()"? onserverclick="button_Click"/>時沒有在BtnClientClick()后面添加分號，那么最終生成的源代碼中也沒有分號:input οnclick="BtnClientClick() ?__doPostBack('button2','')"? />，這樣就會報錯了。所以我們在寫事件代碼時，最好要在函數后面添加分號，這是好的編程風格。

5.如果ASP.NET服務器控件既寫了客戶端單擊事件OnClientClick="return ClientFun()"或者OnClientClick="ClientFun()),? 又寫了服務器端單擊事件οnclick="ServerFun()",/那么當單擊該button時，先執行客戶端單擊事件OnClientClick，調用ClientFun(),如果形式是OnClientClick="return ClientFun()"，如果返回的是false,則不會觸發服務器端的單擊事件，也不會導致回發，如果OnClientClick="return ClientFun()"返回的是true或者OnClientClick="ClientFun())的形式，/那么在執行完客戶端腳本之后進行回發（回發是指從客戶端到服務器端），回發時，也要先觸發Page_Load事件，然后再根據導致回發的參數確定執行哪一個服務器控件的事件，在本例子中執行ServerFun()，即button_Click(object sender, EventArgs e)/中的Response.Write("<script language='javascript'>alert('服務器端Button Clieked')</script>")代碼，該代碼將里面的腳本寫入客戶端進行執行。html服務器控件應該也具有相同的特性。

具體可以查看:ms-help://MS.MSDNQTR.v90.chs/dv_vwdcon/html/1ab97f0b-1c38-4897-85b0-ac915f6a182b.htm

總結

以上是生活随笔為你收集整理的asp.net服务器控件与html服务器控件的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android Fragment 真正的
下一篇：浅谈ASP.NET的Postback