ASP.NET前臺代碼綁定後臺變量方法總結

一般來說,在前臺代碼的三種位置可能會用到(綁定)後臺變量:
  • 服務器端控件屬性或HTML標籤屬性
  • JavaScript代碼中
  • Html顯示內容的位置(也就是開始標籤與結束標籤之間的內容,如<div>這裏</div>(Html標籤)或者<asp:Label ID="Label2" runat="server" Text="Label">這裏</asp:Label>(服務器端控件),它作爲佔位符把變量顯示於符號出現的位置)

    對於第一種位置,有一些約束條件:

    (1)一般的屬性要求是字符串型或數值型(下面會提到有些服務器端屬性支持屬性爲數據集合);

    (2)並不是所有的屬性都可以綁定變量,有些屬性例如runat屬性必須是"server"常量,即使綁定的字符串是server,也會導致分析器分析時出錯;

    (3)有一種屬性,他要求屬性值有約束(類型約束,比如服務器端控件要求TabIndex屬性是short類型,或者字符串內容有約束),也應該在綁定時滿足,否則依然可能編譯時報錯;

    (4)還一種屬性,雖然屬性本身有約束,但即使綁定的變量不滿足約束,也可以編譯通過,比如input的checked屬性,它只有checked字符串是合法的,但如果通過綁定獲取到的字符串不是checked,那麼這些屬性將有自己內部處理機制,來保證可以正常使用;

    (5)還要注意,即使對於同一類屬性,服務器端和HTML的屬性的處理機制也不同,同樣是TabIndex(tabIndex),前者如果不滿足,則分析器錯誤,後者則忽略這一問題。

    對於第二種位置,一般只要綁定的後臺變量和JavaScript中數據類型兼容即可。

    對於第三種位置,如果綁定出現的位置不在服務器端控件內部,則沒有約束條件,只要是常量字符串可以出現的位置,均可以綁定。但是對於置於服務器端控件內部,也就是上面那種<asp:Label ID="Label2" runat="server" Text="Label">這裏</asp:Label>的方式,則有約束條件。通過總結,歸納爲四類服務器端控件,如果綁定的代碼出現在這些控件的開始和結束標籤之間(這裏所說的控件,是指如果綁定代碼外有多層的嵌套控件包圍,則是指包圍綁定代碼的最內層控件),有不同的顯示結果:

    (1)約束型控件:這類控件要求它的開始標籤和結束標籤中只能包含指定的子控件,因此如果在這裏出現代碼塊,將編譯錯誤。例如:

