浏览器页面:

代码:
<%@ 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>
* {
margin: 0px;
padding: 0px;
}
#header {
position: relative;
width: 100%;
height: 80px;
background-color: aqua;
}
#footer {
position: relative;
width: 100%;
height: 150px;
background-color: #e0e0e0;
}
#items {
position: relative;
width: 90%;
margin-left: 5%;
border: 1px solid yellow;
}
.item {
position: relative;
float: left;
width: 19%;
height: 300px;
margin: 10px 0.5%;
background-color: green;
}
.item img {
position: relative;
width: 100%;
/*width: 200px;*/
/*margin:5px 1%;*/
}
.item div {
position:relative;
width:96%;
margin:4px 2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="items">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%#Eval("pic") %>" />
<div>品种:<%#Eval("name") %></div>
<div>现价:<%#Eval("nowprice") %></div>
<div>原价:<%#Eval("oldprice") %></div>
<div>简述:<%#Eval("context") %></div>
</div>
</ItemTemplate>
</asp:Repeater>
<div style="clear: both;"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>
<%@ 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>
* {
margin: 0px;
padding: 0px;
}
#header {
position: relative;
width: 100%;
height: 80px;
background-color: aqua;
}
#footer {
position: relative;
width: 100%;
height: 150px;
background-color: #e0e0e0;
}
#items {
position: relative;
width: 90%;
margin-left: 5%;
border: 1px solid yellow;
}
.item {
position: relative;
float: left;
width: 19%;
height: 300px;
margin: 10px 0.5%;
background-color: green;
}
.item img {
position: relative;
width: 100%;
/*width: 200px;*/
/*margin:5px 1%;*/
}
.item div {
position:relative;
width:96%;
margin:4px 2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="items">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%#Eval("pic") %>" />
<div>品种:<%#Eval("name") %></div>
<div>现价:<%#Eval("nowprice") %></div>
<div>原价:<%#Eval("oldprice") %></div>
<div>简述:<%#Eval("context") %></div>
</div>
</ItemTemplate>
</asp:Repeater>
<div style="clear: both;"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>
重点
在流式布局中,流式div是不占有位置的,所以要用 “<div style="clear:both;"></div>” 撑起位置(李献策lxc)

=======================================================
ItemCommand的用法:
在DataList中生成事件时的激发。
前台代码:
<%@ 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>
* {
margin: 0px;
padding: 0px;
}
#header {
position: relative;
width: 100%;
height: 80px;
background-color: aqua;
}
#footer {
position: relative;
width: 100%;
height: 150px;
background-color: #e0e0e0;
}
#items {
position: relative;
width: 90%;
margin-left: 5%;
border: 1px solid yellow;
}
.item {
position: relative;
float: left;
width: 19%;
height: 300px;
margin: 10px 0.5%;
background-color: green;
}
.item img {
position: relative;
width: 100%;
/*width: 200px;*/
/*margin:5px 1%;*/
}
.item div {
position:relative;
width:96%;
margin:4px 2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="items">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%#Eval("pic") %>" />
<div>品种:<%#Eval("name") %></div>
<div>现价:<%#Eval("nowprice") %></div>
<div>原价:<%#Eval("oldprice") %></div>
<div>简述:<%#Eval("context") %></div>
<asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument=‘<%#Eval("ids") %>‘ Text="修改" />
<asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument=‘<%#Eval("ids") %>‘ Text="删除" />
</div>
</ItemTemplate>
</asp:Repeater>
<div style="clear: both;"></div>
</div>
<div id="footer"></div>
</form>
</body>
</html>
<%@ 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>
* {
margin: 0px;
padding: 0px;
}
#header {
position: relative;
width: 100%;
height: 80px;
background-color: aqua;
}
#footer {
position: relative;
width: 100%;
height: 150px;
background-color: #e0e0e0;
}
#items {
position: relative;
width: 90%;
margin-left: 5%;
border: 1px solid yellow;
}
.item {
position: relative;
float: left;
width: 19%;
height: 300px;
margin: 10px 0.5%;
background-color: green;
}
.item img {
position: relative;
width: 100%;
/*width: 200px;*/
/*margin:5px 1%;*/
}
.item div {
position:relative;
width:96%;
margin:4px 2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="items">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%#Eval("pic") %>" />
<div>品种:<%#Eval("name") %></div>
<div>现价:<%#Eval("nowprice") %></div>
<div>原价:<%#Eval("oldprice") %></div>
<div>简述:<%#Eval("context") %></div>
<asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument=‘<%#Eval("ids") %>‘ Text="修改" />
<asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument=‘<%#Eval("ids") %>‘ Text="删除" />
</div>
</ItemTemplate>
</asp:Repeater>
<div style="clear: both;"></div>
</div>
<div id="footer"></div>
</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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = new petData().Select();
Repeater1.DataBind();
}
//Repeater 中按钮触发事件
Repeater1.ItemCommand += Repeater1_ItemCommand;
}
//Repeater 中按钮触发事件
void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Update")
{
}
if (e.CommandName == "Delete")
{
bool ok = new petData().Delete(Convert.ToInt32(e.CommandArgument));
Repeater1.DataSource = new petData().Select();
Repeater1.DataBind();
}
}
}
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)
{
if (!IsPostBack)
{
Repeater1.DataSource = new petData().Select();
Repeater1.DataBind();
}
//Repeater 中按钮触发事件
Repeater1.ItemCommand += Repeater1_ItemCommand;
}
//Repeater 中按钮触发事件
void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Update")
{
}
if (e.CommandName == "Delete")
{
bool ok = new petData().Delete(Convert.ToInt32(e.CommandArgument));
Repeater1.DataSource = new petData().Select();
Repeater1.DataBind();
}
}
}
知识点:
1、后台注册ItemCommand事件(李献策lxc)
2、前台按钮添加属性:CommandName 和 CommandArgument
3、判断按钮返回的值CommandName是什么,进行相应的操作
4、object source - 触发事件的对象 RepeaterCommandEventArgs e - 触发事件的数据
=======================================================
如何不适用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>
* {
margin: 0px;
padding: 0px;
}
#header {
position: relative;
width: 100%;
height: 80px;
background-color: aqua;
}
#footer {
position: relative;
width: 100%;
height: 150px;
background-color: #e0e0e0;
}
#items {
position: relative;
width: 90%;
margin-left: 5%;
border: 1px solid yellow;
}
.item {
position: relative;
float: left;
width: 19%;
height: 300px;
margin: 10px 0.5%;
background-color: green;
}
.item img {
position: relative;
width: 100%;
/*width: 200px;*/
/*margin:5px 1%;*/
}
.item div {
position:relative;
width:96%;
margin:4px 2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header"></div>
<div id="items">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div id="footer"></div>
</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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Literal1.Text = DataBind();
}
}
public string DataBind()
{
List<pet> plist = new petData().Select();
string end = "";
foreach (pet p in plist)
{
if(p.name=="哈士奇")
{
continue;
}
end += "<div class=\"item\">";
end += "<img src=\"" + p.pic + "\" />";
end += "<div>品种:" + p.name + "</div>";
end += "<div>现价:" + p.nowprice + "</div>";
end += "<div>原价:" + p.oldprice + "</div>";
end += "<div>简述:" + p.context + "</div>";
end += "<a href=\"Delete.aspx?ids=" + p.ids + "\">修改</a>";
end += " ";
end += "<a href=\"Update.aspx?ids=" + p.ids + "\">删除</a>";
end += "</div>";
}
end += "<div style=\"clear:both;\"></div>";
return end;
}
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)
{
if (!IsPostBack)
{
Literal1.Text = DataBind();
}
}
public string DataBind()
{
List<pet> plist = new petData().Select();
string end = "";
foreach (pet p in plist)
{
if(p.name=="哈士奇")
{
continue;
}
end += "<div class=\"item\">";
end += "<img src=\"" + p.pic + "\" />";
end += "<div>品种:" + p.name + "</div>";
end += "<div>现价:" + p.nowprice + "</div>";
end += "<div>原价:" + p.oldprice + "</div>";
end += "<div>简述:" + p.context + "</div>";
end += "<a href=\"Delete.aspx?ids=" + p.ids + "\">修改</a>";
end += " ";
end += "<a href=\"Update.aspx?ids=" + p.ids + "\">删除</a>";
end += "</div>";
}
end += "<div style=\"clear:both;\"></div>";
return end;
}
//<div class="item">
//<img src="<%#Eval("pic") %>" />
//<div>品种:<%#Eval("name") %></div>
//<div>现价:<%#Eval("nowprice") %></div>
//<div>原价:<%#Eval("oldprice") %></div>
//<div>简述:<%#Eval("context") %></div>
//<asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument=‘<%#Eval("ids") %>‘ Text="修改" />
//<asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument=‘<%#Eval("ids") %>‘ Text="删除" />
//</div>
}
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)
{
if (!IsPostBack)
{
Literal1.Text = DataBind();
}
}
public string DataBind()
{
List<pet> plist = new petData().Select();
string end = "";
foreach (pet p in plist)
{
if(p.name=="哈士奇")
{
continue;
}
end += "<div class=\"item\">";
end += "<img src=\"" + p.pic + "\" />";
end += "<div>品种:" + p.name + "</div>";
end += "<div>现价:" + p.nowprice + "</div>";
end += "<div>原价:" + p.oldprice + "</div>";
end += "<div>简述:" + p.context + "</div>";
end += "<a href=\"Delete.aspx?ids=" + p.ids + "\">修改</a>";
end += " ";
end += "<a href=\"Update.aspx?ids=" + p.ids + "\">删除</a>";
end += "</div>";
}
end += "<div style=\"clear:both;\"></div>";
return end;
}
//<div class="item">
//<img src="<%#Eval("pic") %>" />
//<div>品种:<%#Eval("name") %></div>
//<div>现价:<%#Eval("nowprice") %></div>
//<div>原价:<%#Eval("oldprice") %></div>
//<div>简述:<%#Eval("context") %></div>
//<asp:Button ID="Button1" runat="server" CommandName="Update" CommandArgument=‘<%#Eval("ids") %>‘ Text="修改" />
//<asp:Button ID="Button2" runat="server" CommandName="Delete" CommandArgument=‘<%#Eval("ids") %>‘ Text="删除" />
//</div>
}
C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据?
原文:http://www.cnblogs.com/baimangguo/p/6391270.html