ASP.NET中Literal與Label控制元件的區別

NO IMAGE

一、方案和背景

Literal 控制元件表示用於向頁面新增內容的幾個選項之一。對於靜態內容,無需使用容器,可以將標記作為 HTML 直接新增到頁面中。但是,如果要動態新增內容,則必須將內容新增到容器中。典型的容器有 Label 控制元件、Literal 控制元件、Panel 控制元件和 PlaceHolder 控制元件。

Literal 控制元件與 Label 控制元件的區別在於 Literal 控制元件不向文字中新增任何 HTML 元素。(Label 控制元件呈現一個 span 元素。)因此,Literal 控制元件不支援包括位置屬性在內的任何樣式屬性。但是,Literal 控制元件允許指定是否對內容進行編碼。

Panel 和 PlaceHolder 控制元件呈現為 div 元素,這將在頁面中建立離散塊,與 Label 和 Literal 控制元件進行內嵌呈現的方式不同。

通常情況下,當希望文字和控制元件直接呈現在頁面中而不使用任何附加標記時,可使用 Literal 控制元件。

在 Literal 控制元件中編碼內容

Literal 控制元件支援 Mode 屬性,該屬性用於指定控制元件對您所新增的標記的處理方式。可以將 Mode 屬性設定為以下值:

·Transform. 將對新增到控制元件中的任何標記進行轉換,以適應請求瀏覽器的協議。如果向使用 HTML 外的其他協議的移動裝置呈現內容,此設定非常有用。

·PassThrough. 新增到控制元件中的任何標記都將按原樣呈現在瀏覽器中。

·Encode. 將使用 HtmlEncode 方法對新增到控制元件中的任何標記進行編碼,這會將 HTML 編碼轉換為其文字表示形式。例如,<b> 標記將呈現為 <b>。當希望瀏覽器顯示而不解釋標記時,編碼將很有用。編碼對於安全也很有用,有助於防止在瀏覽器中執行惡意標記。顯示來自不受信任的源的字串時推薦使用此設定。

二、Literal和Label到底有什麼區別

  label在經伺服器處理後轉換成客戶端網頁時候使用html的<span>標記為住控制元件,而Literal則是什麼標記都不帶 。

  例如:<span id=”Label1″>Label</span>(label的客戶端程式碼)
        <b>指令碼之家</b>(Literal的客戶端程式碼)

  literal不可以運用樣式。定位佈局比較麻煩。在您要以程式設計方式設定文字而不新增額外的 HTML 標記時,可以向頁面新增 Literal Web 伺服器控制元件。在要向頁面動態新增文字而不新增任何不屬於該動態文字的元素時,Literal 控制元件非常有用。例如,您可以使用Literal 控制元件來顯示從檔案或流中讀取的 HTML。如果要顯示靜態文字,則可以使用 HTML 呈現它;不需要 Literal 控制元件。只有在需要以程式設計方式呈現文字時才使用 Literal 控制元件。

三、如何:向 Web 窗體頁新增 Literal Web 伺服器控制元件

  在您要以程式設計方式設定文字而不新增額外的 HTML 標記時,可以向 Web 窗體頁新增 Literal Web 伺服器控制元件。在要向頁面動態新增文字而不新增任何不屬於該動態文字的元素時,Literal 控制元件是一種很有用的方式。例如,您可以使用 Literal 控制元件來顯示您從一個檔案或者流中讀取的 HTML。

  說明: 如果想顯示靜態文字,可以使用 HTML 呈現它;不需要 Literal 控制元件。只有在需要動態更改伺服器程式碼中的內容時才使用 Literal 控制元件。

  1、從工具箱的“標準”選項卡中,將 Literal 控制元件拖動到頁面上。

  2、或者,在“屬性”視窗的“行為”類別下,將 Mode 屬性設定為 Transform、PassThrough 或者 Encode。Mode 屬性指定該控制元件如何處理向其新增的任何標記。下面的示例顯示一個簡單網頁,該頁在執行時顯示標題新聞。該頁的主體(包括 Literal 控制元件)類似於下面的程式碼。

