文章
文章用户教程圈子网址导航
ruanzhu

第7章 数据绑定控件（一）

内容纲要

7.1 数据绑定控件 

7.1.1 数据绑定控件简介 

  1. 数据绑定是 ASP.NET 提供的另一种访问数据库的方法，让开发人员不关注数据库连接及命令、如何格式化数据显示在页面上的环节，而是直接把数据绑定到 HTML 元素和 Web 控件中 
  2. 数据绑定控件分为列表型控件、表格型控件和层次型控件几种 
  3. 所有的数据绑定控件都从 BaseDataBoundControl 抽象类派生，它的重要属性和重要方法 
  • DataSource ：指定控件的数据来源，程序会从该数据源中获取数据并显示 
  • DataBind()  ：显示绑定的数据 

ASP.NET提供了大量数据绑定控件，常用数据绑定控件

  • DropDownList：下拉数据绑定控件 
  • Repeater ：容器控件，用于生成各个子项的列表，不支持分页、排序和编辑，仅提供重复模板内容
  • GridView ：以表格的形式进行数据展示，有自带分页，支持删、改、排序、分页 
  • DetailsView ：DetailsView 控件以表格形式显示数据，且一次仅显示数据源的单条记录 
  • DataList ：用于显示限制于该控件项目的重复列表，默认地在数据项目上添加表格，且具有内置样式设置 
  • ListView ：按照编程者编写的模板显示数据，提供增、删、改、排序和分页等功能
  • FormView ：FormView 控件仅可显示数据源中的单条记录

7.1.2 数据绑定的原理 

数据绑定的原理如下 

  • 设置控件的数据源和数据的显示格式
  • 设置完成后，控件就会自动处理剩余的工作以把要显示的数据按照要显示的格式显示在页面上 

7.1.3 数据绑定的类型 

数据绑定的类型分为两种 

单值绑定方式 

  • <%=XXX %>：内联引用方式，可以引用 C# 代码 
  • <%# XXX %>：可以引用 .cs 文件中的代码的字段，但这个字段必须在初始化后，在页面的 Load 事件中使用 Page.DataBind 方法来实现 
  • <%#$ XXX %>：可以引用 Web.config 文件中预定义的字段或者已注册的类 
  • <%# Eval(XXX) %>：类似于 JavaScript，数据源也需要绑定 

单值绑定的使用 

示例：

 //Default.aspx.cs 代码如下：
namespace WebApplication1
{
  public partial class Default : System.Web.UI.Page
  {
    public string projectName;
    protected void Page_Load(object sender, EventArgs e)
    {
      projectName = " 单值绑定 ";
      Page.DataBind();
    }
  }
}

单值绑定的优缺点 

优点 ：

  • 简单，灵活
  • 可以在页面上随意数据绑定，方便 

缺点 ：

  • 数据绑定的代码和界面标签混合在一起，不方便管理和维护
  • 代码过于分散，使得不同的程序员很难在同一个项目上协同工作 

经验：为了避免代码与 HTML 混用和便于管理，可以在后台代码中以赋值的方式替代单值数据绑定，在页面的 Load 事件中对控件进行赋值 

多值绑定方式 

  • 多值绑定可以显示一个表中的所有内容，同单值绑定不一样，这种类型的数据绑定需要支持它的特殊控件 

7.1.4 数据绑定的工作方式 

  • 使用单值数据绑定时，需要把数据绑定表达式插入到 .aspx文件的标记中。使用多值数据绑定时，必须设置一个数据控件的单个或多个属性 
  • 在页面的 Load 事件中调用 DataBind() 方法可以激活数据绑定功能，否则ASP.NET将忽略数据绑定，页面上以空的形式呈现 

注意：

  • 如果数据绑定表达式作为属性的值，最外层使用双引号或单引号都可以
  • 如果表达式中出现双引号，则最外层最好使用单引号 

7.2 DropDownList 控件 

7.2.1 DropDownList 控件的使用 

DropDownList 控件用于显示只能选择一项的下拉列表框，在客户端被解释成 <select></select> 的 HTML 标记。常见属性 

  • AutoPostBack ：设置当下拉列表项发生变化时，是否主动向服务器提交整个表单，默认是 false，即不主动提交，为true则触发SelectedIndexChanged事件 
  • DataTextField：设置列表项的可见部分的文字 
  • DataValueField：设置列表项的值部分 
  • Items：获取控件的列表项的集合 
  • SelectedIndex：获取或设置 DropDownList 控件中的选定项的索引 
  • SelectedItem：获取列表控件中的选定项 
  • SelectedValue ：取列表控件中选定项的值 

示例：“新鲜生活”站点的商品管理页面，使用 DropDownList 控件绑定商品分类数据 

