分享
 
 
 

ASP.NET:Repeater控件的详解

王朝asp·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

在学习DataGrid控件和DataList控件后,我们知道,DataGrid控件对数据输出格式是自动生成HtmlTable标记的,DataList控件也是这样,它根据数据内容来生成数据控制表格。而Repeater 控件是模板化的数据绑定列表,Repeater 控件是“无外观的”,即:它不具有任何内置布局或样式,也就不会产生任何数据控制表格来控制数据的显示。因此,我们必须在控件的模板中明确声明所有 HTML 布局标记、格式标记和样式标记。

在第一节里我们也说过Repeater控件是个轻量级的数据绑定控件,一般用它来输出要求相对简单的数据,下面,我们利用这个控件,做一个简单的留言板。在这个留言板里,我们充分利用Repeater控件的控能,进行数据显示,数据分页,嵌入控件响应事件等等。

首先,利用Access2003新建一个GuestbookData.mdb数据库,包含一个数据表GuestMessage,数据表字段属性如图9.16所示。

图9.16 GuestMessage数据表的字段属性

一个功能完善的留言板应包括三个主要内容:

(1)、留言浏览

(2)、发表留言

(3)、留言管理(回复,删除。有的还要求有审核功能)

我们来根据这三个功能来详细介绍我们这个实例的编写。

在DataCon Web 项目中新增一个WebForm窗体,命名为Repeater_Sample.aspx,添加一个Repeater控件,ID=“Repeater1”;三个Panel控件,三个Panel控件的ID分别是“login”,“reply”和“write”。

首先我们来看“留言浏览”功能的HTML布局代码。在“留言浏览”部分我们要应用Repeater控件,该控件的属性列、绑定设置以及嵌入控件属性如下,注意绑定数据的使用:

<TABLE id="Table2" style="WIDTH: 384px; TR: "

cellSpacing="0" cellPadding="0" width="384"

align="left" border="0">

<TBODY>

<TR borderColor="#009900">

<td><asp:linkbutton id="say" Runat="server">我要说两句</asp:linkbutton></td>

</TR>

<TR>

<TD>

<asp:repeater id="Repeater1" runat="server">

<ItemTemplate>

<table width="400" border="1"

cellpadding="0" cellspacing="0"

bordercolor="#009966" style="FONT-SIZE: 12px">

<tr>

<td width="100" height="20">

昵称:<%# databinder.eval(container.dataitem,"name" ) %></td>

<td width="300">

这是 <b><%# databinder.eval(container.dataitem,"name" ) %>

</b><%# databinder.eval(container.dataitem,"sex" ) %>于[<%# databinder.eval(container.dataitem,"senddate").tostring %>]的留言</td>

</tr>

<tr>

<td><%# "<img width=50 height=90 src ="+databinder.eval(container.dataitem,"face")+">" %></td>

<td><%# databinder.eval(container.dataitem,"content") %></td>

</tr>

<tr>

<td><%# "<img src=image/ip.gif alt=IP:"+ databinder.eval(container.dataitem,"ip")+" >" %>

<%# databinder.eval(container.dataitem,"ip") %>

</td><td>

<%# "<a href=mailto:" & DataBinder.Eval(Container.DataItem,"Email") & ">给他发邮件</a>" %>

<asp:LinkButton Runat=server CommandName ="del" CommandArgument= '<%# DataBinder.Eval(Container.DataItem,"ID") %>' ID="Linkbutton1" NAME="Linkbutton1">删除留言</asp:LinkButton>

&nbsp;&nbsp;&nbsp;

<asp:LinkButton Runat=server CommandName ="reply" CommandArgument= '<%# DataBinder.Eval(Container.DataItem,"ID") %>' ID="Linkbutton2" NAME="Linkbutton1">回复留言</asp:LinkButton>&nbsp;&nbsp;&nbsp;

</tr>

</table>

</ItemTemplate>

<SeparatorTemplate>

<table width="400" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="400" background="image/bg01.gif"></td>

</tr>

</table>

</SeparatorTemplate>

</asp:repeater></TD>

</TR>

<TR borderColor="#009900">

<TD class="style2" style="FONT-SIZE: 12px" borderColor="#009900" align="right" colSpan="2"><asp:label id="pagesinfor" runat="server" Font-Size="X-Small"></asp:label>/<asp:linkbutton id="prevpage" runat="server" Font-Size="X-Small">[上一页]</asp:linkbutton>&nbsp;&nbsp;

<asp:linkbutton id="nextpage" runat="server" Font-Size="X-Small">[下一页]&nbsp;&nbsp;</asp:linkbutton>跳转至第 <asp:dropdownlist id="pageslist" runat="server" AutoPostBack="True"></asp:dropdownlist>页&nbsp;&nbsp;

