ASP.NET 数据绑定详解代码+步骤

文章目录

1. 数据绑定概述
2. 简单数据绑定
- 2.1. 属性绑定
- 2.2. 表达式绑定
- 2.3. 集合绑定
- 2.4. 方法绑定
3. 数据控件绑定
- 3.1. ListControl 控件
- 3.2. GridView 控件
- - 3.2.2. 使用GridView控件绑定数据源
  - 3.2.3. 自定义GridView控件的列字段名
  - 3.2.4. 使用GridView控件分页显示数据
  - 3.2.5. 选中、编辑和删除GridView数据项
- 3.3. DataList 控件
- - 3.3.1. DataList 模板
  - 3.3.2. 分页显示DataList控件中的数据
- 3.4. ListView控件
- - 3.4.1. ListView控件概述
  - 3.4.2. ListView控件的模板
  - 3.4.3. 使用ListView控件对数据进行显示、分页和排序

1. 数据绑定概述

数据绑定指的是从数据源获取数据，或者向数据源写入数据。主要有两种形式：简单数据绑定和数据控件绑定。

其中简单数据绑定分为属性绑定、表达式绑定、集合绑定和方法绑定；数据控件绑定分为ListControl 控件、GridView 控件、DataList 控件和ListView控件

2. 简单数据绑定

2.1. 属性绑定

基于属性的数据绑定所涉及的属性必须要包含Get访问器，它的基本语法为：

<%# 属性名称 %>

如果在ASP页面中对属性进行了绑定，那么需要调用Page类的DataBind方法才能执行绑定操作，例如下例：

// .aspx文件
<body><form id="form1" runat="server"><div><!-- 数据绑定 --><asp:Label ID="Label1" runat="server" Text="图书名称："><%# BookName %></asp:Label></div><div><!-- 数据绑定 --><asp:Label ID="Label2" runat="server" Text="图书价格："><%# BookPrice %></asp:Label></div></form>
</body>// .aspx.cs文件
// BookName属性
public string BookName {get {return "ASP.NET程序设计";}
}// BookPrice属性
public string BookPrice {get {return "49";}
}protected void Page_Load(object sender, EventArgs e){// 调用DataBind()方法执行绑定Page.DataBind();
}

执行结果如下：

2.2. 表达式绑定

表达式绑定的语法与属性绑定一致，它可以在属性绑定的基础上通过表达式对数据进行处理，它的语法如下：

<%# 表达式 %>

例如在属性绑定的基础上，要查询10本书的总价格，则代码如下：

// .aspx文件
<body><form id="form1" runat="server"><div><!-- 数据绑定 --><asp:Label ID="Label1" runat="server" Text="图书名称："><%# BookName %></asp:Label></div><div><!-- 表达式绑定 --><asp:Label ID="Label2" runat="server" Text="图书价格："><%# Convert.ToInt32(BookPrice)*10 %></asp:Label></div></form>
</body>// .aspx.cs文件
// BookName属性
public string BookName {get {return "ASP.NET程序设计";}
}// BookPrice属性
public string BookPrice {get {return "49";}
}protected void Page_Load(object sender, EventArgs e){// 调用DataBind()方法执行绑定Page.DataBind();
}

执行结果如下所示

2.3. 集合绑定

有一些服务器控件是多记录控件，如DropDownList控件，这类控件即可使用集合作为数据源对其进行绑定。通常情况下，集合数据源主要包括ArrayList、Hashtabel、 DataView、 DataReader 等。

例如下面代码，实现了对DropDownList控件进行数据绑定：

// .aspx文件
<body><form id="form1" runat="server"><div><asp:Label ID="Label1" runat="server" Text="图书名称："></asp:Label><asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div></form>
</body>protected void Page_Load(object sender, EventArgs e){// 构建数据源ArrayList arrayList = new ArrayList();arrayList.Add("iisexpress");arrayList.Add("assembly");arrayList.Add("Windows");// 指定数据源DropDownList1.DataSource = arrayList;// 数据绑定DropDownList1.DataBind();
}

执行结果如下：

2.4. 方法绑定

方法的绑定与属性绑定的语法是一致的，只不过把绑定对象更替为了方法，例如下面的代码：

// .aspx文件
<body><form id="form1" runat="server"><div><!-- 数据绑定 --><asp:Label ID="Label1" runat="server" Text="图书名称："><%# BookName %></asp:Label></div><div><!-- 方法绑定 --><asp:Label ID="Label2" runat="server" Text="图书价格："><%# PriceTest("49") %></asp:Label></div></form>
</body>// .aspx.cs文件
public string PriceTest(string _price) {return _price;
}protected void Page_Load(object sender, EventArgs e){// 调用DataBind()方法执行绑定Page.DataBind();
}

