1. 程式人生 > >html控制元件和服務端控制元件的區別

html控制元件和服務端控制元件的區別

ASPNET中共有幾種型別的控制元件?
三種:1-asp.net控制元件(動態) 2-標準的html控制元件(靜態) 3-標準的html控制元件加runat="server"屬性(動態)
動態頁面主要由這三種控制元件畫出來。從資料庫獲取到資料後把資料繫結到這些控制元件上發給瀏覽器顯示出來。把資料繫結到控制元件屬性的時候有兩個重要的方法
Eval("欄位")
Bind("欄位")
Eval("欄位")方法只是把資料繫結到資料控制元件上,並不提供修改的操作。
Bind("欄位")方法是把資料繫結到資料控制元件上,並提供修改的操作。
ASPNET中共有幾種型別的控制元件?
兩種:
1. 客戶端控制元件,也就是我們在

HTML中經常用到的
2. 服務端控制元件,例如: <asp:TextBox ID="txt" runat="server" />

客戶端控制元件也可以轉成服務端控制元件
<input type="text" id="txt" runat="server" />

他們的區別?
1.
編譯 ASP.NET 應用程式時,具有 runat=server 屬性的 HTML 伺服器控制元件被編譯為程式集。可想html控制元件在客戶端也要在記憶體中生產一個dll,並加到dom模型中。這樣js就能編輯它了。
2.
區別:伺服器端控制元件都會有個runat="Server"屬性,
這樣才能夠在後臺對其進行設定修改,
也就是在cs

程式碼裡面能對其修改設定。
你做下測試 你放個HTML控制元件 在CS程式碼是引用不出控制元件名的
然後你個HTML控制元件加上runat="Server"  CS程式碼就能引用該控制元件了
本質上ASP.NET 的伺服器控制元件 解析後返回到前臺還是HTML控制元件
你建個頁面 放一個asp:textbox上去
然後執行頁面,然後檢視頁面原始檔
你會發現放上的伺服器控制元件變成了HTMLinupt type="button"

至於你說的檢視狀態應該是說這個吧:
由於HTTP連線屬於無狀態的,每次頁面請求都無法記錄上次請求頁面的資訊。
那麼要儲存上次請求頁面上控制元件的值,也就是頁面重新整理後,填寫的值不變,比方在textbox

填了個a,頁面重新整理後還是'a',.NET框架為實現這種機制,於是就用到了viewstate檢視狀態來儲存這些控制元件的值,
那麼將所有控制元件的值存在什麼地方呢?你可以執行你的程式,然後在頁面中檢視原始檔,就可以看到一個input type="hidden" name="__VIEWSTATE"的標籤,這個就是你所謂的檢視,它是經過伺服器序列化過的,然後伺服器接收後會反序列化這些隱藏域的值然後又從新給這些控制元件賦值,從而頁面重新整理後還能記錄上次請求時候的所有控制元件的值。伺服器控制元件都會預設儲存VIEWSTATE的 有個屬性(EnableViewState)可以設定的, 設定為Flase就不儲存了,頁面重新整理後,值也就沒了,可以做個測試放個textbox設定為EnableViewStatefalse,然後輸入個值,然後再用按鈕去重新整理頁面,那麼textbox會為空,因為沒有檢視狀態記錄到上次你輸入的值。

3.
asp.net控制元件是服務端控制元件
響應服務端事件
HTML控制元件是客戶端控制元件
響應客戶端事件
如果你對服務端/客戶端不明白的話先去了解一下
簡單來說
HTML客戶端的事件是不會提交給服務端的
比如說點選一個按鈕 改變文字的顏色
只是針對使用者機器本身的 不會發送資料包給遠端的伺服器
asp.net按鈕點選後
將會以post或者get形式傳送給伺服器
進行資料庫操作等等 頁面提交後將會重新整理
但是ajax技術可以使客戶端控制元件傳送請求給webservice
具體的用法
如果強調客戶端的 應用
用客戶端控制元件更能使使用者感覺到方便
不用重新整理頁面
而需要資料庫等操作時 肯定要用服務端控制元件
但是沒有絕對的
我現在做的專案就是兩者結合用

