asp net夜话之八 数据绑定控件

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

通过前面的例子我们看到每次我们要显示数据的时候都要通过一个循环来显示满足条件的数据，这是一个比较麻烦的过程，为此微软定义了一系列的控件专门用于显示数据的格式，通过这些控件可以以可视化的方式查看绑定数据之后的效果。这些控件称之为数据绑定控件。在asp.net中所有的数据库绑定控件都是从BaseDataBoundControl这个抽象类派生的，这个抽象类定义了几个重要属性和一个重要方法：
DataSource属性：指定数据绑定控件的数据来源，显示的时候程序将会从这个数据源中获取数据并显示。
DataSourceID属性：指定数据绑定控件的数据源控件的ID, 显示的时候程序将会根据这个ID找到相应的数据源控件，并利用这个数据源控件中指定方法获取数据并显示。
DataBind()方法：当指定了数据绑定控件的DataSource属性或者DataSourceID属性之后，再调用DataBind()方法才会显示绑定的数据。并且在使用数据源时，会首先尝试使用DataSourceID属性标识的数据源，如果没有设置DataSourceID时才会用到DataSource属性标识的数据源。也就是说DataSource和DataSourceID两个属性不能同时使用。
数据绑定控件的DataSource控件属性必须是一个可以枚举的数据源，如实现了ICollection、IEnumerable或IListSource接口的类的实例。

今天要讲述的内容有：
DropDownList控件
ListBox控件
GridView控件
DataList控件
Repeater控件

FormView控件

DetailsView控件

DropDownList控件
DropDownList控件是一个相对比较简单的数据绑定控件，它在客户端被解释成<select></select>这样的HTML标记，也就是只能有一个选项处于选中状态。
DropDownList控件常见属性：
AutoPostBack属性：这个属性的用法在讲述基本控件的时候已经讲过，是用来设置当下拉列表项发生变化时是否主动向服务器提交整个表单，默认是false，即不主动提交。如果设置为true，就可以编写它的SelectedIndexChanged事件处理代码进行相关处理（注意：如果此属性为false即使编写了SelectedIndexChanged事件处理代码也不会马上起作用）。
DataTextField属性：设置列表项的可见部分的文字。
DataValueField属性：设置列表项的值部分。
Items属性：获取控件的列表项的集合。
SelectedIndex属性：获取或设置 DropDownList 控件中的选定项的索引。
SelectedItem属性：获取列表控件中索引最小的选定项。
SelectedValue属性：取列表控件中选定项的值，或选择列表控件中包含指定值的项。

因为在实际开发中，用户希望直观地看见选中哪个选项，而在操作数据库的时候我们更希望直接以该值对应的编号来操作，利用DataTextField属性和DataValueField属性就可以很方便地做到这一点，这两个属性通常是数据源中的某个字段名（如果DataSource属性是DataTable或者是DataView的话）或者范型集合中实体的属性（如果DataSource属性是System.Collections.Generic.List<T>的话，则可以指定为T的属性）。
下面是DropDownList控件的例子，依然用到的是第六章中创建的表（本代码采用了单页模式）：

 

 

注意，第二个DropDownList控件绑定数据源时有两句话必不可少，就是：

 

 

 

 

 

 

另外，DropDownList控件默认情况下是第一个选项处于选中状态，如果我们想在绑定数据之后让某个选项处于选中状态，可以利用它的Items属性，DropDownList控件的Items属性其实是一个ListItemCollection的实例，ListItemCollection类有两个重要方法：

public ListItem FindByText (string text)：在选项集合中查找指定文字的选项。

public ListItem FindByValue (string value) ：在选项集合中查找指定值的选项。

利用这个属性，我们可以让某个选项在数据绑定后就处于选中状态。比如在上面的代码中我们希望绑定数据源后，让刘备处于选中状态，那么我们的BindUserList()的代码可以这么写：

 

 

 

 

 

 

ListBox控件

ListBox控件和DropDownList控件非常类似，ListBox控件是也是提供一组选项供用户选择的，只不过DropDownList控件只能有一个选项处于选中状态，并且每次只能显示一行（一个选项），而ListBox控件可以设置为允许多选，并且还可以设置为显示多行。

除了与DropDownList具有很多相似的属性之外，ListBox控件还有以下属性：

Rows属性：设置ListBox控件显示的行数。

