2.15.2011

asp.net 前台代碼綁定後台的方法

經常會碰到在前台代碼中要使用(或綁定)後台代碼中變量值的問題。一般有<%= str%>和<%# str %>兩種方式,這裡簡單總結一下。如有錯誤或異議之處,敬請各位指教。

一方面,這裡所講的前台即通常的.aspx文件,後台指的是與aspx相關聯的CodeBehind,文件後綴名為.aspx.cs;另一方面,這裡的綁定是指用戶發出訪問某一頁面指令後,服務器端在執行過程中就已經將前台代碼進行了賦值,而後生成html格式回傳客戶端顯示,而並非已經顯示到客戶端後,然後通過其他方法(如ajax)去服務器端獲取相應變量。

備注:上面說的兩個文件是常見的代碼隱藏(code-behind)模式,還有一種是代碼嵌入(code-beside, inline)模式,那就是只存在aspx一個文件,而後台代碼則寫入此文件的<script type="text/javascript" runat="server"></script>之中(還有一些語法上區別),這對於本文討論的問題略有影響,因為代碼嵌入是聲明性代碼與C#/VB.NET代碼都一起編譯到一個類裡面,而代碼隱藏則將聲明性代碼與C#/VB.NET代碼分開幾次進行翻譯/編譯,因此前者是局部與局部(partial)的關系後者基類與派生類的關系,但這僅僅影響所能綁定變量的範圍(與修飾符有關),下面會提到。以下均以代碼隱藏模式為例。

一般來說,在前台代碼的三種位置可能會用到(綁定)後台變量:

服務器端控件屬性或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中通過設置斷點來看看,看兩者的綁定賦值分別是在什麼時候發生的。

0 留言:

發佈留言

您使用留言則表示同意及遵守使用條款及守則

建議: 為方便留言回覆,請不要用匿名方式 留言。