·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> asp.net中Repeater控件用法笔记

【如有意向点此提交需求】关于我们

asp.net中Repeater控件用法笔记

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

asp.net中Repeater控件用法笔记

大家可能都对datagrid比较熟悉，但是如果在数据量大的时候，我们就得考虑使用 repeater作为我们的数据绑定控件了。Repeater控件与DataGrid (以及DataList)控件的主要区别是在于如何处理HTML。ASP.NET建立HTML代码以显示DataGrid控件，但Repeater允许开发人员决定如何显示数据。所以，你可以选择将数据显示在一个HTML表格中或者一个顺序列表中。这主要取决于你的选择，但你必须将正确的HTML插入到 ASP.NET页面中。 模板与DataList一样，Repeater控件只支持模板。以下的模板可供选择： AlternatingItemTemplate: 指定如何显示每一其它选项。 ItemTemplate: 指定如何显示选项。(AlternatingItemTemplate可以覆盖这一模板。) HeaderTemplate: 建立如何显示标题。 FooterTemplate: 建立如何显示页脚。 SeparatorTemplate: 指定如何显示不同选项之间的分隔符。 你可以使用这些模板来显示你希望的数据。唯一具有强制性的模板是ItemTemplate，所有其它的模板都是具有选择性的。 对于处理一个数据源，Repeater控件具有与DataGrid与DataList相同的属性： DataMember：获得或者设置与 Repeater 控件绑定的相应DataSource属性的表格。 DataSource：获得或者设置为 Repeater 显示提供数据的数据源。 除此之外，还有一个Items属性，你可以通过这一属性编程访问Repeater数据中单一选项。它返回一个RepeaterItemCollection对象，为一组RepeaterItem对象的集合，代表 Repeater 数据的每一行。 ASP.NET Web数据控件还有其它一个共性：它们都使用DataBind方法来生成用户界面。调用这一方法可以返回并显示数据(假设DataSource和 DataMember属性设置正确)。在查看DataBind方法之前，我们先看看如何在一个Web页面中使用一个Repeater控件。 使用Repeater控件 使用Repeater控件的第一步骤是决定我们将要使用的数据源和字段。例如，我们将要使用SQL Server Northwind数据库中的Employees列表。Web页面将显示职工的完整名字，地址，以及电话号码。HTML将使用DIV标记，用 Repeater 模板来分隔内容。下面是 Web 页面的 HTML 内容：

前台代码

代码如下复制代码

<asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate><table cellpadding="0" cellspacing="0" border="1" align="center" class="auto-style1"> <tr align="left"> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>零花</th> </tr> </HeaderTemplate> <ItemTemplate> <tr > <td><%#Eval("id")%></td> <td><%#Eval("name")%></td> <td><%#Eval("age")%></td> <td><%#Eval("classid")%></td> <td><%#Eval("salary")%></td> </tr> </ItemTemplate> <FooterTemplate></table></FooterTemplate> </asp:Repeater>

后台代码

代码如下复制代码
string sql = string.Format("select * from person"); DataTable dt = sqlhelper.helper.ExecuteQuery(sql); Repeater1.DataSource = dt; Repeater1.DataBind();

AspNetpager的使用方法：

首先注册<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPRefix="webdiyer" %>

前台：

代码如下复制代码
<webdiyer:AspNetPager ID="AspNetPager1" runat="server" CustomInfoHTML="第%CurrentPageIndex%页，共%PageCount%页，每页%PageSize%条" FirstPageText="首页" LastPageText="尾页" LayoutType="Table" NextPageText="下一页" onpagechanging="AspNetPager1_PageChanging" PageIndexBoxType="DropDownList" PagingButtonLayoutType="Span" PrevPageText="上一页" ShowCustomInfoSection="Left" ShowPageIndexBox="Always" SubmitButtonText="Go" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到" Width="450px" PageSize="3"> </webdiyer:AspNetPager>

后台：

代码如下复制代码
private void AddPages(Repeater rpt,Wuqi.Webdiyer.AspNetPager anp,DataTable dt) { PagedDataSource pds = new PagedDataSource(); pds.AllowPaging = true; pds.DataSource = dt.DefaultView; anp.RecordCount = dt.Rows.Count;//给分页控件指定当前总数 pds.PageSize = anp.PageSize;//确定分页，每页有n项 pds.CurrentPageIndex = anp.CurrentPageIndex - 1;//确定当前页数 rpt.DataSource = pds;//绑定数据源 rpt.DataBind(); } protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e) { AspNetPager1.CurrentPageIndex = e.NewPageIndex; BindPersonData(); }

例子

repeater控件动态添加、删除一行

代码如下复制代码

<script type="text/javascript"> var txtEquipmentIdsIDArray = new Array(); function OpenWindow(clientId, TypeId, ReqNum) { var url = "../EquipmentIssue/EquipmentRequestIssue.aspx?TypeId=" + TypeId + "&ReqNum=" + ReqNum; var widths = 600; var heigths = 450; var winPar = window.showModalDialog(url, window, 'dialogWidth=' + widths + 'px;dialogHeight=' + heigths + 'px;status=no;center=yes;scroll=no;help:No;'); if (winPar != undefined) { var txtEquipmentIds = document.getElementById(clientId); txtEquipmentIds.value = winPar;

// //审批用户控件中保存发放的EquipmentId// var IsExistEquipmentIdsID = false;// for (var i = 0; i < txtEquipmentIdsIDArray.length; i++) {// if (txtEquipmentIdsIDArray[i] == clientId) {// IsExistEquipmentIdsID = true;// }// }// if (IsExistEquipmentIdsID == false) {// txtEquipmentIdsIDArray.push(clientId);// }// var tempEquipmentId = "";// for (var i = 0; i < txtEquipmentIdsIDArray.length; i++) {// tempEquipmentId = tempEquipmentId + document.getElementById(txtEquipmentIdsIDArray[i]).value;// var hiddenEquipmentIds = document.getElementById("UC_ApprovalAction1_hfEquipmentIds");// hiddenEquipmentIds.value = tempEquipmentId;// }// //alert(hiddenEquipmentIds.value); }

var tempReturnValue = ""; var tb_Request = document.getElementById("tb_Request"); var tr = tb_Request.getElementsByTagName("tr"); for (var i = 0; i < tr.length; i++) { if (tr[i].id != "") { var span_EquRequestItemId = tr[i].getElementsByTagName("span"); //获取申请明细的IDEquRequestItemId var select_ddlStation; //获取使用工位StationId var option = tr[i].getElementsByTagName("select")[1].getElementsByTagName("option"); for (var j = 0; j < option.length; j++) { if (option[j].selected) { select_ddlStation = option[j] } } var textarea_EquipmentIds = tr[i].getElementsByTagName("textarea"); //获取发放的资产号EquipmentNo tempReturnValue = tempReturnValue + span_EquRequestItemId[0].innerText + ":" + select_ddlStation.value + ":" + textarea_EquipmentIds[0].innerText + "|"; } } var hiddenEquipmentIds = document.getElementById("UC_ApprovalAction1_hfEquipmentIds"); hiddenEquipmentIds.value = tempReturnValue; //alert(hiddenEquipmentIds.value); } </script>

Repeater:

代码如下复制代码

<div id="div_Repeater"> <asp:HiddenField ID="hfRptColumns" runat="server" Value="G