浏览器页面:
代码:
<%@ 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; 100%; height: 80px; background-color: aqua; } #footer { position: relative; 100%; height: 150px; background-color: #e0e0e0; } #items { position: relative; 90%; margin-left: 5%; border: 1px solid yellow; } .item { position: relative; float: left; 19%; height: 300px; margin: 10px 0.5%; background-color: green; } .item img { position: relative; 100%; /* 200px;*/ /*margin:5px 1%;*/ } .item div { position:relative; 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>
重点:(李献策lxc)
在流式布局中,流式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; 100%; height: 80px; background-color: aqua; } #footer { position: relative; 100%; height: 150px; background-color: #e0e0e0; } #items { position: relative; 90%; margin-left: 5%; border: 1px solid yellow; } .item { position: relative; float: left; 19%; height: 300px; margin: 10px 0.5%; background-color: green; } .item img { position: relative; 100%; /* 200px;*/ /*margin:5px 1%;*/ } .item div { position:relative; 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(); } } }
知识点:
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; 100%; height: 80px; background-color: aqua; } #footer { position: relative; 100%; height: 150px; background-color: #e0e0e0; } #items { position: relative; 90%; margin-left: 5%; border: 1px solid yellow; } .item { position: relative; float: left; 19%; height: 300px; margin: 10px 0.5%; background-color: green; } .item img { position: relative; 100%; /* 200px;*/ /*margin:5px 1%;*/ } .item div { position:relative; 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; } //<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> }
优势:进行权限验证,如果不满足权限则不会拼接需要展示的代码,即使“审查代码”也不会显示(李献策lxc)