DataList控件

DataList控件

selfcherish

2008-11-20

 

DataList控件，作为更GridView，Reapter等类似的数据展示控件，无外乎是要实现它们和数据源的绑定，实现修改、删除、更新的功能等。分别来看。

 

一、使用SqlDataSource为DataList控件绑定数据源

    这个比较简单，拖动控件到web窗体上，然后设定其DataSource为哪个SqlDataSource控件的数据就可以了。为了展示的数据好看，可以编辑DataList的Header模板和Footer模板，并为其选定一种样式，设定控件的 RepeatDirection为"Horizontal"，RepeatColumns为"5"。由于是使用SqlDataSource控件作为它的数据源，其ItemTemplate模板会自动被编辑，加上相应的数据源字段的绑定。最后代码如下：

1. <asp:DataList ID="DataList1" runat="server" BackColor="White" 
2.             BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
3.             DataKeyField="ID" DataSourceID="SqlDataSource1" GridLines="Horizontal" 
4.             RepeatColumns="5" RepeatDirection="Horizontal">
5.             <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
6.             <AlternatingItemStyle BackColor="#F7F7F7" />
7.             <ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
8.             <SelectedItemStyle BackColor="#62788A" Font-Bold="True" ForeColor="#F7F7F7" />
9.             <HeaderTemplate>
10.                 演示一：控件数据源
11.             </HeaderTemplate>
12.             <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
13.             <FooterTemplate>
14.                 控件数据源
15.             </FooterTemplate>
16.             <ItemTemplate>
17.                 ID:
18.                 <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
19.                 <br />
20.                 sname:
21.                 <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
22.                 <br />
23.                 english:
24.                 <asp:Label ID="englishLabel" runat="server" Text='<%# Eval("english") %>' />
25.                 <br />
26.                 distrubute:
27.                 <asp:Label ID="distrubuteLabel" runat="server" 
28.                     Text='<%# Eval("distrubute") %>' />
29.                 <br />
30.                 finalpoint:
31.                 <asp:Label ID="finalpointLabel" runat="server" 
32.                     Text='<%# Eval("finalpoint") %>' />
33.                 <br />
34.                 sbool:
35.                 <asp:Label ID="sboolLabel" runat="server" Text='<%# Eval("sbool") %>' />
36.                 <br />
37.                 <br />
38.             </ItemTemplate>
39.         </asp:DataList>
40. <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
41.             ConnectionString="<%$ ConnectionStrings:DbOneConnectionString %>" 
42.             SelectCommand="SELECT TOP (10) ID, sname, english, distrubute, finalpoint, sbool FROM sscore_OLD_local">
43.         </asp:SqlDataSource>

二、使用自定义数据源

        使用自定义数据源的时候，不需要在智能标签里边设置其DataSource属性，这需要通过编程来设定，也就是在程序中返回一个DataTable，赋值给DataList的DataSource成员，然后调用其DataBind方法绑定数据。需要注意的是，这个时候，ItemTemplate模板下的数据绑定就需要手动去写了。写的方法，就是在智能标签中选择编辑模板，然后选族ItemTemplate，为需要绑定的字段取名，并添加相应的控件来呈现字段的实际数据，一般不需要编辑的时候都用Label。如图：

 

然后，在选IDLabel控件的智能标签，并编辑绑定（Edit DataBindings...）：

 

 

整个控件的代码如下：

1. <asp:DataList ID="DataList2" runat="server" BackColor="White" 
2.             BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
3.             GridLines="Vertical" RepeatColumns="5" RepeatDirection="Horizontal">
4.             <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
5.             <AlternatingItemStyle BackColor="#DCDCDC" />
6.             <ItemStyle BackColor="#EEEEEE" ForeColor="Black" />
7.             <SelectedItemStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
8.             <HeaderTemplate>
9.                 演示二：自定义数据源
10.             </HeaderTemplate>
11.             <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
12.             <FooterTemplate>
13.                 自定义数据源
14.             </FooterTemplate>
15.             <ItemTemplate>
16.                 ID:
17.                 <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
18.                 <br />
19.                 sname:
20.                 <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
21.                 <br />
22.                 english:
23.                 <asp:Label ID="englishLabel" runat="server" Text='<%# Eval("english") %>' />
24.                 <br />
25.                 distrubute:
26.                 <asp:Label ID="distrubuteLabel" runat="server" 
27.                     Text='<%# Eval("distrubute") %>' />
28.                 <br />
29.                 finalpoint:
30.                 <asp:Label ID="finalpointLabel" runat="server" 
31.                     Text='<%# Eval("finalpoint") %>' />
32.                 <br />
33.                 sbool:
34.                 <asp:Label ID="sboolLabel" runat="server" Text='<%# Eval("sbool") %>' />
35.                 <br />
36.                 <br />
37.             </ItemTemplate>
38.         </asp:DataList>

 

