一、asp:Repeater <div class="bd"> <ul> <asp:Repeater ID="rept_slide" runat="server"> <ItemTemplate> <li><a href='<%#Eval("LinkUrl").ToString() %>' targe
一、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; }View Code
三、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>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>