SelectionMode属性：设置ListBox的选择模式，这是一个枚举值，它有Multiple和Single两个值，分别代表多选和单选，默认是Single，即同时只能有一个选项处于选中状态。如果要想实现多选，除了设置SelectionMode属性为Multiple外，在选择时需要按住Ctrl键。

需要说明的是，因为ListBox允许多选，所以如果ListBox的SelectionMode属性为Multiple，那么SelectedIndex属性指的是被选中的选项中索引最小的那一个，SelectedValue属性指的是被选中的选项集合中索引最小的那一个的值。

 

下面是ListBox的用法举例：

 

 

 

 

按住Ctrl键同时选择几个选项，然后点击“确定”按钮之后的结果：

 

 

 

 

GridView控件

GridView控件作为asp.net1.1下的DataGrid的替代品，它内置了表格呈现样式。GridView 控件用来在表中显示数据源的值。每列表示一个字段，而每行表示一条记录。GridView 控件支持下面的功能：

绑定至数据源控件，如 SqlDataSource。

内置排序功能。

内置更新和删除功能。

内置分页功能。

内置行选择功能。

以编程方式访问 GridView 对象模型以动态设置属性、处理事件等。

多个键字段。

用于超链接列的多个数据字段。

可通过主题和样式进行自定义的外观。

可以实现多种样式的数据展示。

GridView控件主要有以下常见属性：

AllowPaging属性：设置是否启用分页功能。

AllowSorting 属性：设置是否启用排序功能。

AutoGenerateColumns 属性：设置是否为数据源中的每个字段自动创建绑定字段。这个属性默认为true，但在实际开发中很少会自动创建绑定列，我们总会根据一些情况让一些列不显示，比如显示用户列表的时候不会将用户密码显示出来，显示文章列表的时候不会将文章内容显示出来。

Columns属性：获取 GridView 控件中列字段的集合。

PageCount属性：获取在 GridView 控件中显示数据源记录所需的页数。

PageIndex属性：获取或设置当前显示页的索引。

PagerSetting属性：设置GridView的分页样式。

PageSize属性：设置GridView控件每次显示的最大记录条数。

下图是将一个GridView控件拖到页面的情况：

 

点击“编辑列…”会出现下面的界面：

 

 

从上面的图中我们可以看出在GridView中可以显示7中类型的字段，它们分别是：

BoundField:绑定字段，以文本的方式显示数据。

CheckBoxField:复选框字段，如果数据库是bit字段，则以此方式显示。

HyperLinkField:用超级连接的形式的显示字段值。

ImageField:用于显示存放Image图象的url字段数据，显示成图片效果。

ButtonField：显示按钮列。

CommandField：显示可执行操作的列，可以执行编辑或者删除等操作。可以设置它的ButtonType属性来决定显示成普通按钮、图片按钮或者超级链接。

TemplateField:自定义数据的显示方式，在这里我们可以使用我们所熟悉的HTML控件或者asp.net Web服务器控件。

对于我们经常使用到的Users这个表，这次我们不再使用for循环来显示了，这次使用GridView控件来显示。GridView控件的字段大都有HeaderText这个属性，这个属性是用来设置数据的镖头的，如果我们不设置的话默认都是以数据库的相应字段作为表头。另外还有一个DataField属性，这个属性是用来设置要绑定显示的数据的属性或者列名。在这里我们希望在显示的时候给出一个链接，用户可以点击这个链接跳转到查看详细介绍的页面，并且我们还希望将用户的电子邮件显示成超级链接的方式。

在这里还需要介绍一个属性：DataNavigateUrlFormatString，类似的还有DataTextFormatString，有时候在显示数据的时候我们并不希望仅仅将数据简简单单显示，还希望用一定的格式来显示，那么就可以设置这个属性，在显示的时候我们用到了一个HyperLinkField，用来显示一个超级链接，它的设置如下：

DataNavigateUrlFormatString属性的值为"ShowUser.aspx?UserId={0}"，而DataNavigateUrlFields属性的值为"UserId"，也就是将来显示每行数据的时候都会将该行对应的“UserId”字段的值替换{0}，类似于string.Format("ShowUser.aspx?UserId={0}"，[“UserId”]的值)。

 

 

 

 

对于电子邮件的显示，我们发现BoundField、CheckBoxField、HyperLinkField、ImageField和ButtonField及CommandField字段都较难实现或者根本不可能实现我们的要求，这时可以使用TemplateField这种类型的字段。