所属分类案例使用 DropDownList 控件绑定数据的具体操作步骤 

  • 为“新鲜生活”站点添加后台管理项目 Admin 
  • 在 Models 项目中新建 ProductClass（商品分类）类 
public class ProductClass
{
  public int ClassID { get; set; }
  public string ClassName { get; set; }
  public int ParentClassID { get; set; }
}

在 DAL 项目中新建 ProductClassService 类 

public static List<ProductClass> SelectProductClassByParentID(int parentID)
{
  string sql = "select * from productclass where parentclassid=" + parentID;
  SqlDataReader dr = DBHelper.Instance().GetDataReaderBySql(sql);
  List<ProductClass> list = new List<ProductClass>();
  while (dr.Read())
  {
    ProductClass pc = new ProductClass();
    pc.ClassID = dr.GetInt32(0);//DAL中完成数据库查询分类，读取数据到List集合中
    pc.ClassName = dr.GetString(1);
    pc.ParentClassID = dr.GetInt32(2);
    list.Add(pc);
  }
  dr.Close();
  return list;}

在 BLL 项目中新建 ProductClassManager 类

public class ProductClassManager
{
//构建业务逻辑层方法
  public static List<ProductClass> SelectParentProductClass()
  {
    return ProductClassService.SelectProductClassByParentID(0);
  }
}

在 Admin 项目的 Product 文件夹中添加 ProductList.aspx 页面 

<asp:DropDownList ID="ddlProductClass" runat="server">//定义下拉列表组件，id为ddlProductClass
</asp:DropDownList>

对应的代码文件中完成数据的调用和绑定 

protected void Page_Load(object sender, EventArgs e)
{
  if(!this.IsPostBack)
  {
    BindProductClass();//界面加载时，调用绑定商品方法，数据会自动显示
  }
}
void BindProductClass()
{
  this.ddlProductClass.DataSource = ProductClassManager.SelectParentProductClass();
  this.ddlProductClass.DataTextField = "ClassName";//绑定数据的方法，绑定数据源，设置显示和隐藏的属性
  this.ddlProductClass.DataValueField = "ClassID";
  this.ddlProductClass.DataBind();
}

7.3 DataList 控件 

7.3.1 DataList 控件的使用 

DataList 控件使用模板定义样式来显示数据，并执行数据的选择、删除和编辑 

DataList 控件最大的特点是通过模板来定义数据的显示格式，DataList 可以在一行显示多条记录 

  • 多行多列数据（即表格类型的数据）的展示，选择 GridView 控件
  • 单行多列或多行单列数据的展示，则使用 DataList 控件或 Repeater 控件 

DataList 支持多种模板，必须使用的模板是 ItemTemplate

DataList 的两个重要属性 

  • RepeatColumns ：DataList 中显示的列数，默认是 0 
  • RepeatDirection ：DataList 的显示方式有 Horizontal 和 Vertical 两个值，分别代表水平和垂直显示 

示例：“新鲜生活”站点首页，使用 DataList 控件的 ItemTemplate“模板列”显示“蔬菜水果”分类下的商品信息 

DataList显示数据 

使用 DataList 控件的 ItemTemplate 显示“蔬菜水果”分类下商品信息 

  • 从 Visual Studio 2017 工具箱中，拖放 DataList 控件到 Default.aspx 页面并放置到分类展示位置，重命名为“dlProductList1”
  • 在 Models 项目中添加 Product 实体类 
public class Product
{
  public int ProductID { get; set; }
  public string ProductName { get; set; }
  public string ProductPic { get; set; }
  public float ProductPrice { get; set; }
  public string ProductDesc { get; set; }
  public int ClassID { get; set; }
  public DateTime AddTime { get; set; }
}

在 DAL 项目中创建 ProductService 类，并在其中添加 SelectProductALL 方法 

public static List<Product> SelectProductByClassID(int ClassID)
{
  string sql = "select top 10 * from  Product where ClassID=" + ClassID;
  SqlDataReader dr = DBHelper.Instance().GetDataReaderBySql(sql);
  List<Product> list = new List<Product>();
//该方法主要是DAL层中查询商品数据的方法
  while (dr.Read())
  {
    Product p = new Product();
    p.ProductID = dr.GetInt32(0);
    p.ProductName = dr.GetString(1);
    p.ProductPic = dr.GetString(2);
    //其他属性略
    list.Add(p);
  }
  dr.Close();
  return list;}

在 BLL 项目中添加 ProductManager 类，并在此类中添加 SelectProductALL 方法 

public static List<Product> SelectProductByClassID(int ClassID)
{
  return ProductService.SelectProductByClassID(ClassID);//业务逻辑层查询方法
}

在 ProductList.aspx 页面的后端类中编写如下代码 

