Lable和Literal控件的使用和區別

Lable和Literal這兩個控件是我們非常熟悉的兩個控件，都是用作內容呈現用的，但他們之間也有不同之處，分別應用於不同的地方。Lable控件會將內容呈現在html標籤span中，即Lable控件的Text屬性的值會包含在<span>標籤中。而Literal控件生成的代碼則比較乾淨，它的Text屬性的值將直接顯示在頁面中，看下面兩段代碼：

Lable：

<asp:Label ID="lblUserName" runat="server" Text="用戶名"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPwd" runat="server" Text="密碼"></asp:Label>
<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox><br />

 

Literal：

<asp:Literal runat="server" ID="litUserName" Text="用戶名"></asp:Literal>
<asp:TextBox ID="txtUserName1" runat="server"></asp:TextBox><br />
<asp:Literal runat="server" ID="litPwd" Text="密碼"></asp:Literal>
<asp:TextBox ID="txtPwd1" runat="server"></asp:TextBox><br />

 

上面兩段程序運行的結果都如下圖：

再來看看上面的代碼生成的源碼：

Lable

<span id="lblUserName">用戶名</span>
<input name="txtUserName" type="text" id="txtUserName" /><br />
<span id="lblPwd">密碼</span>
<input name="txtPwd" type="text" id="txtPwd" /><br />

Literal

用戶名
<input name="txtUserName1" type="text" id="txtUserName1" /><br />
密碼
<input name="txtPwd1" type="text" id="txtPwd1" /><br />

 

 

 

從源碼中可以很清楚看出Lable最終在客戶端會生成Span標籤，而Literal則直接顯示文本，記得曾經維護過的一個自定義控件，在不同留言器中有樣式問題，調試很久最終發現就是Lable生成的Span惹的禍，最終換成Literal得以解決，所以後來但凡要顯示文本的地方我基本都是用Literal。不過Lable也不是一無是處，Lable控件有一個AssociatedControlID，可以將該屬性指向一個表單控件的ID，通常爲TextBox，看下面代碼：

<asp:Label ID="lblUserName" runat="server" AssociatedControlID="txtUserName" Text="用戶名"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPwd" runat="server" AssociatedControlID="txtPwd" Text="密碼"></asp:Label>
<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox><br />

 

和上面的代碼基本一樣只是添加了AssociatedControlID屬性，分別指向了兩個TextBox控件的ID，添加了這個屬性後生成的源碼就變了，如下：

<label for="txtUserName" id="lblUserName">用戶名</label>
<input name="txtUserName" type="text" id="txtUserName" /><br />
<label for="txtPwd" id="lblPwd">密碼</label>
<input name="txtPwd" type="text" id="txtPwd" /><br />

可以看出有Span標籤變成了lable標籤 for屬性指向了TextBox的id。AssociatedControlID屬性的使用能夠給殘障人士帶來方便，如果使用讀屏器之類的輔助設備來和網站進行交互，AssociatedControlID屬性能幫助輔助設備將標籤和字段關聯起來。除此之外還有一個好處就是當點擊標籤時，所關聯的TextBox就會獲得焦點。

由於Lable控件的內容最終呈現在Span標籤中，所以Lable控件也支持Span標籤的一些屬性，如BackColor，CssClass等。Literal控件不生成Span標籤，當然也不支持那些屬性，不過Literal控件有個Mode屬性，該屬性有三個值

• Encode ：在編碼Html內容後再顯示控件的內容
• PassThrough ：顯示控件的內容不進行編碼
• Transform ：清除一些不支持的標記後在呈現內容

看下面的代碼：

<asp:Literal runat="server" ID="litHr1" Text="<hr />" Mode="Encode"></asp:Literal>
<asp:Literal runat="server" ID="litHr2" Text="<hr />" Mode="PassThrough"></asp:Literal>
<asp:Literal runat="server" ID="litHr3" Text="<hr />" Mode="Transform"></asp:Literal>

上面的三行代碼運行後的結果爲：<hr/>  一條橫線 一條橫線。第三種如果是運行在移動電話這樣的不支持<hr/>的設備中，將不會顯示橫線。