</TD>

</TBODY>

</TABLE>

在上面的一段HTML标记布局中,我们已经对Repeater控件做了详细的设置。我们利用Panel控件对其显示与隐藏进行控制。默认情况下“签写留言”功能模块是不可见的,即Panel控件(id="write")的Visible属性为”False”,只有单击“我要说两句”后才能显示。下面来看具体的HTML布局代码如下:

<asp:panel id="write"

runat="server" Visible="False" Width="208px">

<TABLE style="FONT-SIZE: 12px; WIDTH: 384px" cellSpacing="0" cellPadding="0" width="384" border="1">

<TR>

<TD style="WIDTH: 59px">&nbsp;<FONT face="宋体">昵称</FONT></TD>

<TD style="WIDTH: 214px">&nbsp;

<asp:TextBox id="name" runat="server"></asp:TextBox></TD>

<TD rowSpan="3">&nbsp;

<asp:Image id="Image1" runat="server" Width="96px" Height="80px"></asp:Image></TD>

</TR>

<TR>

<TD style="WIDTH: 59px">&nbsp;<FONT face="宋体">选择头像</FONT></TD>

<TD style="WIDTH: 214px">&nbsp;

<asp:DropDownList id="DropDownList1" runat="server" AutoPostBack="True">

<asp:ListItem Value="image/face/001.gif">帅哥-001</asp:ListItem>

<asp:ListItem Value="image/face/002.gif">帅哥-002</asp:ListItem>

<asp:ListItem Value="image/face/003.gif">帅哥-003</asp:ListItem>

<asp:ListItem Value="image/face/004.gif">帅哥-004</asp:ListItem>

<asp:ListItem Value="image/face/005.gif">帅哥-005</asp:ListItem>

<asp:ListItem Value="image/face/006.gif">帅哥-006</asp:ListItem>

<asp:ListItem Value="image/face/007.gif">美女-007</asp:ListItem>

<asp:ListItem Value="image/face/009.gif">美女-008</asp:ListItem>

<asp:ListItem Value="image/face/009.gif">美女-009</asp:ListItem>

<asp:ListItem Value="image/face/010.gif">美女-010</asp:ListItem>

<asp:ListItem Value="image/face/011.gif">美女-011</asp:ListItem>

<asp:ListItem Value="image/face/012.gif">美女-012</asp:ListItem>

</asp:DropDownList></TD>

</TR>

<TR>

<TD style="WIDTH: 59px">&nbsp;<FONT face="宋体">电邮</FONT></TD>

<TD style="WIDTH: 214px">&nbsp;

<asp:TextBox id="email" runat="server"></asp:TextBox></TD>

</TR>

<TR>

<TD style="WIDTH: 59px">&nbsp;<FONT face="宋体">留言内容</FONT></TD>

<TD style="WIDTH: 214px">&nbsp;

<asp:TextBox id="message" runat="server" Width="192px" Height="92px" TextMode="MultiLine"></asp:TextBox></TD>

<TD>&nbsp;</TD>

</TR>

<TR>

<TD style="WIDTH: 59px">&nbsp;</TD>

<TD style="WIDTH: 214px">&nbsp;

<asp:Button id="Button2" runat="server" Width="96px" Text="写好啦"></asp:Button></TD>

<TD>&nbsp;</TD>

</TR>

</TABLE>

</asp:panel>

最后是“留言管理”功能,包括留言的“回复”和“删除”。“留言管理”首先要有权限管理,有了管理员的权限后才能进行留言管理。所以必须要有管理员登录窗口,我们利用Panel控件(ID=”login”)进行控制它的显示于隐藏,默认是隐藏。具体HTML代码如下:

<asp:panel id="login" runat="server"

Visible="False" Width="336px" Height="32px"

BackColor="Moccasin">请输入管理员密码:

<asp:TextBox id="adminpwd" runat="server" Width="96px"> </asp:TextBox>

<asp:Button id="Button1" runat="server" Text="确认密码"> </asp:Button>

</asp:panel>

当有了系统管理员权限后,就可以进行管理了,在“留言浏览”功能里面我们已经集成了“回复”和“删除”的链接,只要我们在后台逻辑代码中稍加编码就可以实现“回复”和“删除”的功能。这里我们只剩“回复”功能没有完成。我们来看回复功能的实现。

我们仍是利用Panel控件来控制该功能模块的显示和隐藏,系统默认的是不可见的。具体HTML布局编码如下:

<asp:panel id="reply" runat="server" Visible="False" Width="168px" Height="48px">

<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">

<TR>

[1] [2] [3] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有