在GridView控件中TemplateField字段中可以定义5中不同类型的模版，分别如下：

AlternatingItemTemplate：交替项模版，即偶数项中显示的内容，可以进行数据绑定。

EditItemTemplate：编辑项模版，当当前这条数据处于编辑状态的时候要显示的内容，可以进行数据绑定。

FooterTemplate：脚模版，即脚注部分要显示的内容，不可以进行数据绑定。

HeaderTemplate：头模版，即表头部分要显示的内容，不可以进行数据绑定。

ItemTemplate：项模版，处于普通项中要显示的内容，如果指定了AlternatingItemTemplate中的内容，则这里的设置是奇数项的显示效果。可以进行数据绑定。

注意：可以不设置AlternatingItemTemplate，如果没有设置AlternatingItemTemplate，那么所有的数据项在非编辑模式下都按照ItemTemplate中的设置显示。

下面是用分页显示Users表中的数据的例子，对于奇数行用户的电子邮件仅仅显示电子邮件地址，偶数行的用户显示为超级链接。以下是代码：

 

 

 

 

 

点击第二页的效果：

 

对于GridView的用法笔者要说明几点：

1、上面的代码采用了默认的自定义分页，这种分页每次翻页的时候都会将所有的数据全部从数据中取出来，根据当前页索引和每页要显示的记录条数决定要显示哪些记录，其它的数据会被丢弃掉，在数据量比较大的时候会导致性能低下。对于表中有大量数据的情况，需要自已写分页方法，每次只从数据库中取出需要显示的数据，提高网站的性能，并且根据当前页索引显示页面跳转导航链接，关于如何分页查询在本系列文章中ADO.NET部分笔者已经讲过，这里不再赘述。

2、当DataSource中没有任何记录时，GridView默认是没有任何显示的。我们还可以给GridView添加一种效果，即当GridView中没有任何数据时给用户提示。这个可以通过给GridView添加EmptyDataTemplate模版，定义没有数据数据时显示的内容，对上面的GridView我们给它添加如果没有数据的功能。在<asp:GridView></asp:GridView>添加如下内容：<EmptyDataTemplate>温馨提示：当前没有任何记录哦。</EmptyDataTemplate>，这时GridView的定义如下：

 

 

 

 

 

 

3、如果当前的项显示样式不符合我们的要求的时候，我们可以设置项的显示样式，如下图：

 

 

4、

注意：在本例中数据绑定时都加了if (!Page.IsPostBack)这种判断，这样做的目的是不会因为某个控件的提交页面导致整个页面的重新绑定，绝大部分情况下这种重新数据绑定是没有必要的、而且会影响网站的效率的。在实际开发中，各位朋友要区分这一情况。

 

GridView中实现反选和全选功能

在显示数据的时候经常有一些批量操作的功能，比如数据的批量删除等，我们可以利用javascript脚本来辅助实现这一功能，不过如果用asp.net中的CheckBox控件来实现这个功能的话，比较麻烦，因为在GridView这样的控件将asp.net中的Web服务器控件转换成普通HTML控件的时候不能直接按照控件的ID来分配，存在着在一个GridView中有多个CheckBox控件，为了防止命名冲突，asp.net 为页上的各个服务器控件自动生成一个唯一的 ClientID 值。ClientID 值是通过连接控件的 ID 值和它的父控件的 UniqueID 值生成的。如果未指定控件的 ID 值，则使用自动生成的值。如果我们在GridView中添加一个CheckBox控件，我们在生成的HTML控件中会发现它生成的HTML代码类似于下面的格式：

 

javascript操作GridView这样的控件中的asp.net Web服务器控件一定要注意这个情况，可以通过asp.net Web服务器控件的ClientID属性来操作。

 

 

 

 

这时候我们可以使用普通HTML控件来达到我们想要的功能，asp.net对于普通HTML控件是不会更改它的id和name属性的。

实现了单选和复选功能之后，我们如何获取选中的值呢？因为是普通HTML控件，自然不能像asp.net Web服务器控件那样利用某个属性来判断，不过我们可以利用一个asp.net Button服务器控件来提交表单，然后通过Request[“控件的name”]来获取选中的值（没有印象的朋友赶紧看第三页的介绍），得到值是形如“15,16,17”这样的字符串，这时我们可以利用SQL语句来进行批量操作，我们的SQL语句可以这么写：