protected void Page_Load(object sender, EventArgs e)
{
  if(!this.IsPostBack)
  {
    // 绑定蔬菜水果商品列表
    BindProductListByClassID();//调用绑定蔬菜水果方法  
  }
}
/// 获取指定分类下的商品列表
void BindProductListByClassID()
{
  this.dlProductList1.DataSource = ProductManager.SelectProductByClassID(1);//数据源绑定
  this.dlProductList1.DataBind();
}

点击 DataList 控件右上角的三角箭头，在“DataList 任务”弹出框中点击“编辑模板”         放置 Image 控件到 ItemTemplate 模板中，用于显示商品图片 

打开Default.aspx 页面的“源”视图，修改 DataList 控件 ItemTemplate 模板的源代码

<asp:DataList ID="dlProductList1" runat="server" RepeatColumns="5">//重复5列
<ItemTemplate>
    <table>
      <tr><td><asp:Image id="imagePic" ImageUrl='<%# "~/Admin/ProductPic/"+ 
            Eval("ProductPic")%>' runat="server"/></td>
                </tr>
      <tr><td style="text-align:center"><%# Eval("ProductName")%></td><!--设置列中的数据项格式-->
                </tr>
      <tr><td style="text-align:center">￥<%# Eval("ProductPrice")%></td><!--<%# Eval(" 字段名 ") %> 称为绑定表达式，用于绑定数据源中指定的字段。-->
                </tr>
    </table>
  </ItemTemplate>
</asp:DataList>

7.4 Repeater 控件 

7.4.1 Repeater 控件的使用 

Repeater 控件完全由模板驱动，可以任意设置其输出格式。Repeater 控件不生成任何类似于 <table> 标签的布局代码，它为显示数据库记录提供了最大限度的灵活性。在使用 Repeater 控件时，只能在“源”视图中进行编辑 

示例：使用 Repeater 控件显示“新鲜生活”站点首页的商品分类列表

Repeater控件显示列表 

从 Visual Studio 2017 工具箱中，拖放 Repeater 控件到 Default.aspx 页面中 

通过 Default.aspx 页面的“源”视图，编辑 Repeater 控件的 ItemTemplate 模板 

<div class="catenav" id ="showhideindex">
  <p class="catenav_tit"><a href="#"> 全部商品分类 </a></p>
  <div class="catenav_cont" id = "hideindex" style="display:block;">
    <div class="catenav_cont1">
      <asp:Repeater ID="rpProductClass" runat="server">
        <ItemTemplate>
          <div class="catenav_list<%# Eval("ClassID") %> items">
            <dl><dt>
                <h3><a href="ProductList.aspx?ClassID=<%# Eval("ClassID") 
                  %>"><i class="i_<%# Eval("ClassID") %>"></i><%# 
                  Eval("ClassName") %></a></h3>
            </dt></dl>
          </div>
        </ItemTemplate>
      </asp:Repeater>
    </div>
    </div>
</div>

在 Default.aspx 页面的后端类中编写如下代码 

protected void Page_Load(object sender, EventArgs e)
{
  if(!this.IsPostBack)
  {
    // 显示商品分类列表
    ShowProductList();
  }
}
/// 获取商品一级分类
void ShowProductList()
{
  this.rpProductClass.DataSource = ProductClassManager.SelectParentProductClass();//Repeater控件绑定数据源
  this.rpProductClass.DataBind();
}
  • 运行 Default.aspx 页面，商品分类列表的显示效果
  • 在 IE 浏览器的显示页面上，点击鼠标右键“查看源”，可以发现 Repeater 控件生成如下所示的 HTML 代码 
<div class="catenav_list2 items">
        <dl>
          <dt>
            <h3>
              <a href="ProductList.aspx?ClassID=2"><i class="i_2"></i> 鲜肉禽蛋 </a><!--根据最初模板生成的数据列表-->
            </h3>
          </dt>
        </dl>
</div>

总结 

  1.  数据绑定是 ASP.NET 提供的另一种访问数据库的方法，它可以在不关注数据库操作代码的情况下直接把数据绑定到 HTML 元素和 Web 控件中 
  2.  数据控件是用来显示从数据库中获取的数据的一种控件，以可视化的方式查看绑定数据之后的效果 
  3.  数据绑定的类型分为单值绑定和多值绑定两种 
  4. DropDownList 控件用于显示只能选择一项的下拉列表框，被解释成<select></select>标签
  5.  DataList 控件使用模板与定义样式来显示数据，并执行数据的选择、删除和编辑 

给TA打赏
共{{data.count}}人
人已打赏
.NET.Net Core

在ASP.NET和ASP.NET Core之间共享代码教程

2022-8-22 16:38:07

.NET开发工具

了解 Visual Studio Code 中的 .NET 调试器

2022-8-23 11:16:03

ruanzhu
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 51Aspx公众号

  • 企业微信客服

返回顶部