ASP.NET 核心技術 | 數據綁定

---

一、數據綁定概述

數據綁定是指從數據源獲取數據或向數據源寫入數據。它的目的是方便對數據進行後期處理，所以無論是向用戶顯示數據或者向數據源寫入數據以及其他格式的數據處理，都會將這些數據存放到一個合適的數據容器中，以便於進行後期的數據處理。簡單的數據綁定可以是對變量或屬性的綁定，比較複雜的是對ASP.NET數據綁定控件的操作。

目錄即爲數據綁定的知識框架~

說明：所有的數據綁定表達式都必須包含在<%#…%>中。另外，執行綁定操作要麼執行Page對象的DataBind方法，要麼執行數據綁定控件對應類的實例對象的DataBind方法。

---

二、簡單屬性綁定

1、簡單屬性綁定概述

屬性的數據綁定必須包含get訪問器（因爲屬性的值是通過get返回的），數據顯示控件需要通過屬性的get訪問器從屬性中讀取數據。

語法如下：

<%# 屬性名稱%>

這種綁定方式需要調用Page類的DataBind方法才能執行綁定操作

注意：DataBind方法通常在Page_Load事件中調用。

2、綁定屬性的實現方式

通過展示一個簡單的網頁數據來學習簡單屬性綁定。

先創建一個網站並且創建一個起始頁面，在該頁面的.aspx.cs中定義以下屬性：

        public string Name
        {
            get { return "wzq"; }
        }
        public string Age
        {
            get { return "20"; }
        }
        public string Sex
        {
            get { return "男"; }
        }
        public string IDType
        {
            get { return "身份證"; }
        }
        public string IDNo
        {
            get { return "123456789"; }
        }

然後再該頁面的.aspx頁面寫一頓HTML代碼並將數據綁定到這裏：

            <table align="center">
                <tr><th colspan="2">簡單屬性綁定</th></tr>
                <tr><td width="150px" align="center">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
                <td width="200px"><%#Name %></td></tr>
                <tr><td align="center">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;齡：</td>
                    <td><%#Age %></td>
                </tr>
                <tr><td align="center">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;別：</td>
                    <td><%#Sex %></td>
                </tr>
                <tr><td align="center">證件類型：</td>
                    <td><%#IDType %></td>
                </tr>
                <tr><td align="center">身份證號：</td>
                    <td><%#IDNo %></td>
                </tr>
            </table>

最後一步，就是在該頁面的.aspx.cs的Page_Load方法中調用Page類的DataBind方法來實現在頁面加載時讀取數據，代碼如下：

        protected void Page_Load(object sender, EventArgs e)
        {
            Page.DataBind();        //執行綁定數據
        }

大功告成！下面是效果：

---

三、表達式綁定

1、表達式綁定概述

使用表達式綁定數據可以實現自定義格式化數據，例如將兩個算數進行加、減、乘、除運算，然後將結果展示在頁面上，語法與上述的簡單數據綁定相同。同樣也需要調用Page類的DataBind方法。

2、表達式綁定的實現方法

模擬一個超市的打價器，通過設置產品的單價並輸入產品的重量得到產品的價格，最後再將價格以四捨五入的方式綁定到Label控件上。

新建一個網站，創建並設置一個起始頁Default.aspx，在這個起始頁上添加兩個TextBox控件，一個Button控件，一個Label控件和兩個CompareValidator驗證控件，打開Default.aspx的源視圖寫入以下代碼：

        <div>
            <table align="center">
                <tr><th colspan="2">表達式綁定</th></tr>
                <tr><td width="100" align="center">單價：</td>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server" Text="0"></asp:TextBox></td>
                </tr>
                <tr align="center"><td>重量：</td>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server" Text="0"></asp:TextBox></td>
                </tr>
                <tr><td align="center">
                    <asp:Button ID="Button1" runat="server" Text="計算總價" />
                    </td>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text='<%#"總金額爲："
                            +Math.Round(Convert.ToDecimal(TextBox1.Text)
                            *Convert.ToInt32(TextBox2.Text),2)%>'></asp:Label></td>
                </tr>
            </table>
            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="輸入數字" 
                Operator="DataTypeCheck" Type="Double" ControlToValidate="TextBox1"></asp:CompareValidator>
            <asp:CompareValidator ID="CompareValidator2" runat="server" ErrorMessage="輸入數字"
                Operator="DataTypeCheck" Type="Integer" ControlToValidate="TextBox2"></asp:CompareValidator>
        </div>

在這個代碼中額外添加的兩個CompareValidator控件是爲檢測兩個TextBox控件的合法性的

由於使用了驗證控件所以需要添加jQuery庫，新建一個文件夾scripts，然後分別創建兩個JavaScript文件分別命名爲：jquery-1.10.2.js和jquery-1.10.2.min.js，接着前往下面的這兩個鏈接：