String sql=”delete from Users where UserId in(“+Request["CheckboxGroup"]+”)”;

这样就不必进行分割字符串的操作，只连接数据库操作就删除了选中的数据，大大提高了效率。

因为整个程序的代码比较复杂，所以采用了页面和代码分离的模式，前台代码如下：

 

 

 

 

 

 

 

1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Collections;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.WebControls;
9. using System.Web.UI.WebControls.WebParts;
10. using System.Web.UI.HtmlControls;
11. using System.Data.SqlClient;
12. public partial class MultiSelectGridView : System.Web.UI.Page
13. {
14.     protected void Page_Load(object sender, EventArgs e)
15.     {
16.         if (!Page.IsPostBack)
17.         {
18.             BindGridView(0);
19.         }
20.     }
21.     //指定绑定页面的数据
22.     private void BindGridView(int pageIndex)
23.     {
24.         //实例化Connection对象
25.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
26.         //实例化Command对象
27.         SqlCommand command = new SqlCommand("select * from UserInfo", connection);
28.         SqlDataAdapter adapter = new SqlDataAdapter(command);
29.         DataTable data = new DataTable();
30.         adapter.Fill(data);
31.         gvUserList.DataSource = data;
32.         gvUserList.PageIndex = pageIndex;//设置当前显示第几页
33.         gvUserList.DataBind();
34.     }
35.     //翻页事件
36.     protected void gvUserList_PageIndexChanging(object sender, GridViewPageEventArgs e)
37.     {
38.         //指定新页面，重新绑定数据
39.         BindGridView(e.NewPageIndex);
40.     }
41.     //删除选中的用户代码
42.     protected void btnDelete_Click(object sender, EventArgs e)
43.     {
44.         string sql = "delete from UserInfo where UserId in (" + Request["CheckboxGroup"] + ")";
45.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
46.         SqlCommand command = new SqlCommand(sql, connection);
47.         connection.Open();
48.         int count = command.ExecuteNonQuery();
49.         connection.Close();
50.         //删除成功后给出提示，并且跳转到当前页面
51.         if (count > 0)
52.         {
53.             Page.ClientScript.RegisterClientScriptBlock(
54.                 this.GetType(), "success",
55.                 "<script language='javascript'>alert('删除成功！');"
56.             + "window.location='MultiSelectGridView.aspx';</script>"
57.                 );
58.         }
59.         else//删除不成功给出不成功的提示
60.         {
61.             Page.ClientScript.RegisterClientScriptBlock(
62.                 this.GetType(), "fail",
63.                 "<script language='javascript'>alert('删除成功！');</script>"
64.                 );
65.         }
66.     }
67. }

页面的初始运行效果：

 

 

 

 

当一个也没有选择的时候点“删除”按钮之后的效果：

 

 

当选中一部分之后再点击“删除”的效果：

 

 

点击“确定”之后就会删除所有处于选中状态的用户，并且弹出删除成功的提示框，用户点击确定又会跳转到当前页面，显示删除选中用户之后的效果。

对上面的程序作如下说明：

1、在页面的前台代码中使用了几个javascript函数用于实现全选、反选和判断用户是否选择了至少一项及删除确认对话框的功能，“var checkbox = document.all.CheckboxGroup;”这句代码的作用是获取当前页面中所有name为”CheckboxGroup”的HTML控件，而我们在GridView中所有的实现选择的复选框的name属性就是”CheckboxGroup”。

2、在GridView中可以使用普通HTML控件或者asp.net服务器控件，并且可以对它们的值或者某个属性进行绑定。

 

DataList控件

DataList是一个相对复杂一点的数据绑定控件，它需要使用者自己定义数据的展现格式，也就是需要在html层控制数据的展示格式。和GridView控件每行只能显示一条记录不同，DataList可以在一行显示多条记录。

DataList支持以下模版：AlternatingItemTemplate、EditItemTemplate、FooterTemplate、HeaderTemplate、ItemTemplate和SelectedItemTemplate及SeparatorTemplate。其中AlternatingItemTemplate、EditItemTemplate、FooterTemplate和HeaderTemplate及ItemTemplate在TemplateField的支持的模版类型时已经介绍了，SelectedItemTemplatem模版是当该项处于选中状态的效果，SeparatorTemplate是各项之间分隔显示效果。

DataList有两个重要属性，如下：

