ASP.NET Button、ImageButton、LinkButton、HyperLink區別 ASP.NET Button、ImageButton、LinkButton、HyperLink區別
ASP.NET Button、ImageButton、LinkButton、HyperLink區別
這4個控制元件都屬於WEB伺服器控制元件,有很多相同的屬性和事件。其區別如下所示。
在*.aspx頁面中插入Button控制元件如以下程式碼所示。
<asp:Button runat="server" ID="b1" Text="Button控制元件" />
在頁面執行後,Button控制元件最終生成的HTML標籤如以下程式碼所示。
<input type="submit" name="b1" id="b1"value="Button控制元件" />
即Button控制元件最終生成的是HTML表單控制元件中的提交按鈕,其“name”屬性和“id”屬性為伺服器控制元件中的“ID”屬性值。
在*.aspx頁面中插入ImageButton控制元件如以下程式碼所示。
<asp:ImageButton runat="server" ID="b2" ImageUrl="/img/uc1.gif" />
在頁面執行後,ImageButton控制元件最終生成的HTML標籤如以下程式碼所示。
<input type="image" name="b2" id="b2" src="/img/uc1.gif" />
類似於Button控制元件,ImageButton控制元件最終生成的也是HTML表單控制元件,只是型別為影象,其“src”屬性值(影象連結路徑)即為伺服器控 件中的“ImageUrl”屬性值。
在*.aspx頁面中插入LinkButton控制元件如以下程式碼所示。
<asp:LinkButton runat="server" ID="b3" Text="LinkButton控制元件"></asp:LinkButton>
在頁面執行後,LinkButton控制元件最終生成的HTML標籤如以下程式碼所示。
<a id="b2" href="javascript:__doPostBack('b3','')">LinkButton控制元件</a>
和以上兩個控制元件不同,LinkButton控制元件生成的HTML標籤是超級連結,只是“href”屬性指向一個瀏覽器端的javascript函式 (__doPostBack函式),並傳遞兩個字串引數。其中,第1個引數是該伺服器控制元件的“ID”屬性值,第2個引數則為可傳遞給伺服器的事件引數。
說明:__doPostBack函式的第1個引數即為引發頁面回傳的控制元件ID,後面講述回傳機制時會詳細分析。
在*.aspx頁面中插入HyperLink控制元件如以下程式碼所示。
<asp:HyperLink runat="server" ID="b4" Text="HyperLink控制元件" NavigateUrl="~/Index.aspx"></asp:HyperLink>
在頁面執行後,HyperLink控制元件最終生成的HTML標籤如以下程式碼所示。
<a id="b4" href="http://sdrabbit.blog.163.com/blog/Index.aspx">HyperLink控制元件</a>
類似於LinkButton控制元件,HyperLink控制元件所生成的HTML標籤是最常用的超級連結,其“href”屬性即為伺服器控制元件中的 “NavigateUrl”屬性值,指向一個頁面的URL。
【分析】
本題考查面試者對幾個常用且字面上容易混淆的伺服器控制元件的認識程度。解答中通過這些伺服器控制元件實際生成的HTML程式碼進行區分.
Button控制元件使用非常 頻繁,該控制元件用於提交表單資料。
ImageButton控制元件和Button控制元件基本相似,只是通過影象來表現外觀.
和Button控制元件的Click事件不 同,ImageButton控制元件的Click事件是配合System.Web.UI.ImageClickEventHandler委託工作的。即 ImageButton控制元件的Click事件處理方法中使用的事件引數型別為System.Web.UI.ImageClickEventArgs,兩個 引數X,Y可以獲取使用者單擊的精確位置並做相應的處理。
LinkButton控制元件和HyperLink控制元件直接生成超級連結標籤,從外觀上來 看,LinkButton控制元件和HyperLink控制元件是一模一樣的,因為它們生成的都是超級連結標籤。
以上幾個控制元件中,只有HyperLink控制元件不傳 遞資料給伺服器,根據“NavigateUrl”屬性直接跳轉到指定頁面。而其他三個控制元件都是通過表單將資料提交到伺服器,LinkButton控制元件有點 特殊,該控制元件通過javascript函式的__doPostBack函式將資料賦值給表單的隱藏欄位,然後提交回伺服器。
這4個控制元件都屬於WEB伺服器控制元件,有很多相同的屬性和事件。其區別如下所示。
在*.aspx頁面中插入Button控制元件如以下程式碼所示。
<asp:Button runat="server" ID="b1" Text="Button控制元件" />
在頁面執行後,Button控制元件最終生成的HTML標籤如以下程式碼所示。
<input type="submit" name="b1" id="b1"value="Button控制元件" />
即Button控制元件最終生成的是HTML表單控制元件中的提交按鈕,其“name”屬性和“id”屬性為伺服器控制元件中的“ID”屬性值。
在*.aspx頁面中插入ImageButton控制元件如以下程式碼所示。
<asp:ImageButton runat="server" ID="b2" ImageUrl="/img/uc1.gif" />
在頁面執行後,ImageButton控制元件最終生成的HTML標籤如以下程式碼所示。
<input type="image" name="b2" id="b2" src="/img/uc1.gif" />
類似於Button控制元件,ImageButton控制元件最終生成的也是HTML表單控制元件,只是型別為影象,其“src”屬性值(影象連結路徑)即為伺服器控 件中的“ImageUrl”屬性值。
在*.aspx頁面中插入LinkButton控制元件如以下程式碼所示。
<asp:LinkButton runat="server" ID="b3" Text="LinkButton控制元件"></asp:LinkButton>
在頁面執行後,LinkButton控制元件最終生成的HTML標籤如以下程式碼所示。
<a id="b2" href="javascript:__doPostBack('b3','')">LinkButton控制元件</a>
和以上兩個控制元件不同,LinkButton控制元件生成的HTML標籤是超級連結,只是“href”屬性指向一個瀏覽器端的javascript函式 (__doPostBack函式),並傳遞兩個字串引數。其中,第1個引數是該伺服器控制元件的“ID”屬性值,第2個引數則為可傳遞給伺服器的事件引數。
說明:__doPostBack函式的第1個引數即為引發頁面回傳的控制元件ID,後面講述回傳機制時會詳細分析。
在*.aspx頁面中插入HyperLink控制元件如以下程式碼所示。
<asp:HyperLink runat="server" ID="b4" Text="HyperLink控制元件" NavigateUrl="~/Index.aspx"></asp:HyperLink>
在頁面執行後,HyperLink控制元件最終生成的HTML標籤如以下程式碼所示。
<a id="b4" href="http://sdrabbit.blog.163.com/blog/Index.aspx">HyperLink控制元件</a>
類似於LinkButton控制元件,HyperLink控制元件所生成的HTML標籤是最常用的超級連結,其“href”屬性即為伺服器控制元件中的 “NavigateUrl”屬性值,指向一個頁面的URL。
【分析】
本題考查面試者對幾個常用且字面上容易混淆的伺服器控制元件的認識程度。解答中通過這些伺服器控制元件實際生成的HTML程式碼進行區分.
Button控制元件使用非常 頻繁,該控制元件用於提交表單資料。
ImageButton控制元件和Button控制元件基本相似,只是通過影象來表現外觀.
和Button控制元件的Click事件不 同,ImageButton控制元件的Click事件是配合System.Web.UI.ImageClickEventHandler委託工作的。即 ImageButton控制元件的Click事件處理方法中使用的事件引數型別為System.Web.UI.ImageClickEventArgs,兩個 引數X,Y可以獲取使用者單擊的精確位置並做相應的處理。
LinkButton控制元件和HyperLink控制元件直接生成超級連結標籤,從外觀上來 看,LinkButton控制元件和HyperLink控制元件是一模一樣的,因為它們生成的都是超級連結標籤。
以上幾個控制元件中,只有HyperLink控制元件不傳 遞資料給伺服器,根據“NavigateUrl”屬性直接跳轉到指定頁面。而其他三個控制元件都是通過表單將資料提交到伺服器,LinkButton控制元件有點 特殊,該控制元件通過javascript函式的__doPostBack函式將資料賦值給表單的隱藏欄位,然後提交回伺服器。