<asp:DataList runat="server"></asp:DataList>,在它之間,要求必須嵌套<ItemTemplate></ItemTemplate>。

    (2)非嵌套類控件:這類控件,不允許在內部嵌套其他控件或標籤,只能是常量字符串,它會將開始標籤和結束標籤中常量字符串內容作爲他的屬性。例如上面提到的TextBox,它會將標籤間內容作爲它的Text屬性值。

  (3)嵌套類控件:這類控件,可以嵌套其他任意控件,也可以包含字符串,因此可以正常顯示綁定代碼塊所表示的字符串內容。例如Label控件、Panel等。

  (4)數據綁定類控件:這類控件是ASP.NET提供的服務器端控件,除了可以綁定普通的變量類型,也可以綁定一個數據集合(只能採取下面的第二種方式實現)。

    關於是否加引號:在以上三個位置使用時,是否應該將<%= str%>或<%# str %>置於單引號或雙引號中呢?對於在不同位置,處理的方式是不同的:(具體請在下面兩種方式的具體介紹時,加以體會)

    (1)對於第一種位置,由於JavaScript是弱類型的,如果綁定時加引號,顯然就認爲就當做字符串來處理,這始終是正確的;如果綁定時不加引號,它將認爲這是個數值型的,那麼如果獲取的真是數值,當然可以,如果是非數值型,則將產生腳本錯誤,這即使對於JavaScript賦值常量時,也是同樣的:

        var test1 = 123b;//運行時報錯
        var test2=123;//正確,是數值型
        var test3="123b";//正確,字符串型

    (2)對於第二種位置,經過測試,無論是對於服務器端控件屬性還是HTML標籤屬性,加引號總是正確的;如果不加引號,則兩種屬性的處理方式不同:

  • 對於服務器端控件屬性,如果綁定的代碼塊不加引號,則編譯時會提示“驗證(ASP.NET):特性值前後必須加引號”的警告信息,但是生成爲HTML後,對應生成的HTML屬性已經被加上引號並獲取了正確的綁定結果,因此加不加引號不會影響使用,但是建議對於規範的代碼,還是加上爲好;
  • 對於HTML標籤屬性,如果不加引號,則編譯時會提示“驗證(XHTML 1.0 Transitional): 特性值前後必須加引號”的警告信息,並且生成爲HTML屬性也確實沒有加上引號,那麼雖然屬性後面確實是沒有加上引號的正確的綁定值,但是不一定能展示出想要看到的結果。比如對於input標籤的value屬性,如果綁定的字符串是"    hello world from variable”,則在客戶端的input顯示出的內容實際上只是"hello”字符串,生效的屬性值是一個被截斷的字符串,它從屬性後的一串字符串(若未加引號)的第一個非空字符開始,截止到下一個空字符的前一個字符爲止(比如對於"      hello world”,結果將是"hello”),因此,加上引號是必須的。

    (3)對於第三種位置,加與不加引號,獲取的值及其顯示均不受影響。

    因此建議,所有綁定表達式都加上引號,作爲字符串獲取,然後根據實際需求,用相應函數進行轉換,得到所需要的類型。

    另外,這裏所說的後臺變量是泛指的,包括如下:

  • 成員變量
  • 方法或屬性的返回值 
  • 表達式,也就是所有後臺能夠執行的代碼,運行後所得到的值(也就是直接將後臺代碼寫在前臺代碼中,記得使用完全限定名或在後臺中using相關namespace)
  • 數據集合

    後臺變量有一些約束條件,需要滿足:

    (1)變量修飾符要求。變量是靜態或者實例字段均可。對於代碼隱藏模式的ASP.NET,以上的所述的變量必須爲public或protected類型(因爲是基類與派生類的關係),private或者internal都不行,而代碼嵌入模式則任何修飾符的變量均可訪問(一個類內部的關係)。

    (2)變量類型要求。由於前臺屬性一般是字符串類型,而JavaScript基本類型也就是字符串型、數字型、布爾型,因此對應的變量應該也是這幾種方式,其餘類型如果不被支持(如複雜類型、數組、引用類型等),前臺獲取的就是調用了變量的ToString()方法所得到的字符串。因此,在綁定時,要根據情況看是否能進行隱式類型轉換,必要時還要用相關函數來強制轉換,以保證前臺可以獲得正確的值。當然,對於數據綁定類控件,它的有些屬性可以爲數據集合,但這時的綁定只能通過下面第二種方式才被支持。

    以上是一些概念和基本約束,這些都是兩種方式都應該滿足的,下面具體介紹兩種方式,來實現前臺代碼中(以下稱爲代碼塊)綁定後臺變量的功能。

一. <%= str%>

    此種方式其實是ASP 時代就支持的,ASP 通過包含在 < % 和 %>中的表達式將執行結果輸出到客戶瀏覽器 , 如:< % =test %>就是將變量test的值發送到客戶瀏覽器中。在ASP.NET中,這個表達式依然可以使用,並可以出現在前臺代碼的上述三個位置,但是要注意,除了上述的一般性約束外,對於控件屬性,還必須是綁定到服務器端控件的屬性。另外,它只能綁定上面講的前三種變量類型,不支持綁定數據集合。例子如下:

後臺代碼

public partial class WebForm2 : System.Web.UI.Page
   {
       public string GetVariableStr;//注意變量的修飾符
       protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               GetVariableStr = "hello world from variable";
           }
       }
       protected string GetFunctionStr()//注意返回值的修飾符
       {
           return "hello world from Function";
       }
   }

前臺代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function fun() {

            var str = '<%= DateTime.Now %>';
            //前臺位置1,綁定的是第三種變量類型(也是第二種方式,?因爲Now是個屬性)
            alert(str);
        }
    </script>
