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"); //输出分页
/// /// DataSet实例 /// /// DataList名称 /// /// 分页大小 /// ///动态分页 public static string GetPageNum(DataSet ds, Repeater datalistname, int pagesize, string lurl, string classStr) { string pagestr = ""; if (ds != null && ds.Tables[0].Rows.Count > 0) { PagedDataSource objPds = new PagedDataSource(); objPds.DataSource = ds.Tables[0].DefaultView; objPds.AllowPaging = true; int total = ds.Tables[0].Rows.Count; objPds.PageSize = pagesize; int page; if (HttpContext.Current.Request.QueryString["page"] != null) page = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"]); else page = 1; objPds.CurrentPageIndex = page - 1; datalistname.DataSource = objPds; datalistname.DataBind(); int allpage = 0; int next = 0; int pre = 0; int startcount = 0; int endcount = 0; if (page < 1) { page = 1; } //计算总页数 if (pagesize != 0) { allpage = (total / pagesize); allpage = ((total % pagesize) != 0 ? allpage + 1 : allpage); allpage = (allpage == 0 ? 1 : allpage); } next = page + 1; pre = page - 1; startcount = (page + 5) > allpage ? allpage - 7 : page - 4;//中间页起始序号 endcount = page < 5 ? 8 : page + 5;//中间页终止序号 if (startcount < 1) { startcount = 1; } //为了避免输出的时候产生负数，设置如果小于1就从序号1开始 if (allpage < endcount) { endcount = allpage; } //页码+5的可能性就会产生最终输出序号大于总页码，那么就要将其控制在页码数之内 pagestr = "<div class='" + classStr + "'>"; pagestr += page > 1 ? "<a href='" + lurl + "&page=1' class=\"homePage\">首页</a><a href='" + lurl + "&page=" + pre + "' class=\"prevPage\">上一页</a>" : "<a href='" + lurl + "&page=1' class=\"homePage\">首页</a>"; for (int i = startcount; i <= endcount; i++) { pagestr += page == i ? "<a href=\"javascript:;\" class=\"on\">" + i + "</a>" : " " + "<a href='" + lurl + "&page=" + i + "'>" + i + "</a>" + " "; } pagestr += page != allpage ? "<a href='" + lurl + "&page=" + next + "' class=\"nextPage\">下一页</a><a href='" + lurl + "&page=" + allpage + "' class=\"endPage\">末页</a>" : "<a href=\"javascript:;\" class=\"endPage\">末页</a>"; pagestr += "</div>"; } else { pagestr = "暂无数据"; } return pagestr; }
三、asp:DataList
DataList 控件，类似于 Repeater 控件，用于显示绑定在该控件上的项目的重复列表。不过，DataList 控件会默认地在数据项目上添加表格。
<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>
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>
