ASP.NET笔记之 Repeater的使用
1、数据绑定
combox-->bingdsource-->objectdatasource
//连接数据库
**后台代码:
t_usertableadapter adpter=t_usertableadpter();
adpater.调用t_user表的自定义方法
//设置初始数据:
appenddatebource="true";
2、repeater 动态显示数据表中所有数据:(相当于一个for语句我觉得)
#代表绑定数据
(1、模板:<itemtemplate>主键:<%#eval("id")%> </itemtemplate>
(2、其他模板(隔行显示):<alternatingtemplate></alternatingtemplate>
(3、还有头部尾部模板<headeritemplate>还有<footeritemplate>
(4、可以在<%aaa(eval("a")) %>中调用服务端函数
protected string aaa(object url){
return resolveclienturl("/../"+url);
}
(5、常见的类型语句:
**1:e.item.itemtype==listitemtype.item||e.item.itemtype==listitemtype.alternatingitem
指触发的类型为dadalist中的基本行或内容行 :用来判断项是控件内容中的项或交插项
**2:e.item.itemtype == listitemtype.header
指触发的类型为dadalist中的标题行的内容:用来判断项是不是控件的表头
**3搜索资料:
listitemtype 枚举 [c#]请参见
system.web.ui.webcontrols 命名空间 | datagriditem.itemtype | datalistitem.itemtype | repeateritem.itemtype
命名空间: system.web.ui.webcontrols
listitemtype 枚举表示可以包含在列表控件中的不同项,例如 datagrid、datalist 和 repeater。典型的列表控件由包含此枚举所表示的元素的单元格组成。
成员
成员名称 说明
alternatingitem 交替(从零开始的偶数索引)单元格中的项。它是数据绑定的。
edititem 列表控件中当前处于编辑模式的项。它是数据绑定的。
footer 列表控件的页脚。它不是数据绑定的。
header 列表控件的页眉。它不是数据绑定的。
item 列表控件中的项。它是数据绑定的。
pager 页导航,显示定位到与 datagrid 控件关联的不同页的控件。它不是数据绑定的。
selecteditem 列表控件中的选定项。它是数据绑定的。
separator 列表控件中项之间的分隔符。它不是数据绑定的。
3、repeater事件之itemdatabound事件
(1、onitemdatabound事件(绑定中获取同一行相关信息)
datarowview myrow= (datarowview)e.item.dataitem;
myrow["这里是相关字段名称"]
(2、后台代码:获取数据库表中的列
//取出绑定行的信息
datarowview view=(datarowview)e.item.dataitem;
//强连接
var row=(项目名称/文件夹名/dal/datasetpersons/t_personsrow)view.row;
(3、后台代码:母版中的id不能直接取
//获得id
textbox txtid=(textbox)e.item.findcontrol("id");
//根据id进行操作
txtid.backcolor=color.red;
(4、aspx中:href='<%#eval("url")%>'
这样在浏览器中点击是不会到指定页面的,应当改成
href='http://<%#eval("url")%>'
(5、aspx中:支持格式
<%#eval("date","yyyy-mm-dd")%>
4、repeater事件之itemcommand事件
** e.commandname 名字
** e.commandargument 参数
**后台代码获取前台传过来的参数例如id: long id=convert.toint64(e.commandargument);
**后台代码:repeater.databing//强制刷新数据
(1、onclientclick="return confirm("您真的要操作吗?");"
(2、看aspx中id的类型,可以先顶一个id,然后在aspx.cs中查看它是什么类型
//如下用法:
htmltablerow tr=(htmltablerow)e.item.findcontrol("id");
//自定义属性::css具体的实现在页面中,后台只是引用
**后台代码:tr.attributes["class"]="css中的.id";
(3、抛出错误: throw new exception("自己定义的错误类型");
5、实例:
move_pic.aspx
<%@ page language="c#" autoeventwireup="true" codebehind="move_pic.aspx.cs" inherits="move_pic.move_pic" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
<title></title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:objectdatasource id="objectdatasource1" runat="server"
deletemethod="delete" insertmethod="insert"
oldvaluesparameterformatstring="original_{0}" selectmethod="getdata"
typename="move_pic.dal.dataset1tableadapters.t_userinfotableadapter"
updatemethod="update">
<deleteparameters>
<asp:parameter name="original_susername" type="string" />
</deleteparameters>
<insertparameters>
<asp:parameter name="susername" type="string" />
<asp:parameter name="spassword" type="string" />
<asp:parameter name="email" type="string" />
<asp:parameter name="age" type="int32" />
<asp:parameter name="pic_url" type="string" />
</insertparameters>
<updateparameters>
<asp:parameter name="spassword" type="string" />
<asp:parameter name="email" type="string" />
<asp:parameter name="age" type="int32" />
<asp:parameter name="pic_url" type="string" />
<asp:parameter name="original_susername" type="string" />
</updateparameters>
</asp:objectdatasource>
<asp:repeater id="repeater1" runat="server" datasourceid="objectdatasource1">
<headertemplate>欢迎选购<table id="tableid"><tr></headertemplate>
<itemtemplate><td>
<img a1='<%#eval("susername")%>' a2='<%#eval("age") %>'width="100",
height="150" src='image/<%#eval("pic_url") %>' /></td>
</itemtemplate>
<footertemplate></tr></table>欢迎下次光临</footertemplate>
</asp:repeater>
<script type="text/javascript">
/*$("img").mousemove(function (e) {
$("#susername").text($(this).attr("a1"));
$("#age").text($(this).attr("a2"));
$("#divnone").css("top", e.pagey).css("left", e.pagex).show("slow");
});*/
//动态增长
/* $(function () {
$("#img").click(function () {
//$(this).animate({ "width": "+=300", "height": "+=300" });
$(this).animate({"width":"300","height":"300"});
//$(this).attr("width", "300").attr("height", "300");
});
});*/
$("#tableid img").mouseenter(function () {
$(this).animate({ "width": "300", "height": "300" },"slow");
//$(this).siblings().animate({ "width": "150", "height": "300" });
//将自己排除在外
$("#tableid img").not($(this)).animate({ "width": "100", "height": "150" }, "slow");
});
</script>
</div>
<div style="display:none" id="divnone">
<p>姓名:<span id="susername"></span></p>
<p>年龄:<span id="age"></span></p>
</div>
</form>
</body>
</html>
数据库表设计如下: