第10讲_DataList控件应用之二

第十讲DataList控件应用之二 教学内容一 在DataList控件中选择数据二 在DataList控件中编辑数据三 在DataList控件中删除数据四 在DataList控件中分页显示数据五 DataList控件应用之二 教学目标 掌握在DataList控件中选择数据的方法 掌握在DataList控件中编辑数据的方法 掌握在DataList控件中删除数据的方法 掌握在DataList控件中分页显示的方法 一 在DataList控件中选择数据 1 11 一 DataList控件的选择项模板使用DataList控件选择项模板的设计要点如下 必须创建ItemTemplate普通项模板 在这个模板内加入一些控件显示记录行的简要信息 以便让读者快速浏览记录 还需要加入按钮控件到这个模板中 以便能够确认选择 必须创建SelectedItemTemplate选择项模板 在这个模板内加入控件来显示选择项的详细信息 若选择项展开后还要再折叠回来 需要加入一个命令按钮启动折叠命令 为各个按钮的反升事件编写后台代码 实现对应的功能 SelectedItemTemplate选择项模板的HTML标记为 二 实现DataList控件的选择功能下例中使用一个DataList控件 将数据库MMIS的数据表employeeInfo的简要信息显示在ItemTemplate普通项模板中 将选定行的详细信息显示在SelectedItemTemplate模板中 SelectedItemTemplate模板可以展开和折叠 创建ASP NETWeb应用程序项目向页面拖入一个DataList控件 一 在DataList控件中选择数据 2 11 在ItemTemplate项模板中仅显示编号和姓名两个字段内容 因而加入两个Label控件绑定到这两个字段 为了确认选择加入一个Button控件到ItemTemplate项模板 Text属性设置为 察看详情 CommandName属性设置为 select 一 在DataList控件中选择数据 3 11 自动套用格式右击DataList控件 再单击 自动套用格式 选择一种合适的格式 编辑ItemTemplate普通项模板DataList控件的项模板编辑器如右图 编辑SelectedItemTemplate选择项模板向SelectedItemTemplate模板中拖入一个1行2列的HTML表控件 是方便其他子控件和文本的定位 在第一个单元格中输入5行文本 修改它们的HTML标记 将它们绑定到数据源 编号 姓名 性别 部门 电话 这些标记是被嵌套在 标记内的 一 在DataList控件中选择数据 4 11 一 在DataList控件中选择数据 5 11 在第二个单元格加入一个Image控件 用来显示相片 加入一个Button按钮 用于启动将SelectedItemTemplate模板折叠的命令 这两个Web服务器控件的HTML标记为 这些标记也是被嵌套在 标记内的 一 在DataList控件中选择数据 6 11 编辑页眉和页脚模板在页眉和页脚模板编辑器中输入一些文字并设置格式 如下图 编写后台代码首先在WebForm1类中编写一个方法MyDataBind 用于连接数据库 填充数据到数据集 绑定数据源到DataList控件等 一 在DataList控件中选择数据 7 11 privatevoidMyDataBind stringconnectionString workstationid localhost initialcatalog MMIS userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText select fromemployeeInfo SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmySet newDataSet 填充数据集 一 在DataList控件中选择数据 8 11 myDataAdapter Fill mySet employeeInfo 数据绑定到控件DataList1DataList1 DataSource mySet Tables employeeInfo DefaultView DataList1 DataBind 网页加载时的代码 privatevoidPage Load objectsender System EventArgse if IsPostBack 调用自定义函数绑定数据MyDataBind 察看详情 按钮是DataList控件的子控件 它的事件已被反升至DataList控件 由于该按钮的CommandName属性设置为 select 所以该按钮的功能代码就要编写在DataList控件的ItemCommand事件中 privatevoidDataList1 ItemCommand objectsource System Web UI WebControls DataListCommandEventArgse if e CommandName select 设置DataList控件的SelectedIndex为当前选择行的索引 以便显示SelectedItemTemplate模板DataList1 SelectedIndex e Item ItemIndex 调用自定义函数绑定数据MyDataBind 一 在DataList控件中选择数据 9 11 为 折叠 按钮编程 因为它也是DataList控件的子控件 所以它的事件已也被反升至DataList控件 由于该按钮的CommandName属性设置为 cancel 所以该按钮的功能代码就要编写在DataList控件的CancelCommand事件中 privatevoidDataList1 CancelCommand objectsource System Web UI WebControls DataListCommandEventArgse 设置DataList控件的SelectedIndex为 1 当前就没有选择项 SelectedItemTemplate模板不显示DataList1 SelectedIndex 1 MyDataBind 一 在DataList控件中选择数据 10 11 一 在DataList控件中选择数据 11 11 运行程序 在第一行的 察看详情 按钮上单击 将第一行展开后的效果如右图 这时在页面上单击 折叠 按钮 可以将SelectedItemTemplate模板折叠起来 使页面变成项目列表 二 在DataList控件中编辑数据 1 11 一 DataList控件的编辑项模板使DataList控件具有编辑修改功能的设计要点如下 必须创建ItemTemplate普通项模板 在这个模板内加入一些控件显示记录行的简要信息 让数据管理者快速浏览记录以确定需要修改的记录 再加入按钮控件到这个模板中 以便启动修改 必须创建EditItemTemplate编辑项模板 并在模板内加入能够实现编辑操作的控件 如TextBox文本框 启动 更新 和 取消 等操作命令的控件 如Button命令按钮 为各个按钮的反升事件编写后台代码 实现对应的功能 EditItemTemplate编辑项模板的HTML标记为 二 实现DataList控件的编辑功能在下例中使用一个DataList控件 将product数据库的数据表fruitInfo的简要信息显示在ItemTemplate普通项模板中 定义EditItemTemplate模板用于数据更新 EditItemTemplate模板可以展开和折叠 编辑ItemTemplate普通项模板DataList控件的项模板编辑器如右图 二 在DataList控件中编辑数据 2 11 编辑EditItemTemplate编辑项模板在EditItemTemplate项模板中 加入3个Label控件分别显示数据源的商品编号 商品名称和产地 将它们绑定到对应的字段上 本模板内只允许修改商品的等级和单价 为此加入2个TextBox控件用于接收用户的修改 将它们绑定到 等级 和 单价字段 加入3个Button控件用于启动 更新数据 撤消更新 和 折回 功能 Button2的Text属性设置为 更新数据 CommandName属性设置为 OK Button3的Text属性设置为 撤消更新 CommandName属性设置为 Undo Button4的Text属性设置为 折回 CommandName属性设置为 Return 二 在DataList控件中编辑数据 3 11 二 在DataList控件中编辑数据 4 11 编辑SeparatorTemplate分隔模板打开SeparatorTemplate分隔模板编辑器 拖入一个HTML的HorizontalRule水平直线到模板中 可将各项分隔开如右图 编辑页眉和页脚模板打开页眉和页脚模板编辑器 向页眉中输入一些文字并调整格式 如右图 编写后台代码在WebForm1类中编写一个方法MyDataBind 用于连接数据库 填充数据到数据集 绑定数据源到DataList控件等 privatevoidMyDataBind stringconnectionString workstationid localhost initialcatalog product userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText select fromfruitInfo SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmySet newDataSet mySet Clear myDataAdapter Fill mySet fruitInfo DataList1 DataSource mySet Tables fruitInfo DefaultView DataList1 DataBind 二 在DataList控件中编辑数据 5 11 网页加载时的代码 privatevoidPage Load objectsender System EventArgse if IsPostBack 调用自定义函数绑定数据MyDataBind 二 在DataList控件中编辑数据 6 11 为 修改 按钮的单击事件编程 因为它是DataList控件的子控件 所以它的事件已被反升至DataList控件 由于该按钮的CommandName属性设置为 edit 所以该按钮的功能代码就要编写在DataList控件的EditCommand事件中 privatevoidDataList1 EditCommand objectsource System Web UI WebControls DataListCommandEventArgse 设置DataList控件的EditItemIndex为当前选择行的索引 以便显示EdittemTemplate模板DataList1 EditItemIndex e Item ItemIndex 调用自定义函数绑定数据MyDataBind 二 在DataList控件中编辑数据 7 11 为 更新数据 撤消更新 和 折回 3个按钮编程 privatevoidDataList1 ItemCommand objectsource System Web UI WebControls DataListCommandEventArgse stringconnectionString workstationid localhost initialcatalog product userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand stringNo stringgrade stringprice 二 在DataList控件中编辑数据 8 11 switch e CommandName case OK No Label e Item FindControl Label4 Text myCommand CommandText select等级 单价fromfruitInfo where商品编号 No SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmyDataSet newDataSet myDataAdapter Fill myDataSet fruitInfo ViewState No No ViewState grade myDataSet Tables fruitInfo Rows 0 等级 ViewState price myDataSet Tables fruitInfo Rows 0 单价 grade TextBox e Item FindControl TextBox1 Text price TextBox e Item FindControl TextBox2 Text myCommand CommandText UpdatefruitInfoset等级 grade 单价 price where商品编号 No try myConnection Open myCommand ExecuteNonQuery 二 在DataList控件中编辑数据 9 11 catch Exception Response Write alert 数据格式出错 数据未被更新 finally myConnection Close break case Undo No ViewState No ToString grade ViewState grade ToString price ViewState price ToString myCommand CommandText UpdatefruitInfoset等级 grade 单价 price where商品编号 No myConnection Open myCommand ExecuteNonQuery myConnection Close break case Return DataList1 EditItemIndex 1 break MyDataBind 二 在DataList控件中编辑数据 10 11 二 在DataList控件中编辑数据 11 11 运行程序 在第二行上单击 修改数据 按钮 将第二行展开后的效果如图 三 在DataList控件中删除数据记录 1 6 一 在DataList控件中删除记录的设计要点使DataList控件具有删除记录功能的设计要点如下 必须创建ItemTemplate普通项模板 在这个模板内加入一些控件显示数据源的信息 让数据管理者快速浏览记录以确定需要删除哪一条记录 还需要加入一个 删除 按钮到这个模板中 以便能够启动删除功能 将DataList控件的DataKeyField属性设置到数据表的主键字段 二 实现在DataList控件中删除记录在下例中使用一个DataList控件 将数据库MMIS的数据表employeeInfo的信息显示在ItemTemplate普通项模板中 加入一个 删除 按钮到ItemTemplate中启动删除功能 后台代码编写自定义方法MyDataBind连接数据库 填充所有行到数据集并绑定到控件DataList1上 privatevoidMyDataBind stringconnectionString workstationid localhost initialcatalog MMIS userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText select fromemployeeInfo SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmySet newDataSet myDataAdapter Fill mySet employeeInfo DataList1 DataSource mySet Tables employeeInfo DefaultView DataList1 DataBind 三 在DataList控件中删除数据记录 2 6 网页加载时绑定数据 privatevoidPage Load objectsender System EventArgse if IsPostBack 调用自定义函数绑定数据MyDataBind 三 在DataList控件中删除数据记录 3 6 为 删除 按钮的单击编写程序代码 因其CommandName属性为 delete 所以程序代码要写在容器控件的反升事件DataList1 DeleteCommand中 privatevoidDataList1 DeleteCommand objectsource System Web UI WebControls DataListCommandEventArgse stringNo DataList1 DataKeys e Item ItemIndex ToString stringconnectionString workstationid localhost initialcatalog MMIS userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText deletefromemployeeInfowhere编号 No myConnection Open myCommand ExecuteNonQuery myConnection Close MyDataBind 三 在DataList控件中删除数据记录 4 6 为 删除 按钮添加属性 以便单击它时能够弹出确认框 privatevoidDataList1 ItemCreated objectsender System Web UI WebControls DataListItemEventArgse 判断若是DataList1中的普通项 交替项或者编辑项if e Item ItemType ListItemType Item e Item ItemType ListItemType AlternatingItem e Item ItemType ListItemType EditItem 将子控件Button1转换为ButtonDelButtonButtonDel Button e Item FindControl Button1 为 删除 按钮添加属性 以便单击它时弹出确认框ButtonDel Attributes Add onclick returnconfirm 确实要删除此行吗 三 在DataList控件中删除数据记录 5 6 程序运行结果如图 三 在DataList控件中删除数据记录 6 6 四 在DataList控件中分页显示数据 1 7 一 如何解决DataList控件分页DataList控件本身不具有分页功能 要使其能够分页显示 可以有两种办法解决 自定义分页数据源 基本思路是每次提取固定数量的行到数据源 假定每页显示5行到DataList控件 就每次提取5条记录到数据源 然后将数据源绑定到控件即可 难点在于如何正确地提取到符合当前页要求的那5条记录 使用PageDataSource类实现分页功能 二 PageDataSource类PageDataSource类是ASP NET用于对数据源进行分页处理的一个类 可用于Repeater DataList和DataGrid等数据绑定控件的分页功能 使用它实现数据绑定控件的分页时 将原先未分页的数据源作为PageDataSource实例的数据源 通过设置其属性使适合数据绑定控件分页的需要 然后将该实例作为数据绑定控件的数据源 即可使数据绑定控件具有分页功能 PageDataSource类常用的属性有 AllowPaging属性 设置或获取是否启用分页 AllowCustomPaging属性 设置或获取是否启用自定义分页 DataSource属性 设置或获取数据绑定控件 例如DataList 的数据源 PageSize属性 设置或获取DataList控件上每页的行数 PageCount属性 DataList控件上的总页数 只读 IsFirstPage属性 其值为true时当前为第一页 只读 IsLastPage属性 其值为true时当前为最后一页 只读 CurrentPageIndex属性 设置或获取当前页的索引号 四 在DataList控件中分页显示数据 2 7 后台代码privatevoidMyDataBind 连接数据库stringconnectionString workstationid localhost initialcatalog MMIS userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText select fromemployeeInfo SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmySet newDataSet 填充数据集 四 在DataList控件中分页显示数据 3 7 myDataAdapter Fill mySet employeeInfo 创建PagedDataSource类的对象用于分页PagedDataSourcepds newPagedDataSource 设置分页对象的数据源pds DataSource mySet Tables employeeInfo DefaultView 启用分页功能pds AllowPaging true 每页5行pds PageSize 5 当前页号intCurrentPageNo 页面是否跳转 四 在DataList控件中分页显示数据 4 7 if Request QueryString Page null CurrentPageNo Convert ToInt32 Request QueryString Page elseCurrentPageNo 1 pds CurrentPageIndex CurrentPageNo 1 this LabelCount Text 共 pds PageCount ToString 页 this LabelCurrent Text 第 CurrentPageNo ToString 页 if pds IsFirstPage HyperLinkUp NavigateUrl Request CurrentExecutionFilePath Page Convert ToString CurrentPageNo 1 if pds IsLastPage HyperLinkDown NavigateUrl Request CurrentExecutionFilePath Page Convert ToString CurrentPageNo 1 DataList1 DataSource pds DataList1 DataBind 四 在DataList控件中分页显示数据 5 7 页面加载时的代码privatevoidPage Load objectsender System EventArgse if IsPostBack 调用自定义函数绑定数据MyDataBind 四 在DataList控件中分页显示数据 6 7 程序的运行结果如图 四 在DataList控件中分页显示数据 7 7 五 DataList控件应用之二 1 9 网上选购商品是电子商务网站常见的网页功能 这里将网页划分为两个区 商品展示区和购物车区 这里通过一个实例来说明这个设计思想 两个功能区域分别用两个DataList控件实现 一 使用DataList控件实现购物功能在网页上使用一个控件DataList1用作商品展示区 在这里客户可以浏览到商品的文字和图片信息 DataList1中还有2个按钮控件Button1和Button2 分别用于 购买一个单位 和 移去一个单位 网页上还有一个控件DataList2 显示购物车信息 当客户在商品展示区某商品上单击 购买一个单位 按钮 就将该商品加入到购物车 若购物车中没有该商品 或数量加1 若购物车中已有该商品 若单击 移去一个单位 按钮 就在购物车中将该商品的数量减1 当然要购物车中有该商品 程序运行的效果如下图 页面的左侧为商品展示区 是使用控件DataList1实现的 在其ItemTemplate项模板中加入了2个Button控件 用于启动 购买一个单位 和 移去一个单位 功能 页面的右侧为购物车区 是使用控件DataList2实现的 购物车设计的重点在于DataList控件数据源的设计 可以使用一个DataTable表对象作为它的数据源 五 DataList控件应用之二 2 9 二 后台代码首先为Form1类定义两个字段级变量 用于购物车的表对象和数据视图 privateDataTableShopCart privateDataViewShopCartView 设计一个自定义函数用于对控件DataList1进行数据绑定 privatevoidDataList1Bind stringconnectionString workstationid localhost initialcatalog product userid sa pwd SqlConnectionmyConnection newSqlConnection connectionString SqlCommandmyCommand myConnection CreateCommand myCommand CommandText select fromfruitInfo SqlDataAdaptermyDataAdapter newSqlDataAdapter myDataAdapter SelectCommand myCommand DataSetmySet newDataSet myDataAdapter Fill mySet fruitInfo DataList1 DataSource mySet Tables fruitInfo DefaultView DataList1 DataBind 五 DataList控件应用之二 3 9 网页加载时初始化购物车对象 对DataList1和DataList2做数据绑定 privatevoidPage Load objectsender System EventArgse if Session ShopCart null ShopCart newDataTable ShopCart Columns Add newDataColumn 编号 typeof string ShopCart Columns Add newDataColumn 品名 typeof string ShopCart Columns Add newDataColumn 单价 typeof double ShopCart Columns Add newDataColumn 数量 typeof double ShopCart Columns Add newDataColumn 金额 typeof double Session ShopCart ShopCart else ShopCart DataTable Session ShopCart 五 DataList控件应用之二 4 9 ShopCartView newDataView ShopCart DataList2 DataSource ShopCartView DataList2 DataBind if IsPostBack 使购物车区不可见this Label1 Visible false this Label2 Visible false this LabelMoney Visible false this DataList2 Visible false 对DataList1做数据绑定DataList1Bind 五