执行结果如下：

3. 数据控件绑定

3.1. ListControl 控件

ListControl控件用来定义所有列表类型控件的所有属性方法和事件，是一个抽象基类，它能够控制的控件主要包括：DropDownList控件、ListBox控件、CheckBoxList控件、RadioButtonList控件。

ListControl控件能够指定能够用来填充列表控件的数据源，其中与数据绑定修改的属性有：

DataSource属性，用来设置数据源
DataTextField属性，用来指定提供文本内容的数据源字段
DataValueField属性，用来指定提供值的数据源字段

例如下面代码，将图书列表以DropDownList控件进行显示，当用户选择了DropDownList控件中的某个值后，页面会进行相应的信息更新。

// .aspx文件
<body><form id="form1" runat="server"><div><!-- ListControl控件绑定DropDownList --><asp:Label ID="Label1" runat="server" Text="图书列表："><%# BookName %></asp:Label><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList></div><div><asp:Label ID="Label2" runat="server" Text="图书编码："></asp:Label><asp:Label ID="Label3" runat="server" Text=""></asp:Label></div><div><asp:Label ID="Label4" runat="server" Text="图书名称："></asp:Label><asp:Label ID="Label5" runat="server" Text=""></asp:Label></div></form>
</body>// .aspx.cs文件
protected void Page_Load(object sender, EventArgs e){if (!IsPostBack) {SqlConnection sqlConnection = new SqlConnection("Server=DEITIVOD;Database=db_LibraryMS;User Id=sa;pwd=admin");SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("select book_code, book_name from tb_bookinfo;", sqlConnection);// 将查询到的数据放入一个DataSetDataSet dataSet = new DataSet();sqlDataAdapter.Fill(dataSet);// 对DropDownList执行指定数据源和数据绑定DropDownList1.DataSource = dataSet;DropDownList1.DataTextField = "book_name"; // 指定要显示的字段DropDownList1.DataValueField = "book_code"; // 指定要绑定的主键值DropDownList1.DataBind();}
}protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){Label3.Text = DropDownList1.SelectedValue;Label5.Text = DropDownList1.SelectedItem.Text;
}

执行效果如下：
数据库中的tb_bookinfo数据表的数据如下所示：

ASP页面中显示的数据：

3.2. GridView 控件

GridView控件可称之为数据表格控件，它以表格的形式显示数据源中的数据，每列表示一个字段，而每行表示一条记录，可以将其理解为数据库技术中的视图。

3.2.2. 使用GridView控件绑定数据源

使用GridView控件绑定数据源主要用到

DataSource属性，用来指定数据源
DataBind方法，用来执行数据绑定

如下代码实现了将SQL Server数据库中的数据通过GridView控件显示到ASP页面中

// .aspx文件
<body><form id="form1" runat="server"><div><!-- GridView控件绑定数据源 --><asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"><AlternatingRowStyle BackColor="White" ForeColor="#284775" /><EditRowStyle BackColor="#999999" /><FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /><HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /><PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /><RowStyle BackColor="#F7F6F3" ForeColor="#333333" /><SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /><SortedAscendingCellStyle BackColor="#E9E7E2" /><SortedAscendingHeaderStyle BackColor="#506C8C" /><SortedDescendingCellStyle BackColor="#FFFDF8" /><SortedDescendingHeaderStyle BackColor="#6F8DAE" /></asp:GridView></div></form>
</body>// .aspx.cs文件protected void Page_Load(object sender, EventArgs e){SqlConnection sqlConnection = new SqlConnection("Server=DEITIVOD;Database=db_LibraryMS;User Id=sa;pwd=admin");SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("select * from leaveword;", sqlConnection);DataSet dataSet = new DataSet();sqlDataAdapter.Fill(dataSet);GridView1.DataSource = dataSet; // 指定数据集GridView1.DataBind(); // 执行数据绑定
}

数据库中leaveword数据表的数据如下所示：

执行效果如下，ASP页面中显示的数据：

3.2.3. 自定义GridView控件的列字段名

GridView中的数据列分为7种类型

数据列	说明
BoundFiled	最常用的数据列，用来显示文本
CheckBoxFiled	用来显示Boolean值
CommandFiled	用来显示执行选择、编辑和删除操作的命令按钮
ImageFiled	用来显示图片
HyperLinkFiled	用来将数据以超链接的形式显示出来
ButtonFiled	用来为GridView控件创建命令按钮，该按钮可以操作其所在行的数据
TemplateFiled	用来给用户提供自定义类型的数据列

在VS开发环境中按下面的步骤操作，以BoundFiled 为例将GridView中的字段名修改为中文显示：