4.
web伺服器控制元件並非只是執行在伺服器端這麼簡單,它是.NET中封裝好的元件,每個控制元件都是一個物件,屬於某個基類,有自己的屬性,事件和方法.由在.net framework下執行.
HTML只是普通的HTML標記,就算加上runat=server也沒有服務端控制元件那麼強大的方法,只是有簡單的屬性和事件而已.HTML控制元件有runat=server後在伺服器端載入,可以通過伺服器端操縱這個控制元件,比如賦value.和真正的Web伺服器控制元件還差的很遠.充其量只能算是一行程式碼.

5.
設定為伺服器控制元件可以通過頁面.cs檔案使用,它的值都可以在後臺得到。

<input type="text" id="txt1" value="" runat="server" />

這樣你在後臺可以通過this.txt1.Value來獲取到文字框中的值。

標準的伺服器控制元件是<asp:TextBox runat="server" ID="TextBox1" ></TextBox>
它在後來的使用是this.TextBox1.Text而不是.Value

6.
因為伺服器要用這些控制元件呀。
    HTML控制元件是從HTML標記衍生來的,HTML控制元件的外形與HTML標記相似,不同之處在於:HTML標記只能在客戶端瀏覽器中使用,伺服器無法使用。
    伺服器通常要把控制元件中的資料或存於資料庫中,或做些改變重新發回去等事情。 如果不設定為伺服器控制元件,伺服器就不能使用它。

7.
 Asp.net之所以方便和強大,關鍵是它有一組強大的Asp.net伺服器控制元件,在Asp.net中我們經常會遇到Html控制元件,Html伺服器控制元件、Web控制元件和Asp.net伺服器控制元件。

  Html控制元件:就是我們傳統所說的Html 超文字標記語言,這些Html控制元件在以往的靜態網頁或網頁裡即可滿足我們的需求,Html控制元件並沒有辦法利用程式直接來控制它們的屬性、使用方法和接收事件,我們必須另外學習其它如JavaScript 等程式語言才得以控制。如:<input id="Button1" type="button" value="button" />

  Html伺服器控制元件:就是上面我們講的Html控制元件的屬性里加上runat="server"所構成的控制元件,至於Html控制元件和Html伺服器控制元件之間的區別很明顯,Html伺服器控制元件是運行於伺服器端,Html控制元件是運行於客戶端。具體來說:當ASP.NET 網頁執行時,會檢查標註有無runat 屬性,如果標註沒有設定,那麼Html控制元件就會被視為字串,並被送到字串流等待送到客戶端,客戶端的瀏覽器會對其進行解釋;如果Html控制元件有設定runat="server" 屬性,Page 物件會將該控制元件放入控制器,伺服器端的程式碼就能對其進行控制,等到控制執行完畢後再將Html伺服器控制元件的執行結果轉換成Html標註,然後當成字串流傳送到客戶端進行解釋。如:<input id="Button1" type="button" value="button" runat=server” />

  Asp.net伺服器控制元件:也叫Web伺服器控制元件,Asp頁面中用來定義Web應用程式使用者介面的元件,是Web Forms程式設計模型的基本元素,它會依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發回到伺服器端,由伺服器來處理。

  以上是我們對Asp.net裡的控制元件進行了簡單的介紹,我們通常說的Web控制元件也就是指Asp.net伺服器控制元件。


5.
1.一個網頁裡可以劃分為兩部分:
1.1一部分是固定不變的(沒有runat=server)
 這一部分的在ASP.Net中是逐字輸出的,在空間樹中有Literal控制元件直接生成,在頁面中不能對其進行修改,因為它沒有自己對應的物件例項

1.2一部分是變化的(runat=server)
 這一部分在ASP.Net中首先會生成一個對應的物件例項,通過這個物件例項在頁面中可以對其進行修改,這種控制元件叫做伺服器控制元件,但是這種控制元件又分為兩種:
1.2.1一種是System.Web.UI.HtmlControls名稱空間下的控制元件,這種控制元件可以在後綴名為aspxhtm檔案下使用

1.2.2一種是System.Web.UI.WebControls名稱空間下的控制元件,這種控制元件可以在後綴名為aspx檔案下使用

2.由上面的內容可知,一個頁面程式在執行時,其實是把一個頁面檔案轉換為一個類的例項,這個類就是頁面類(Page),這個類有個Controls的屬性,通過它可以得到一個ControlCollection型別的物件,這個物件包含了該頁面下的所有控制元件(由上面的劃分方法獲得),而頁面下的控制元件也有ControlCollection屬性,也包含有子控制元件,由此就構成了一個控制元件樹。此控制元件樹可以在頁面命令裡把Trace設定為True時看到。