RepeatColumns：DataList中要显示的列数。默认是0，即按照RepeatDirection的设置单行或者单列显示数据。

RepeatDirection：DataList的显示方式，这个属性是一个枚举值，有Horizontal和Vertical两个值，分别代表水平和垂直显示。

在使用DataList时经常会嵌套绑定，所谓嵌套就是在一个数据绑定控件中嵌套着另一个数据绑定控件。下面演示一下DataList进行嵌套绑定的效果。在这个效果里，首先将UserInfo表中的数据按照性别分类，然后在每种性别里分别跳出三个用户显示。

首先向页面中添加一个DataList控件，如下图：

 

点击“模版”，在它的ItemTemplate模版中再添加一个Label控件和一个DataList控件，如下图：

 

对上述操作生成的前台代码我们做一些修改，如下：

 

 

 

 

 

 

1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Collections;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.WebControls;
9. using System.Web.UI.WebControls.WebParts;
10. using System.Web.UI.HtmlControls;
11. using System.Data.SqlClient;
12. public partial class DataListDemo : System.Web.UI.Page
13. {
14.     protected void Page_Load(object sender, EventArgs e)
15.     {
16.         if (!Page.IsPostBack)
17.         {
18.             BindSex();
19.         }
20.     }
21.     //绑定顶级项目
22.     private void BindSex()
23.     {
24.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
25.         SqlCommand command = new SqlCommand("select distinct sex from UserInfo", connection);
26.         SqlDataAdapter adapter = new SqlDataAdapter(command);
27.         DataTable data = new DataTable();
28.         adapter.Fill(data);
29.         DataList1.DataSource = data;
30.         DataList1.DataBind();
31.     }
32.     //当绑定DataList1中的每一项时的处理方法
33.     protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
34.     {
35.         //如果要绑定的项是交替项或者是普通项
36.         //注意此外还有脚模板和脚模版
37.         if (e.Item.ItemType == ListItemType.Item ||
38.              e.Item.ItemType == ListItemType.AlternatingItem)
39.         {
40.             //e.Item表示当前绑定的那一行
41.             //利用e.Item.FindControl("Label1")来找到那一行的id为"Label1"的Label控件
42.             Label lbSex = (Label)(e.Item.FindControl("Label1"));
43.             //利用e.Item.FindControl("Label1")来找到那一行的id为"Label1"的Label控件
44.             DataList dl2 = (DataList)(e.Item.FindControl("DataList2"));
45.             bool male = bool.Parse(lbSex.Text);
46.             dl2.DataSource = GetDataTable(male);
47.             dl2.DataBind();
48.         }
49.     }
50.     /// <summary>
51.     /// 根据性别来查找符合条件的用户
52.     /// </summary>
53.     /// <param name="male">是否为男性</param>
54.     /// <returns></returns>
55.     private DataTable GetDataTable(bool male)
56.     {
57.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
58.         SqlCommand command = new SqlCommand("select top 3 RealName from UserInfo where Sex=@Sex order by UserID", connection);
59.         command.Parameters.AddWithValue("@Sex", male);//添加SqlParameter参数
60.         SqlDataAdapter adapter = new SqlDataAdapter(command);
61.         DataTable data = new DataTable();
62.         adapter.Fill(data);
63.         return data;
64.     }
65. }

页面的最后运行效果：

 

 

 

 

对上面的程序代码作几点说明：

（1）在上面的代码中使用了两个DataList控件，其中第二个是位于第一个的ItemTemplate模版里面，这个用于绑定符合当前项中条件的数据，并且我们在第一个的ItemTemplate里面还用到了一个Label控件，这个Label是不可见的（Visible="false"），使用这个控件并不是为了显示数据，而是为了保存第二个DataList要绑定显示的数据的条件。在这里我们是以性别作为顶级分类的，其实这个没有必要在数据库查询并进行绑定显示，这里只是通过这种方法来演示DataList如何进行嵌套绑定。

（2）在嵌套绑定的时候我们利用了DataList的ItemDataBound事件，在绑定DataList中的每一项时候都会激发这个事件，当要绑定的项是普通项或者是交替项时，项模版里就有要显示子数据的DataList控件和我们隐藏Label控件，我们利用FindControl()方法找到这两个控件，利用Label的Text属性值作为条件去数据库查找满足条件的数据，并将返回的数据源绑定到第二个DataList上，这样就完成了DataList