如果只想显示我们自定义的列，可以将AutoGenerateColumns设置为False
上面两张图的内容也可以通过下面的代码实现：

// .aspx文件
<body><form id="form1" runat="server"><div><!-- GridView控件绑定数据源，并且自定义列 --><asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"><Columns><asp:BoundField DataField="title" HeaderText="图书编号" /><asp:BoundField DataField="email" HeaderText="邮箱" /><asp:BoundField DataField="context" HeaderText="内容" /></Columns></asp:GridView></div></form>
</body>// .aspx.cs文件
protected void Page_Load(object sender, EventArgs e){SqlConnection sqlConnection = new SqlConnection("Server=DEITIVOD;Database=db_LibraryMS;User Id=sa;pwd=admin");SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("select * from leaveword;", sqlConnection);DataSet dataSet = new DataSet();sqlDataAdapter.Fill(dataSet);GridView1.DataSource = dataSet; // 指定数据集GridView1.DataBind(); // 执行数据绑定
}

效果如下，左边是直接指定数据源时的表格，右边是对列自定义的表格：

3.2.4. 使用GridView控件分页显示数据

使用GridView控件分页显示数据主要用到了以下两个属性和一个事件：

AllowPaging属性，用来决定是否启用分页功能
PageSize属性，设置分页时每页显示几条记录，默认是12条
PageIndexChanging事件，用来响应用户的页面切换指令

下图的GridView属性说明了该GridView开启了分页功能，每页是展示3条记录
下面的代码，在开启分页功能的基础上重写了PageIndexChanging事件，实现了GridView的分页功能：

// .aspx文件
<body><form id="form1" runat="server"><div><!-- GridView控件绑定数据源，并且使用分页功能 --><asp:GridView ID="GridView1" runat="server" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="3"></asp:GridView></div></form>
</body>// .aspx.cs文件
protected void Page_Load(object sender, EventArgs e){SqlConnection sqlConnection = new SqlConnection("Server=DEITIVOD;Database=db_LibraryMS;User Id=sa;pwd=admin");SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("select * from leaveword;", sqlConnection);DataSet dataSet = new DataSet();sqlDataAdapter.Fill(dataSet);GridView1.DataSource = dataSet; // 指定数据集GridView1.DataBind(); // 执行数据绑定
}protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e){// 设置当前页为新页GridView1.PageIndex = e.NewPageIndex;// 绑定新页数据GridView1.DataBind();
}

执行结果如下：

3.2.5. 选中、编辑和删除GridView数据项

在ASP.NET中实现选中、编辑和删除GridView数据项

3.3. DataList 控件

3.3.1. DataList 模板

DataList控件是一个常用的数据绑定控件，可以称之为迭代控件，该控件能够以某种设定好的模板格式循环显示多条数据，这种模板格式是可以根据需要进行自定义的，比较于GridView控件，虽然GridView控件功能非常强大，但它始终只能以表格的形式显示数据，而使用DataList控件则灵活性非常强，其本身就是一个富有弹性的控件。

DataList中一共有以下几种模板：

模板	说明
ItemTemplate	为项提供内容
AlternatingltemTemplate	为交替项提供内容，是ItemTemplate的扩展
SelectedltemTemplate	为当前选定项提供内容
EditltemTemplate	为当前编辑项提供内容
HeaderTemplate	为页眉提供内容
FooterTemplate	为页脚提供内容

3.3.2. 分页显示DataList控件中的数据

DataList本身不具有分页功能，为了实现分页功能，需要借助PagedDataSource类，例如这个例子

3.4. ListView控件

3.4.1. ListView控件概述

ListView控件用于显示数据，它提供了编辑、删除、插入、分页与排序等功能，ListView大部分的属性方法和事件与GridView和DataList一致，可以理解为GridView控件与DataList控件的融合，它具有GridView控件编辑数据的功能，同时又具有DataList控件灵活布局的功能。

3.4.2. ListView控件的模板

ListView控件有非常多的模板，其中最常用的有六个

模板	说明
ItemTemplate	为项提供内容
GroupTemplate	为组提供内容，它包含一个占位符对象，可以由其他模板中的内容进行替换
SelectedltemTemplate	为当前选定项提供内容
EditltemTemplate	为当前编辑项提供内容
InsertltemTemplate	为插入项提供内容
EmptyDataTemplate	在数据源未返回数据时提供内容

3.4.3. 使用ListView控件对数据进行显示、分页和排序

使用ListView控件对数据进行分页需要用到标签，这是一个用于分页的控件。排序需要用到CommandName属性，令其值为sort，指定要进行排序操作，然后再指定CommandArgument属性，令其值为要排序的列。

使用ListView控件显示数据只需配置数据源即可，而无需写任何一行操作数据库的代码，效果如下：
实现步骤