webform网站相关数据控件和其他

一、asp:Repeater

<div class="bd">
<ul>
<asp:Repeater ID="rept_slide" runat="server">
<ItemTemplate>
<li><a href='<%#Eval("LinkUrl").ToString() %>' target="_blank" style="background: url(images/<%#Eval("ImgUrl").ToString() %>) center 0 no-repeat;" ></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>

Repeater 控件用于显示重复的项目列表

后台绑定数据：

DataTable dt = tbSlideFill();
this.rept_slide.DataSource = dt.DefaultView;
this.rept_slide.DataBind();

二、asp:Literal

向页面动态添加内容

<asp:Literal ID="lit_page" runat="server"></asp:Literal>

this.lit_page.Text = Common.PageNums.GetPageNum(ds, rept_new, 2, "About.aspx?id=52", "Pager_blue");  //输出分页

<asp:DataList ID="DataInfo" runat="server" OnItemCommand="DataInfo_ItemCommand" DataKeyField="InfoId">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0" border="1" width="900" class="tablecss">
<tr>
<td width="50" align="center">序号</td>
<td width="30" align="center">选择</td>
<td width="500" align="ceter">标题</td>
<td width="50" style="text-align:center;">排序号</td>
<td style="text-align:center;">操作</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="1" width="900" class="tablecss2">
<tr>
<td width="50" align="center"><%#(Container.ItemIndex+1).ToString() %></td>
<td width="30" align="center"><asp:CheckBox ID="CheckBox1" runat="server" /></td>
<td width="500" align="center"><%#DataBinder.Eval(Container.DataItem,"Title") %></td>
<td width="50" align="center"><asp:TextBox ID="txsort" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Sort") %>' Columns="2"></asp:TextBox></td>
<td style="text-align:center;">
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false" CommandName="edit" Text="修改"></asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" CausesValidation="false" CommandName="Delete" Text="删除" OnClientClick="return confirm('确认要删除吗?')"></asp:LinkButton>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>

View Code

this.DataInfo.DataSource = objpbs;
this.DataInfo.DataBind();

四、分页

1、先引用AspNetPager.dll

2、在页面上加上一句：<%@ Register TagPrefix="Webdiyer" Namespace="Wuqi.Webdiyer" Assembly="aspnetpager" %>

3、

<Webdiyer:AspNetPager runat="server" ID="pager" AlwaysShow="true" HorizontalAlign="Left" ShowInputBox="Always"
ShowPageIndex="false" FirstPageText="首页" LastPageText="末页" PrevPageText="上页" NextPageText="下页"
Width="100%" ShowCustomInfoSection="Left" TextBeforeInputBox="转到转到第 " TextAfterInputBox=" 页 "
PageSize="15" OnPageChanged="pager_PageChanged"/>

4、后台绑定数据

DataTable dt=tbInfoFill();
pager.RecordCount = dt.Rows.Count;
PagedDataSource objpbs = new PagedDataSource();
objpbs.DataSource = dt.DefaultView;
objpbs.AllowPaging = true;
objpbs.PageSize = pager.PageSize;
objpbs.CurrentPageIndex = pager.CurrentPageIndex - 1;

五、其他

1、幻灯片展示

a、引入js文件：<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>

b、

<div class="banner">
<div class="bd">
<ul>
<asp:Repeater ID="rept_slide" runat="server">
<ItemTemplate>
<li><a href='<%#Eval("LinkUrl").ToString() %>' target="_blank" style="background: url(images/<%#Eval("ImgUrl").ToString() %>) center 0 no-repeat;" ></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>

</div>
<script type="text/javascript">
jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true });
</script>

2、marquee
a、创建一个滚动的文本字幕

<marquee  direction="up" behavior="scroll" scrollamount="5"  onMouseOut="this.start()" onMouseOver="this.stop()" >
<span class="fl"><a href='NewInfo.aspx?id=<%#Eval("InfoId").ToString() %>'><%#Eval("Title").ToString() %></a></span>
<span class="time fr"><%#Eval("AppDate","{0:yyyy-MM-dd}").ToString() %></span>
</marquee>

direction:表示滚动的方向
behavior:表示滚动的方式

scrollamount:表示文字滚动的速度

onMouseOut:表示当鼠标移上去滚动停止

onMouseOver:表示当鼠标移开滚动开始

b、用js来实现

<script type="text/javascript">
var speed = 80
function Marquee() {
demo.scrollTop++;
if (demo.scrollTop > "27")
{
demo.scrollTop = "0";
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>