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

其他 2020-04-30 17:19:01 阅读次数: 0

文章目录

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控件显示数据只需配置数据源即可，而无需写任何一行操作数据库的代码，效果如下：
实现步骤
在这里插入图片描述

白水偷偷画工图
原创文章 231 获赞 1114 访问量 147万+
关注 他的留言板

猜你喜欢

转载自blog.csdn.net/baishuiniyaonulia/article/details/105796683
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022