数据绑定的代码如下：

1.         protected void Page_Load(object sender, EventArgs e)
2.         {
3.             if(!IsPostBack)
4.             {
5.                 db sdb = new db();
6.                 DataList2.DataSource = sdb.dt("SELECT top 10 [ID], [sname], [english], [distrubute], [finalpoint], [sbool] FROM [sscore_OLD_local] ORDER BY [ID]");
7.                 DataList2.DataBind();
8.             }
9.         }

 

db类的定义在后边给出。

 

三、实现DataList控件的编辑、更新、和删除

        要实现DataList控件的编辑、更新、和删除，除了要在ItemTemplate和EditTemplate中实现其数据绑定之外，还需要在这两个模板中添加Button或LinkButton或HyperLink，并设定它们的CommandName分别为edit、update、delete或cancel，根据这几个CommandName，然后利用DataList的EditCommand、UpdateCommand、DeleteCommand、CancelCommand等事件来实现相应的操作。在EditTemplated模板中的数据展示控件就相应的需要用可以供编辑的控件如TextBox了。最后，还需要设定DataList的DataKeyField属性，作为其编辑、删除和更新的主键。如图：

 

修改和删除的CommandName分别就设置为edit和delete。

 

更新和取消的CommandName分别设置为update和cancel。

完成后，DataList的代码如下：

1. <asp:DataList ID="DataList3" runat="server" CellPadding="4" ForeColor="#333333" 
2.             oncancelcommand="DataList3_CancelCommand" 
3.             ondeletecommand="DataList3_DeleteCommand" oneditcommand="DataList3_EditCommand" 
4.             onupdatecommand="DataList3_UpdateCommand" RepeatColumns="5" 
5.             RepeatDirection="Horizontal">
6.             <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
7.             <AlternatingItemStyle BackColor="White" />
8.             <ItemStyle BackColor="#EFF3FB" />
9.             <EditItemTemplate>
10.                 id:<asp:Label ID="Label1" runat="server" Text='<%# Eval("id") %>'></asp:Label>
11.                 <br />
12.                 sname:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("sname") %>'></asp:TextBox>
13.                 <br />
14.                 english:
15.                 <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("english") %>'></asp:TextBox>
16.                 <br />
17.                 distrubute:<asp:TextBox ID="TextBox3" runat="server" 
18.                     Text='<%# Eval("distrubute") %>'></asp:TextBox>
19.                 <br />
20.                  finalpoint:<asp:TextBox ID="TextBox4" runat="server" 
21.                     Text='<%# Eval("finalpoint") %>'></asp:TextBox>
22.                 <br />
23.                 <asp:LinkButton ID="LinkButton3" runat="server" CommandName="update">更新</asp:LinkButton>
24.                  
25.                 <asp:LinkButton ID="LinkButton4" runat="server" CommandName="cancel">取消</asp:LinkButton>
26.             </EditItemTemplate>
27.             <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
28.             <HeaderTemplate>
29.                 演示三：实现自定义数据源的修改和删除
30.             </HeaderTemplate>
31.             <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
32.             <FooterTemplate>
33.                 实现自定义数据源的修改和删除
34.             </FooterTemplate>
35.             <ItemTemplate>
36.             ID:<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
37.                 <br />
38.                 sname:
39.                 <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
40.                 <br />
41.                 english:
42.                 <asp:Label ID="englishLabel" runat="server" Text='<%# Eval("english") %>' />
43.                 <br />
44.                 distrubute:
45.                 <asp:Label ID="distrubuteLabel" runat="server" 
46.                     Text='<%# Eval("distrubute") %>' />
47.                 <br />
48.                 finalpoint:
49.                 <asp:Label ID="finalpointLabel" runat="server" 
50.                     Text='<%# Eval("finalpoint") %>' />
51.                 <br />
52.                 <asp:LinkButton ID="LinkButton1" runat="server" CommandName="edit">修改</asp:LinkButton>
53.                   
54.                 <asp:LinkButton ID="LinkButton2" runat="server" CommandName="delete"> 删除</asp:LinkButton>
55.             </ItemTemplate>
56.         </asp:DataList>

 