jquery-1.10.2.js ： http://code.jquery.com/jquery-1.10.2.js
jquery-1.10.2.min.js ： http://code.jquery.com/jquery-1.10.2.min.js

將鏈接到的代碼分別複製給上面的兩個文件夾。緊接着打開Global.asax.cs，添加對以上的JavaScript插件的引用：（這裏需要加上using System.Web.UI）

        protected void Application_Start(object sender, EventArgs e)
        {
            //對“jquery-1.10.2.js”的引用     在應用程序啓動時運行的代碼
            ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
            {
                Path="~/scripts/jquery-1.10.2.min.js",
                DebugPath="~/scripts/jquery-1.10.2.js"
            });
        }

最後一步就是在Default.aspx.cs的Page_Load方法中調用Page.DataBind()方法執行數據綁定表達式就好啦~

大功告成！下面是結果圖：

---

四、集合綁定數據

1、集合綁定概述

有一些控件可以綁定多條數據記錄，比如DropDownList控件，因爲這些控件只有展示更多數據時纔有意義，所以在向這類控件綁定數據時綁定的數據源一定是數據集合類。通常情況下，集合數據源主要包含ArrayList、List、Hashtabel、DataView、DataReader等等泛型或者非泛型集合。

2、集合綁定數據的實現方式

將ArraryList綁定到DropDownList中，新建一個網站，並新建一個Default.aspx作爲起始頁，然後再Default.aspx頁面中添加一個DropDownList控件：

       <div>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
        </div>

然後，在Default.aspx.cs中懟個ArraryList數據源，然後將數據綁定到DropDownList中，需要注意的時使用集合需要先引用命名空間using System.Collections

        protected void Page_Load(object sender, EventArgs e)
        {
            ArrayList arr = new ArrayList();
            arr.Add("<--請選擇-->");
            arr.Add("數學");
            arr.Add("語文");
            arr.Add("英語");
            arr.Add("體育");
            DropDownList1.DataSource = arr;     //實現綁定數據
            DropDownList1.DataBind();       //調用綁定
        }

大功告成！效果如下：

---

五、方法調用結果綁定

1、方法調用結果綁定概述

在實際項目開發中，會有很多較爲複雜的運算邏輯，放在顯示控件中直接去綁定當讓時可以的，但是它降低了源代碼的可讀性並增加了後期維護時的難度。如果把這些邏輯放到一個方法中，然後在控件中直接調用這個方法，就可以解決這個問題了~~

2、方法調用結果綁定的實現方式

使用一個方法產生一個隨機數，並且把這個隨機數綁定在Label控件中。

新建一個網站並且創建一個起始頁Default.aspx，然後在Default.aspx.cs中寫入產生隨機數的方法：

        public string operation(string VarOperator)
        {
            int num1 = Convert.ToInt32(txtNum1.Text);
            int num2 = Convert.ToInt32(txtNum2.Text);
            if (VarOperator == "1")
                num2++;
            else
                num1++;
            Random ram = new Random();
            int res = ram.Next(num1, num2);
            return res.ToString();
        }

然後，在Default.aspx中肆意的添加控件，並加入兩個CompareValidator控件用來驗證輸入合法性，同上面的步驟、在這裏需要引用jquery庫。

        <div>
            <table align="center">
                <tr><th colspan="2">綁定方法調用的結果</th></tr>
                <tr><td width="200" align="center">隨機數下限：</td>
                    <td>
                        <asp:TextBox ID="txtNum1" runat="server" Text="0"></asp:TextBox></td></tr>
                <tr><td align="center">隨機數上線：</td>
                    <td>
                        <asp:TextBox ID="txtNum2" runat="server" Text="0"></asp:TextBox></td>
                </tr>
                <tr><td align="center">是否包含設定的上下限：</td>
                    <td>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Text="包含" Value="1" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="不包含" Value="0" Selected="False"></asp:ListItem>
                        </asp:RadioButtonList></td>
                </tr>
                <tr>
                    <td align="center">
                        <asp:Button ID="Button1" runat="server" Text="生成隨機數" /></td>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text='<%# "運行結果："+ operation(RadioButtonList1.SelectedValue)%>'></asp:Label></td>
                </tr>
            </table>
            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="輸入數字"
                Operator="DataTypeCheck" Type="Double"
                ControlToValidate="txtNum1"></asp:CompareValidator>
            <asp:CompareValidator ID="CompareValidator2" runat="server" ErrorMessage="輸入數字"
                Operator="DataTypeCheck" Type="Double"
                ControlToValidate="txtNum2"></asp:CompareValidator>
        </div>

大功告成！效果如下：

---