---------------------asp.net關於控制元件and控制元件事件的個人總結----------------------------
1.關於控制元件
asp.net一共有兩種控制元件一種是伺服器端控制元件,會在伺服器端生成對應的類例項,執行在伺服器端。一種是客戶端控制元件一位元組流的方式輸出到瀏覽器端在瀏覽器端生成DOM物件例項,執行在客戶端。客戶端控制元件就是標準的html標籤,客戶端控制元件又分為兩種一種是asp.net自身的控制元件如: <asp:Button ID="Button1" runat="server" Text="Button" />。一種是標準的html控制元件加一個ruant=server屬性的執行在伺服器端的客戶端控制元件。<input type="text" id="t1" runat="server" />這種控制元件一旦加了ruant=server屬性後便會在伺服器端生成一個物件,在網站的後臺程式碼中就可以操縱它了。其實不光是它,所有的伺服器端控制元件都會在伺服器端生成一個物件,也就是說每一個伺服器端控制元件都對應著一個物件例項,它們都必須有runat="server"屬性。而客戶端控制元件也就是標準的html控制元件不會在伺服器端生成物件例項,它是在輸出到瀏覽器後變成了DOM模型中的客戶端控制元件,供js指令碼來操縱的。在aspx動態模板上有很多控制元件na怎樣區別不同的控制元件呢?通過ID屬性,可以給每一個控制元件(包括客戶端控制元件)加一個唯一標識它的ID屬性來區別不同的控制元件。最後最重要的一點是不管頁面模板上放的是什麼控制元件最終都被轉換成為標準的html形式的位元組流輸出到了客戶端的瀏覽器中(瀏覽器只能識別標準的html標記語言)瀏覽器拿到位元組流後,按照包頭的編碼轉換為字串也就是html文件,然後解析html文件解析為一個dom樹模型接著瀏覽器開始顯示dom樹,這時頁面就到了客戶端了,就可用js來操縱整個html文件了這一部分的程式設計叫前端或前臺程式設計,可以看到在整個的過程中asp.net僅僅扮演了一個動態模板的的角色最終輸出的結果永遠是靜態的標準的html標記,所以asp.net其實就是一個模板一種動態的生成靜態頁面的技術(有關一次請求的處理過程以及asp.net程序和頁面類的一系列事件在另外的筆記中和部落格園的部落格中有詳細記載)。最後一點是關於這三種控制元件的效能,html標準控制元件封裝最少效能最佳,html標準控制元件加一個ruant=server屬性的執行在伺服器端的控制元件的居次,而標準的伺服器端控制元件的功能是最強的但也是封裝最多的相對於前面兩個它效率是最慢的。所以能用html標準控制元件完成的任務最好不要用另外兩種。


2.關於控制元件事件
[1]客戶端控制元件的控制元件事件是註冊在頁的<script></script>標記中在瀏覽器中用js來執行的.
[2]而伺服器端控制元件的事件是註冊在了伺服器的後臺頁面類物件上的是用c#在伺服器端執行的.
[3]不過伺服器控制元件功能比較強大,它還有一個事件叫 OnClientClick 這個事件可以在瀏覽器端用js執行,如果給一個標籤同時加上OnClientClick事件和OnClick事件那麼當用戶點選該控制元件時將先在客戶端執行一遍事件處理方法當請求到達伺服器端後還要執行一遍伺服器端的事件處理器。嗯是挺強悍的。
[4]最後一種控制元件事件是執行在伺服器端的客戶端控制元件也就是標準的html控制元件加一個ruant=server屬性的控制元件,它的事件和客戶端控制元件是一樣的也是註冊在頁的<script></script>標記中在瀏覽器中用js來執行的。雖然他也在後臺生成一個類的例項,但它不能在伺服器端生成事件處理器,不是嫡系的待遇就是不一樣啊呵呵呵!
1<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
2<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
2protected void Button1_Click(object sender, EventArgs e){}
3<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="btn_click();" onclick="Button1_Click" />
4<input id="Button1" type="button" value="button"  runat ="server" onclick="return Button1_onclick()" />   
4<script type="text/javascript">
        function Button1_onclick() {  }
     </script>