在后台，首先是实现数据源的绑定：

1.             if(!IsPostBack)
2.             {
3.                 //bing for DataList3
4.                 this.bind();
5.             }
7.         private void bind()
8.         {
9.             db sdb = new db();
10.             DataList3.DataSource = sdb.dt("SELECT top 10 [ID], [sname], [english], [distrubute], [finalpoint], [sbool] FROM [sscore_OLD_local] ORDER BY [ID]");
11.             DataList3.DataKeyField = "id";//跟新的时候根据这个字段
12.             DataList3.DataBind();
13.         }

 

然后是几个事件函数的编写：

1.         protected void DataList3_CancelCommand(object source, DataListCommandEventArgs e)
2.         {
3.             DataList3.EditItemIndex = -1;
4.             this.bind();
5.         }
7.         protected void DataList3_DeleteCommand(object source, DataListCommandEventArgs e)
8.         {
9.             String id = DataList3.DataKeys[e.Item.ItemIndex].ToString();
10.             db sdb = new db();
11.             string deletestr = "DELETE FROM [sscore_OLD_local] WHERE [ID] = '" + id + "'";
12.             if (sdb.sql(deletestr) > 0)
13.             {
14.                 Response.Write("<script>alert('删除成功')</script>");
15.                 DataList3.EditItemIndex = -1;
16.                 this.bind();
17.             }
18.         }
20.         protected void DataList3_UpdateCommand(object source, DataListCommandEventArgs e)
21.         {
22.             String id = DataList3.DataKeys[e.Item.ItemIndex].ToString();
23.             String sname = ((TextBox)e.Item.FindControl("TextBox1")).Text;
24.             float english = Convert.ToSingle(((TextBox)e.Item.FindControl("TextBox2")).Text);
25.             float distrubute = Convert.ToSingle(((TextBox)e.Item.FindControl("TextBox3")).Text);
26.             float finalpoint = Convert.ToSingle(((TextBox)e.Item.FindControl("TextBox4")).Text);
27.             db sdb = new db();
28.             string str = "UPDATE [sscore_OLD_local] SET [SNAME] = '" + sname + "',[ENGLISH] = '" + english + "',[DISTRUBUTE] = '" + distrubute + "',[FINALPOINT] = '" + finalpoint + "' WHERE  [ID] = '" + id + "'";
29.             if (sdb.sql(str) > 0)
30.             {
31.                 Response.Write("<script>alert('更新成功')</script>");
32.                 DataList3.EditItemIndex = -1;
33.                 this.bind();
34.             }
35.         }
37.         protected void DataList3_EditCommand(object source, DataListCommandEventArgs e)
38.         {
39.             DataList3.EditItemIndex = e.Item.ItemIndex;
40.             this.bind();
41.         }

 

同样，db类，在后边给出。

 

四、实现DataList的分页：

       分页的时候，在数据绑定，跟前边是类似的：也将代码贴出来，方便看：

1. <asp:DataList ID="DataList4" runat="server" CellPadding="4" ForeColor="#333333" 
2.             onitemdatabound="DataList4_ItemDataBound" RepeatDirection="Horizontal">
3.             <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
4.             <AlternatingItemStyle BackColor="White" />
5.             <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
6.             <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
7.             <HeaderTemplate>
8.                 演示四：实现分页
9.             </HeaderTemplate>
10.             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
11.             <FooterTemplate>
12.                 <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>
13.                 <br />实现分页
14.             </FooterTemplate>
15.             <ItemTemplate>
16.             ID:<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
17.                 <br />
18.                 sname:
19.                 <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
20.                 <br />
21.                 english:
22.                 <asp:Label ID="englishLabel" runat="server" Text='<%# Eval("english") %>' />
23.                 <br />
24.                 distrubute:
25.                 <asp:Label ID="distrubuteLabel" runat="server" 
26.                     Text='<%# Eval("distrubute") %>' />
27.                 <br />
28.                 finalpoint:
29.                 <asp:Label ID="finalpointLabel" runat="server" 
30.                     Text='<%# Eval("finalpoint") %>' />
31.                </ItemTemplate>
32.         </asp:DataList>

