html控制元件、html伺服器控制元件和web伺服器控制元件的區別
、html伺服器控制元件和web伺服器控制元件的區別。
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(object sender, EventArgs e)方法。
<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net伺服器控制元件,並且我們沒有為其定義click,但是我們點選時,頁面也會發回到伺服器端。
由此可見:Html標註和Html伺服器控制元件的事件是由頁面來觸發的,而Asp.net伺服器控制元件則是由頁面把Form發回到伺服器端,由伺服器來處理。
4、下面我就結合我自己的測試來說明問題:
這段程式碼是我放在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</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</button>
<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />
可以看出以下幾點:
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</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 標記中生成的html程式碼
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
i f (!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>
這裡有可以看出幾點:
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、asp:button中的onclientclick事件生成後就變成了onclick事件了,型別變成了type="submit".然而伺服器事件的onclick我想是通過傳送到伺服器端執行的。
3、LinkButton不定義onclick事件,它會自動的生成下面程式碼傳送到伺服器端。 href="javascript:__doPostBack('LinkButton1',' ')"
4、asp:button中的onclientclick事件生成後就變成了onclick事件了,型別變成了type="submit".然而伺服器事件的onclick我想是通過傳送到伺服器端執行的。