WebForm 【Repeater】展示数据
在 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 >= ? "white" : "red";
}
} public string SexImg
{
get
{
return Sex ? "images/1.png" : "images/0.png";
}
} } Users.cs
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[]);
u.UserName = dr[].ToString();
u.PassWord = dr[].ToString();
u.NickName = dr[].ToString();
u.Sex = Convert.ToBoolean(dr[]);
u.Birthday = Convert.ToDateTime(dr[]);
u.Nation = dr[].ToString();
ulist.Add(u);
}
conn.Close();
return ulist;
} } UsersData
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
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="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
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
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: %;
height: 80px;
background-color: orange;
} #footer {
width: %;
height: 150px;
background-color: black;
} #main {
width: %;
margin-left: %;
background-color: lightblue;
} .item {
width: %;
margin: 10px %;
float: left;
height: 300px;
background-color: red;
} .item-img {
width: %;
margin: 5px %;
height: %;
background-color: green;
} .item-name {
width: %;
margin: %;
font-size: 20px;
font-weight: bold;
} .item-price {
width: %;
margin-left: %;
} .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: %;
height: 400px;
background-color: red;
float: left;
} .right {
width: %;
height: 400px;
background-color: green;
float: left;
font-size: 30px;
} .content {
width: %;
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 += "";
} 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;
}
}
}
后台代码
WebForm 【Repeater】展示数据的更多相关文章
- repeater灵活运用、repeater的commmand用法、如何不用repeater展示数据
实体类: using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <su ...
- WebForm Repeater的事件、后天数据展示--2017年1月8日
Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 CommandName : 判断点击的是什么按钮,e.Comma ...
- Repeater控件 ---表格展示数据
简介: Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表. Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repea ...
- C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据？
浏览器页面: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defau ...
- Repeater展示表格
1.可以不用table展示数据 <asp:Repeater ID="Repeater1" runat="server"> <ItemTempl ...
- Webform Repeater的灵活运用
案例:模拟购物列表 封装实体类: 数据访问类: 用Repeater展示: 1 <%@ Page Language="C#" AutoEventWireup="t ...
- 使用UITableView展示数据
TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
- C#-WinForm-ListView-表格式展示数据、如何将数据库中的数据展示到ListView中、如何对选中的项进行修改
在展示数据库中不知道数量的数据时怎么展示最好呢?--表格 ListView - 表格形式展示数据 ListView 常用属性 HeaderStyle - "详细信息"视图中列标头的 ...
随机推荐
- ABP框架系列之二十八：(Handling-Exceptions-异常处理)
Introduction This document is for ASP.NET MVC and Web API. If you're interested in ASP.NET Core, see ...
- OpenCV2.4.10 + VS2010开发环境配置
原文转载自:qinyang8513 一.开发环境 1.操作系统:Windows 7(64位) 2.编程环境:Microsoft Visual Studio 2010 3.OpenCV版本:2.4.10 ...
- Pycharm 开发 Django 项目
1. 安装Pycharm, 自行百度安装教程 2. 安装python3 自行百度安装教程 3. 安装Django框架 使用命令: Window的终端控制台输入:安装Django框架. pip inst ...
- Struts2下载及简介
Struts2下载及简介 一.Struts2下载: 进入网址:http://struts.apache.org/download.cgi#struts23163 可以下载最新的Struts2. 1.F ...
- 文件描述符fd、文件指针fp和vfork()
1. fd:在形式上是一个非负整数.实际上他是一个索引值.指向kernal为每一个进程所维护的该进程打开文件的记录表. 当程序打开一个文件或者创建一个新文件的时候kernal向进程返回一个文件描述符. ...
- Latex 模版生成会议论文 不显示Keywords，而是显示 Index Terms- ，改成Keywords 方法
一. 不管显示何种内容,TEX 文件都是 \begin{IEEEKeywords} 关键词1.关键词2,..... \end{IEEEKeywords} 其中:模版文件 IEEETran.cls存在下 ...
- pyg 图片服务器中使用的nginx 编译位置
./nginx 启动
- 关于javac和java
1.为什么安装完jdk后不配置环境变量就能直接运行java,而不能运行javac 在安装jdk的时候jdk会自带一个jre(java运行环境),还会单独安装一个jre,默认路径是和jdk在同级目录,而 ...
- JavaScript操作和使用Cookie
Cookie概述 Cookie是由服务器端生成并储存在浏览器客户端上的数据. 在javaweb开发中Cookie被当做java对象在web服务器端创建,并由web服务器发送给特定浏览器客户端,并且we ...
- ssh命令-使用密钥文件进行登陆
在win上面可以使用XSHELL来登录类似于阿里云这样的安全服务器,在ubuntu上面就可以使用系统自带的命令工具来连接 使用命令 ssh -i key.pem [server] 实例如下: ssh ...