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

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控件能够指定能够用来填充列表控件的数据源,其中与数据绑定修改的属性有:

  1. DataSource属性,用来设置数据源
  2. DataTextField属性,用来指定提供文本内容的数据源字段
  3. 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);

        // 将查询到的数据放入一个DataSet
        DataSet 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控件绑定数据源主要用到

  1. DataSource属性,用来指定数据源
  2. 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控件分页显示数据主要用到了以下两个属性和一个事件:

  1. AllowPaging属性,用来决定是否启用分页功能
  2. PageSize属性,设置分页时每页显示几条记录,默认是12条
  3. 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控件显示数据只需配置数据源即可,而无需写任何一行操作数据库的代码,效果如下:
实现步骤
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页