数据绑定：

2.  

3.             if(!IsPostBack)
4.             {
5.                 //page for DataList4
6.                 int n;//初始页码，通过绑定传进去
7.                 if(Request.QueryString["page"] != null)
8.                 {
9.                     n = Convert.ToInt32(Request.QueryString["page"]);
10.                 }
11.                 else
12.                 {
13.                     n = 0;
14.                 }
15.                 bind4(n);
16.             }
18.         private void bind4(int n)
19.         {
20.             db sdb = new db();
21.             DataList4.DataSource = sdb.pds(n);
22.             DataList4.DataBind();
23.         }

 

分页的操作，主要是用DataList的ItemDataBound事件来完成，也就是在ItemTemplate的数据绑定之后，就通过来事件来设定其FooterTemplate模板中的分页信息，为此，先在DataList的FooterTemplate中放一个PlaceHolder，然后，将分页信息放在这个PlaceHolder中。

1.         protected void DataList4_ItemDataBound(object sender, DataListItemEventArgs e)
2.         {
3.             if (e.Item.ItemType == ListItemType.Footer)
4.             {//分页，主要是对Footer模板做这件事情
5.                 PlaceHolder ph = (PlaceHolder)e.Item.FindControl("ph");
6.                 db sdb = new db();
7.                 for (int i = 0; i < sdb.pds().PageCount;i++ )
8.                 {
9.                     HyperLink h1 = new HyperLink();
10.                     Literal ltl = new Literal();
12.                     int n = i + 1;
13.                     h1.Text = n.ToString();
14.                     h1.ID = n.ToString();
15.                     h1.NavigateUrl = "~/DataListStu.aspx?page=" + i.ToString();
17.                     ltl.Text = " ";
19.                     ph.Controls.Add(h1);
20.                     ph.Controls.Add(ltl);
21.                 }
22.             }
23.         }

最后给出，这个控件中用到的db类：

1. public class db
2.     {
3.         protected string conn;
4.         private int pagesize;
6.         public db(){
7.             conn = ConfigurationManager.ConnectionStrings["DbOneConnectionString"].ConnectionString;
8.             pagesize = 4;
9.         }
11.         public DataTable dt(string query)
12.         {
13.             SqlConnection con = new SqlConnection(conn);
14.             SqlDataAdapter sda = new SqlDataAdapter(query, con);
15.             DataSet ds = new DataSet();
16.             sda.Fill(ds,"name");
17.             return ds.Tables["name"];
18.         }
20.         public PagedDataSource pds(int n)//int pg
21.         {
22.             PagedDataSource pds = new PagedDataSource();
23.             pds.DataSource = dt("SELECT TOP 30 [ID], [sname], [english], [distrubute], [finalpoint] FROM [sscore_OLD_local] ORDER BY [ID]").DefaultView;//
24.             //SELECT TOP 10 * FROM SSCORE_OLD_local
25.             pds.AllowPaging = true;
26.             pds.PageSize = pagesize;
27.             pds.CurrentPageIndex = n;// pds.CurrentPageIndex;
28.             return pds;
29.         }
31.         public PagedDataSource pds()//int pg
32.         {
33.             PagedDataSource pds = new PagedDataSource();
34.             pds.DataSource = dt("SELECT TOP 30 [ID], [sname], [english], [distrubute], [finalpoint] FROM [sscore_OLD_local] ORDER BY [ID]").DefaultView;//
35.             //SELECT TOP 10 * FROM SSCORE_OLD_local
36.             pds.AllowPaging = true;
37.             pds.PageSize = pagesize;
38.             pds.CurrentPageIndex = pds.CurrentPageIndex;
39.             return pds;
40.         }
42.         public int sql(string sqlstr)
43.         {
44.             SqlConnection con = new SqlConnection(conn);
45.             con.Open();
46.             SqlCommand cmd = new SqlCommand(sqlstr, con);
47.             int a = cmd.ExecuteNonQuery();
48.             con.Close();
49.             return a;
50.         }
51.     }

 

遗憾的是，这样做呢，有个小小的问题。那就是，如果要同时做编辑和分页的话，这样分页就会有问题，一种解决方法是将分页信息放到外边的Label中，再把这个Label放到DataList的下边。