在 Webform 数据展示中 界面层 : HTLM
业务逻辑层 :只能用 C#
Repeater 重复器 能够用来循环展示数据
具有5种模板
HeaderTemplate : 对页眉进行格式设置 ,在加载开始执行一遍,(不论放置什么位置都会首先执行)
FooterTemplate : 对页脚进行格式设置,在加载最后执行一遍
ItemTemplate : 对每一个数据项进行格式设置 (有多少数据就执行多少次)
AlternatingItemTemplate : 对交替数据项进行格式设置
SeparatorTemplate : 对分隔符进行格式设置
绑定数据
<%@ %> 写一些声明语言或者引用
<% %> 编写C#代码,无法在界面上输出
<%= %> 等号后面接一个值,把一个变量的值输出
<%# %> 仅在数据展示中 仅 Repeater 中使用
例 1 、用表格展示学生表的数据
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Users 的摘要说明 /// </summary> public class Users { public int Ids { get; set; } public string UserName { get; set; } public string PassWord { get; set; } public string NickName { get; set; } public bool Sex { get; set; } public string SexStr { get { return Sex ? "男" : "女"; } } public DateTime Birthday { get; set; } public string Nation { get; set; } public int Age { get { return DateTime.Now.Year - Birthday.Year; } } public string WhiteOrRed { get { return Age >= 16 ? "white" : "red"; } } public string SexImg { get { return Sex ? "images/1.png" : "images/0.png"; } } } Users.cs
-- 在 WebForm 中 原生的没有 命名空间
-- 类的属性 不全都是为了给用户展示的 ,也可以输出代码改变展示内容
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; /// <summary> /// UsersData 的摘要说明 /// </summary> public class UsersData { SqlConnection conn = null; SqlCommand cmd = null; public UsersData() { conn = new SqlConnection("server=.;database=Data0216_5;user=sa;pwd=123"); cmd = conn.CreateCommand(); } public List<Users> SelectAll() { List<Users> ulist = new List<Users>(); cmd.CommandText = "select *from Users"; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); while (dr.Read()) { Users u = new Users(); u.Ids = Convert.ToInt32(dr[0]); u.UserName = dr[1].ToString(); u.PassWord = dr[2].ToString(); u.NickName = dr[3].ToString(); u.Sex = Convert.ToBoolean(dr[4]); u.Birthday = Convert.ToDateTime(dr[5]); u.Nation = dr[6].ToString(); ulist.Add(u); } conn.Close(); return ulist; } } UsersData
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Repeater1.DataSource = new UsersData().SelectAll(); Repeater1.DataBind(); } } Default.aspx.cs
Repeater1.DataSource = new UsersData().SelectAll(); --数据源指向
Repeater1.DataBind(); -- DataBind 控件都需要它来控制数据的操作
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <%--页眉设置--%> <table style=" 100%; background-color: navy; text-align: center;"> <tr style="color: white; height: 30px;"> <td>编号</td> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>年龄</td> <td>民族</td> </tr> </HeaderTemplate> <ItemTemplate> <%--数据项设置--%> <tr style="background-color: <%#Eval("WhiteOrRed") %>;"> <%--小于16变为红色--%> <td><%#Eval("Ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWord") %></td> <td><%#Eval("NickName") %>同学</td> <td> <img src="<%#Eval("SexImg") %>" /></td> <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("Nation") %></td> </tr> </ItemTemplate> <FooterTemplate> <%--页脚设置-%> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html> Default.aspx1
<tr style = "background-color:<%#Eval(" WhiteOrRed") %>;">
-- 扩展属性作为调节改变展示内容
<%# Eval( " 属性名 " ) %>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table style=" 100%; background-color: navy; text-align: center;"> <tr style="color: white; height: 30px;"> <td>编号</td> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>年龄</td> <td>民族</td> </tr> </HeaderTemplate> <ItemTemplate> <tr style="background-color: white;"> <td><%#Eval("Ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWord") %></td> <td><%#Eval("NickName") %>同学</td> <td> <img src="<%#Eval("SexImg") %>" /></td> <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("Nation") %></td> </tr> </ItemTemplate> <AlternatingItemTemplate> <%--读数据项交替格式设置--%> <tr style="background-color: aqua;"> <td><%#Eval("Ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWord") %></td> <td><%#Eval("NickName") %>同学</td> <td> <img src="<%#Eval("SexImg") %>" /></td> <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("Nation") %></td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html> Default.aspx2
--使用 AlternatingItemTemplate 使展示结果交替变色展示
-- 在数据展示时 可只用 ItemTemplate 数据项模板,防止因数据库没有数据而表头不显示。
-- 在数据库无内容时,Repeater 所夹内容都不会显示(包括页眉、页脚)
例2、用 Repeater 灵活展示购物站内容
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } #header { 100%; height: 80px; background-color: orange; } #footer { 100%; height: 150px; background-color: black; } #main { 94%; margin-left: 3%; background-color: lightblue; } .item { 23%; margin: 10px 1%; float: left; height: 300px; background-color: red; } .item-img { 98%; margin: 5px 1%; height: 60%; background-color: green; } .item-name { 90%; margin: 5%; font-size: 20px; font-weight: bold; } .item-price { 90%; margin-left: 5%; } .item-price-old { font-size: 16px; text-decoration: line-through; } .item-price-new { font-size: 25px; color: orange; } </style> </head> <body> <form id="form1" runat="server"> <div id="header"></div> <%--中间部分--%> <div id="main"> <%--开重复器--%> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <%--每个div都是一个超链接,链接到单个商品信息--%> <a href="Default2.aspx?i=<%#Eval("Ids") %>" target="_blank"> <div class="item"> <img src="<%#Eval("Pic") %>" class="item-img" /> <%--图片--%> <div class="item-name"><%#Eval("Name") %></div> <%--名称--%> <div class="item-price"> <%--价格--%> <span class="item-price-new"><%#Eval("New_Price") %>元</span> <span class="item-price-old"><%#Eval("Old_Price") %>元</span> </div> </div> </a> </ItemTemplate> </asp:Repeater> <%--清流--%> <div style="clear: both;"></div> <%--中间部分结束--%> </div> <div id="footer"></div> </form> </body> </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .img1 { 50%; height: 400px; background-color: red; float: left; } .right { 50%; height: 400px; background-color: green; float: left; font-size: 30px; } .content { 100%; height: 500px; background-color: yellow; } </style> </head> <body> <form id="form1" runat="server"> <%--图片--%> <asp:Image ID="Image1" CssClass="img1" runat="server" /> <%--右侧部分--%> <div class="right"> <div class="name"> <%--名称--%> <asp:Literal ID="lit_Name" runat="server"></asp:Literal> </div> <div class="has"> 库存: <asp:Literal ID="lit_Has" runat="server"></asp:Literal> 件 </div> <div class="old_price"> <%--老价格--%> <asp:Literal ID="lit_Old" runat="server"></asp:Literal> </div> <div class="new_price"> <%-- 新价格--%> <asp:Literal ID="lit_New" runat="server"></asp:Literal> </div> <input type="button" value="加入购物车" /> </div> <div style="clear: both;"></div> <%--清流--%> <div class="content"> <%--产品介绍--%> <asp:Literal ID="lit_Content" runat="server"></asp:Literal> </div> </form> </body> </html>
——先将 HTML 页面展示出来(搭起界面),碰到需要执行或接收服务器加载的表单元素 再将其替换成控件
Repeater的Command用法
当Repeater里面循环控件时就会用到command,
是Repeater控件的原生事件用法
Repeater里面如果循环控件,控件的ID是会被改变的
ItemCommand -- 事件】任何控件执行提交都来触发这个事件
属性(循环的控件) CommandName="变量" -- 自己随便设的变量 ——定位用
CommandArgument="传递的参数" -- 传递要进行操作 的参数
后台接收
e.CommandName =="变量" -- 找到要操作的对象
e.CommandArgument -- 要操作的数据
ItemCreated -- 绑定数据之前,创建行之后
ItemDataBound -- 绑定数据之后,执行一遍
例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <table style=" 100%; text-align: center; background-color: navy;"> <tr style="color: white;"> <td>编号</td> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>民族</td> <td>操作</td> </tr> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <tr style="background-color: white;"> <td><%#Eval("Ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWord") %></td> <td><%#Eval("NickName") %></td> <td><%#Eval("Sex") %></td> <td><%#Eval("Nation") %></td> <td> <asp:Button ID="Button2" CommandName="u" CommandArgument='<%#Eval("Ids") %>' runat="server" Text="修改" /> <asp:Button ID="Button1" CommandName="d" CommandArgument='<%#Eval("Ids") %>' runat="server" Text="删除" /> <%--自定义属性,用以定位 传值--%> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <%--测验展示用--%> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <asp:Button ID="Button3" runat="server" Text="Button" /> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Repeater1.ItemCommand += Repeater1_ItemCommand; Repeater1.ItemCreated += Repeater1_ItemCreated; Repeater1.ItemDataBound += Repeater1_ItemDataBound; if (!IsPostBack) { Repeater1.DataSource = new UsersData().SelectAll(); Repeater1.DataBind(); } } //绑定数据之后执行 void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) { RepeaterItem ri = e.Item; //e.Item e中的数据 // 每行是一个RepeaterItem 类型的数据 Users u = ri.DataItem as Users; // 将每行数据转换成users类型 if (u.Sex) { ri.Visible = false; //所有 男 的不显示 } } //绑定数据之前,创建行之后执行 void Repeater1_ItemCreated(object sender, RepeaterItemEventArgs e) { Label1.Text += "1"; } void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e) { if (e.CommandName == "u") //当选择 u 时 { Label1.Text += "修改" + e.CommandArgument; } else if (e.CommandName == "d") //当选择 d 时 { Label1.Text += "删除" + e.CommandArgument; } } }