html控件、html伺服器控件等的差別詳解

asp.net之是以現在開發友善和快捷，關鍵是它有一組強大的控件庫，包括web伺服器控件,web使用者控件，web自定義控件，html伺服器控件和html控件等。這裡我主要說說html控件

、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" />我們為Html伺服器控件添加了一個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 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" />

    <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 name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server 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我想是通過發送到伺服器端執行的。