</head>
<body onload="fun()">
    <form id="form1" runat="server">   
        <div>
             <input type="text" value="<%= GetVariableStr %>" />
                                                  <%--前臺位置2,綁定的是成員變量--%>
             "<%= GetFunctionStr() %>"
                                                  <%--前臺位置3,綁定的是一個方法的返回值>--%>
        </div>
    </form>
</body>
</html>

    一些錯誤的使用:

    之所以說第一種綁定方式要用於非服務器端控件的屬性,是因爲如果應用於這些服務器端屬性時,這些代碼實際上不被解析。 比如:

 <asp:Label ID="Label1" runat="server" Text="<%= GetVariableStr %>"></asp:Label>
 <asp:TextBox ID="TextBox1" runat="server" Text="<%= GetVariableStr %>"></asp:TextBox>

則顯示出來的Label1的文本是空,而TextBox中文本是"<%= GetVariableStr %>”,所以記住,對服務器端控件的屬性加這樣的代碼塊,將不被解析,而是將這一字符串直接作爲屬性值了,所以不是想要的結果。如果引號也不加上,將會編譯錯誤,提示“服務器標記不能包含 <% ... %> 構造。”。

    這裏結合開篇提到的關於將綁定代碼快置於“Html顯示內容的位置”時,如果在服務器端控件內,那四類控件如何顯示的問題。如下:

  <asp:Label ID="Label1" runat="server" >"<%= GetVariableStr %>"</asp:Label>
  <asp:TextBox ID="TextBox1" runat="server" >"<%= GetVariableStr %>"</asp:TextBox>

    其中,Label1屬於嵌套類控件,Label1確實顯示了正確的結果,TextBox屬於非嵌套類控件,TextBox如果用這種方式,將會產生編譯錯誤,提示“此上下文中不支持代碼塊。”

二. <%# str %>

    ASP.NET 引入了一種新的聲明語法 <%# %>。該語法是在 .aspx 頁中使用數據綁定的基礎,所有數據綁定表達式都必須包含在這些字符中。這裏從用法和適用範圍等方面與第一種綁定方式進行區分。

    從出現的位置來看,除了能出現在第一種代碼塊出現的所有位置外,他還可以出現在服務器端控件的屬性中。

    從綁定的變量類型上看,他還可以配合ASP.NET的數據綁定類控件,來綁定上述的第四種“變量”類型,就是數據集合(DropDownList,DataList,DataGrid,ListBox這些是數據綁定類控件,數據集合包括ArrayList(數組),Hashtable(哈稀表,DataView(數據視圖),DataReader等)。

    從用法上看,在前臺代碼中除了在相應位置寫上<%# %>外,在後臺代碼中,還需要使用DataBind()方法。以下是實例:

前臺代碼:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function fun() {

            var str = '<%# DateTime.Now %>';

            alert(str);
        }
    </script>
</head>
<body onload="fun()">
    <form id="form1" runat="server">
    <div>
        <input type="text" value="<%# GetVariableStr %>" /><br />
        "<%# GetVariableStr %>"
        <asp:Label ID="Label1" runat="server" Text="<%# GetVariableStr %>"></asp:Label>
            <%--此種方式可以綁定服務器端控件的屬性--%>
        <asp:DropDownList ID="DropDownList1" runat="server" DataSource='<%# arraylist %>'>
            <%-- 將集合綁定到數據綁定類控件,通過DataSource屬性來實現,從而在下拉框看到集合中的內容--%>
        </asp:DropDownList>
        <asp:DataList ID="DataList1" runat="server" DataSource='<%# dt %>'>
            <%--  同上,綁定了DataTable數據集合?--%>
            <ItemTemplate>
                <table border="1" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>
                       <asp:Label ID="Label2" runat="server" Text='<%# Bind("row0")%>'></asp:Label>
                       <%--由於綁定的數據集合具有多列,並且此數據綁定類控件支持模板,
                           因此需要在模板中指定需要綁定的列以及格式--%>
                      </td>
                      <td>
                       <%# Eval("row1")%>
                      </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </div>
    </form>
</body>
</html>

    可以看出,這種方式在使用時,不但可以實現(取代)<%=... %>所滿足的功能,還可以綁定服務器控件屬性(如上面的Label1),也可以將集合類型綁定到支持的數據綁定類控件。在用法上,前臺代碼除了對數據綁定類控件綁定數據集合外有所差別,其他的使用上與第一種沒區別。在綁定類控件的模板中,如何使用Eval、Bind、DataBinder.Eval等,不在此文討論中,可以參考下面鏈接的參考文章。

後臺代碼

public partial class WebForm2 : System.Web.UI.Page
{
    public string GetVariableStr;
    public ArrayList arraylist;
    public DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetVariableStr = "hello world from variable";

            arraylist = new ArrayList();
            arraylist.Add("選?項?1");
            arraylist.Add("選?項?2");

            dt = new DataTable();
            dt.Columns.Add("row0");
            dt.Columns.Add("row1");
            DataRow dr1 = dt.NewRow();
            dr1[0] = "1.1";
            dr1[1] = "1.2";
            DataRow dr2 = dt.NewRow();
            dr2[0] = "2.1";
            dr2[1] = "2.2";
            dt.Rows.Add(dr1);
            dt.Rows.Add(dr2);

            Page.DataBind();
            //DropDownList1.DataBind();
            //DataList1.DataBind();
        }
    }
}

    在後臺代碼中,與第一種方式唯一不同的,就是需要調用DataBind方法。只有執行了相應控件的DataBind方法,前臺代碼中這些控件中使用<%# %>的綁定纔會發生(並且控件內部的所有綁定也會發生,比如又嵌套了一個綁定後臺數據的控件),否則得話將不會被賦值,而是默認空值。上面我們用的是Page的DataBind方法,那麼整個頁面所有綁定都會執行。當然,如果我們只執行DataList1或者DropDownList1的DataBind方法,那麼只有相應控件的綁定纔會發生。需要注意的是,這裏說的需要執行DataBind包括了顯示和隱式執行,有些數據綁定類控件,當它們通過 DataSourceID 屬性綁定到數據源控件時,會通過隱式調用 DataBind 方法來執行綁定。這時就不必顯示的再次調用了。