複製程式碼 程式碼如下:
<body>
  <form runat=”server”>
    <h1><asp:Literal id=”Headline” runat=server mode=”PassThrough”/></h1>
  </form>
</body>

  3、將程式碼新增到頁面上以在執行時設定控制元件的 Text 屬性。

下面的示例顯示如何以程式設計方式設定 Literal 控制元件的文字和編碼。該頁包含一組單選按鈕,允許使用者在編碼文字和傳遞文字之間選擇。

說明: 如果您正將 Text 屬性設定為來自不受信任源的文字,則要將控制元件的 Mode 屬性設定為 Encode,這樣標記才不會形成可執行標記。

複製程式碼 程式碼如下:
<%@ Page Language=”C#” %>
<script runat=”server”>
    protected void Page_Load(object sender, EventArgs e)
    {
        Literal1.Text = “This <b>text</b> is inserted dynamically.”;
        if (radioEncode.Checked == true)
        {
            Literal1.Mode = LiteralMode.Encode;
        }
        if(radioPassthrough.Checked == true)
        {
            Literal1.Mode = LiteralMode.PassThrough;
        }
    }
</script>
 
<html>
<head runat=”server”></head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <br />
        <asp:RadioButton
            ID=”radioEncode”
            runat=”server”
            GroupName=”LiteralMode”
            Checked=”True”
            Text=”Encode”
            AutoPostBack=”True” />
        <br />
        <asp:RadioButton
            ID=”radioPassthrough”
            runat=”server”
            GroupName=”LiteralMode”
            Text=”PassThrough”
            AutoPostBack=”True” />
        <br />
        <br />
        <asp:Literal ID=”Literal1″ runat=”server”></asp:Literal> </div>
    </form>
</body>
</html>

四、Literal 類

在網頁上保留顯示靜態文字的位置。

  使用 System.Web.UI.WebControls.Literal 控制元件在網頁上保留顯示文字的位置。Literal 控制元件與 Label 控制元件類似,但 Literal 控制元件不允許對所顯示的文字應用樣式。可以通過設定 Text 屬性,以程式設計方式控制在控制元件中顯示的文字。

  警告: 此控制元件可用來顯示使用者輸入,而該輸入可能包含惡意的客戶端指令碼。在應用程式中顯示從客戶端傳送來的任何資訊之前,請檢查它們是否包含可執行指令碼、SQL 語句或其他程式碼。ASP.NET 提供輸入請求驗證功能以阻止使用者輸入中的指令碼和 HTML。還提供驗證伺服器控制元件以判斷使用者輸入。

下面的示例說明如何使用 Literal 控制元件顯示靜態文字。

  說明: 下面的示例使用單檔案程式碼模型,如果將它直接複製到程式碼隱藏檔案中,則它可能無法正常工作。此程式碼示例必須被複制到具有 .aspx 副檔名的空文字檔案中。

複製程式碼 程式碼如下:
<%@ Page Language=”C#” AutoEventWireup=”True” %>
 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
 
<html>
<head>
    <title>Literal Example</title>
<script runat=”server”>
      void ButtonClick(Object sender, EventArgs e)
      {
         Literal1.Text=”Welcome to ASP.NET!!”;
      }
   </script>
</head>
<body>
   <form id=”form1″ runat=”server”>
      <h3>Literal Example</h3>
      <asp:Literal id=”Literal1″
           Text=”Hello World!!”
           runat=”server”/>
      <br /><br />
      <asp:Button id=”Button1″
           Text=”Change Literal Text”
           OnClick=”ButtonClick”
           runat=”server”/>
   </form>
</body>
</html>

您可能感興趣的文章:

LiteralControl ASP.NET中的另類控制元件ASP.NET中Label控制元件用法詳解ASP.NET中Literal控制元件的使用方法