在 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.csRepeater1.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="width: 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="width: 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 {
width: 100%;
height: 80px;
background-color: orange;
}
#footer {
width: 100%;
height: 150px;
background-color: black;
}
#main {
width: 94%;
margin-left: 3%;
background-color: lightblue;
}
.item {
width: 23%;
margin: 10px 1%;
float: left;
height: 300px;
background-color: red;
}
.item-img {
width: 98%;
margin: 5px 1%;
height: 60%;
background-color: green;
}
.item-name {
width: 90%;
margin: 5%;
font-size: 20px;
font-weight: bold;
}
.item-price {
width: 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 {
width: 50%;
height: 400px;
background-color: red;
float: left;
}
.right {
width: 50%;
height: 400px;
background-color: green;
float: left;
font-size: 30px;
}
.content {
width: 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="width: 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;
}
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