兩者區別:

    兩種綁定方式上,他們的約束基本相同,都要求與屬性匹配,出現在他們可以出現的位置。後者的使用位置更廣泛,尤其是支持服務器端控件和綁定數據集合。後臺代碼方面,後者需要調用DataBind才能完成綁定,前者則沒有這方面要求。這裏主要區別一下兩者在執行機制上的區別:<%=...%>是在程序執行時調用(應該是在頁面的RenderControl事件過程中完成的,也就是通常情況下我們可以看到的後臺代碼都執行完畢後再去到前臺代碼中進行賦值綁定),而<%#... %>是在DataBind()方法之後被調用,一旦調用了DataBind(),則它對應的控件將綁定變量,因此,請注意:如果在DataBind()後再修改變量,那麼綁定的就不是最新值了,這就需要在完成變量的賦值後,再去DataBind()。其實這兩種方式,它的運行過程可以在VS中通過設置斷點來看看,看兩者的綁定賦值分別是在什麼時候發生的。

尚存的疑問:

1.不知道爲什麼不能獲取到internal修飾的變量?

答:此問題已經在下一篇文章《ASP.NET前臺無法訪問後臺internal類型變量的問題》中分析並解決。(2010-10-25日更新)

補充1:回答關於9樓的提到的ASP.NET 4.0中的<%: xxxx%>(2010-11-4)

答:這種方式是ASP.NET4.0中新加入的綁定方式,常用於MVC中,但普通webform中也可使用。他的功能其實就是對綁定的值進行一下編碼,因此,一下兩者是等同的:

 <%= Server.HtmlEncode("<b>test</b>") %>
 <%: "<b>test</b>" %>;

補充2:關於各種百分號的功能區分(2010-11-4)

答:本文上面講了兩種百分號的用法,在加上補充1中的,一共講了三種,其實還有一種百分號用法就是<% func(xx)%>,也就是百分號後不帶任何符號,然後執行一段代碼,一句話概括:

在百分號內 , 如果百分號後面不帶任何符號(冒號、等號、井號) , 即表示要執行一段代碼而已,此處不包含任何輸出信息;若帶符號,即表示執行此處的代碼,並且將執行後返回的值綁定(或者顯示)在此處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章