028. asp.net數據綁定控件值DataList控件

DataList控件能夠使用模板與定義樣式來顯示數據並進行數據的選擇, 刪除及編輯工做. DataList控件的最大特色是必定要經過模板來定義數據的顯示格式. 若是要設計出美觀的界面, 就須要花費一番心思. DataList控件顯示數據時具備靈活性, 開發人員發揮的空間較大, DataList支持的模板以下:

AlternationItemTemplate

         若是已經定義, 則爲DataList中的交替項提供內容和佈局; 若是未定義, 則使用ItemTemplate

EditItemTemplate

         若是已經定義, 則爲DataList中的當前編輯項提供內容和佈局; 若是未定義則使用ItemTemplate

FooterTemplate

         若是已經定義, 則爲DataList的腳註部分提供內容和佈局; 若是未定義則不顯示腳註部分

HeaderTemplate

         若是已經定義, 則爲DataList的頁眉部分提供內容和佈局; 若是未定義則不顯示頁眉部分

ItemTemplate

         爲DataList中的項提供內容和佈局所要求的模板

SelectdItemTemplate

         若是已經定義, 則爲DataList中的當前選定項提供內容和佈局; 若是未定義則使用ItemTemplate

SeparatorTemplate

         若是已經定義, 則爲DataList中的分隔符提供內容和佈局; 若是未定義則不顯示分隔符

 

下面是關於dataList控件的前端代碼簡單示例:

<asp:DataList ID="DataList1" runat="server" Width="239px">
                        <FooterTemplate>
                            <table border="1" style="width: 300px; text-align: center;" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td colspan="4" style="font-size: 16pt; color: #006600; text-align: center">
                                        下面這行是合計</td>
                                </tr>
                                <tr>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        編號合計</td>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        姓名合計</td>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        性別合計</td>
                                    <td style="width: 150px; height: 19px; color: #669900;">
                                        內號碼合計</td>
                                </tr>
                            </table>
                        </FooterTemplate>
                        <HeaderTemplate>
                            <table border="1" style="width: 300px; text-align: center;" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td colspan="4" style="font-size: 16pt; color: #006600; text-align: center">
                                        使用DataList控件綁定數據源</td>
                                </tr>
                                <tr>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        編號</td>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        姓名</td>
                                    <td style="height: 19px; width: 50px; color: #669900;">
                                        性別</td>
                                    <td style="width: 150px; height: 19px; color: #669900;">
                                        內號碼</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table border="1" style="width: 300px; color: #000000; text-align: center;" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="height: 21px; width: 50px; color: #669900;">
                                        <asp:Label ID="lblStuID" runat="server" Text='<%# Eval("cardNo") %>'></asp:Label></td>
                                    <td style="height: 21px; width: 50px; color: #669900;">
                                        <asp:Label ID="lblStuName" runat="server" Text='<%# Eval("name") %>'></asp:Label></td>
                                    <td style="height: 21px; width: 50px; color: #669900;">
                                        <asp:Label ID="lblStuSex" runat="server" Text='<%# Eval("sex") %>'></asp:Label></td>
                                    <td style="width: 150px; height: 21px; color: #669900;">
                                        <asp:Label ID="lblstuHobby" runat="server" Text='<%# Eval("cardBound") %>'></asp:Label></td>

                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:DataList>

對應的後臺代碼:

 1 protected void Page_Load(object sender, EventArgs e)
 2 
 3     {
 4 
 5         if (!IsPostBack)
 6 
 7         {
 8 
 9             //實例化SqlConnection對象
10 
11             SqlConnection sqlCon = new SqlConnection();
12 
13             //實例化SqlConnection對象鏈接數據庫的字符串
14 
15             sqlCon.ConnectionString = "server=.;uid=sa;pwd=123.456;database=TYW";
16 
17             //定義SQL語句
18 
19             string SqlStr = "select * from card";
20 
21             //實例化SqlDataAdapter對象
22 
23             SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
24 
25             //實例化數據集DataSet
26 
27             DataSet ds = new DataSet();
28 
29             da.Fill(ds, "card");
30 
31             //綁定DataList控件
32 
33             DataList1.DataSource = ds;//設置數據源，用於填充控件中的項的值列表
34 
35             DataList1.DataBind();//將控件及其全部子控件綁定到指定的數據源
36 
37         }
38 
39     }

 

對應的顯示效果圖:

 

DataList一些基本的事件使用簡單示例:

  1 public SqlConnection GetCon()
  2 
  3     {
  4 
  5         //實例化SqlConnection對象
  6 
  7         SqlConnection sqlCon = new SqlConnection();
  8 
  9         //實例化SqlConnection對象鏈接數據庫的字符串
 10 
 11         sqlCon.ConnectionString = "server=.;uid=sa;pwd=123.456;database=TYW";
 12 
 13         return sqlCon;
 14 
 15     }
 16 
 17     public void Bind()
 18 
 19     {
 20 
 21         SqlConnection sqlCon = GetCon();
 22 
 23         //定義SQL語句
 24 
 25         string SqlStr = "select * from card";
 26 
 27         //實例化SqlDataAdapter對象
 28 
 29         SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
 30 
 31         //實例化數據集DataSet
 32 
 33         DataSet ds = new DataSet();
 34 
 35         da.Fill(ds, "card");
 36 
 37         //綁定DataList控件
 38 
 39         DataList1.DataSource = ds;//設置數據源，用於填充控件中的項的值列表
 40 
 41         DataList1.DataKeyField = "cardNo";//設置數據表的主鍵
 42 
 43         DataList1.DataBind();//將控件及其全部子控件綁定到指定的數據源
 44 
 45     }
 46 
 47  
 48 
 49     protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
 50 
 51     {
 52 
 53         //設置DataList1控件的編輯項的索引爲選擇的當前索引
 54 
 55         DataList1.EditItemIndex = e.Item.ItemIndex;
 56 
 57         //數據綁定
 58 
 59         Bind();
 60 
 61     }
 62 
 63     protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
 64 
 65     {
 66 
 67         //設置DataList1控件的編輯項的索引爲－1，即取消編輯
 68 
 69         DataList1.EditItemIndex = -1;
 70 
 71         //數據綁定
 72 
 73         Bind();
 74 
 75  
 76 
 77     }
 78 
 79     protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
 80 
 81     {
 82 
 83         //取得編輯行的關鍵字段的值
 84 
 85         string stuID = DataList1.DataKeys[e.Item.ItemIndex].ToString();
 86 
 87         //取得文本框中輸入的內容
 88 
 89         string stuName = ((TextBox)e.Item.FindControl("txtName")).Text;
 90 
 91         string stuSex = ((TextBox)e.Item.FindControl("txtSex")).Text;
 92 
 93         string stuHobby = ((TextBox)e.Item.FindControl("txtHobby")).Text;
 94 
 95         string sqlStr = "update card set name='" + stuName + "',sex='" + stuSex + "',cardBound='" + stuHobby + "' where cardNo=" + stuID;
 96 
 97         //更新數據庫
 98 
 99         SqlConnection myConn = GetCon();
100 
101         myConn.Open();
102 
103         SqlCommand myCmd = new SqlCommand(sqlStr, myConn);
104 
105         myCmd.ExecuteNonQuery();
106 
107         myCmd.Dispose();
108 
109         myConn.Close();
110 
111         //取消編輯狀態
112 
113         DataList1.EditItemIndex = -1;
114 
115         Bind();
116 
117     }