ASP.NET Web开发中Repeater控件的使用

在ASP.NET中数据绑定是其提供的访问数据库的方法，数据控件则是用来显示从数据库中获取的数据。

首先讲下待会要用到的属性和方法：
DataBind():显示绑定的数据
DataSource:指定数据绑定控件的数据来源

对于常用的数据绑定控件大致有以下：
DropDownList : 下拉绑定控件，类似html中的下拉框
Repater: 数据绑定容器控件，用于生成各个子项的列表，其子项显示方式可以完全有编程者自己编写
GridView:以表格的形式进行数据显示，自带分页，支持删除，修改，排序，分页，外观设置和自定义显示数据
DetailsView:类似于Gridview,但每次只显示数据源的单条记录
DataList:类似于Repeater控件，用于显示限制于该控件的项目的重复列表。不过DataList控件会默认在数据项目上添加表格，具有内置样式设置
ListView:按照编程者编写的模板格式显示数据，提供了增删改，排序，分页等功能，支持用户自定义模板
FormView:与DetailsView控件相似，FormView控件仅可显示数据源中的单条记录

不多说直接上代码：
下面展示 Repeater控件的使用方法。由于我弄的是母版页，所以只显示关键代码，避免繁乱。

// 在web窗体的.aspx页面中的代码
 <style>
        .top_btnExit {
            height: 25px;
            width: 60px;
            padding: 0 2px;
            text-align: center;
            border-radius: 2px;
            background-color: #1aab8a;
            color: #fff;
            border: none;
            outline: none;
            font-size: 14px;
            cursor: pointer;
            position: relative;
            transition: all ease 800ms;
        }

            .top_btnExit:hover {
                background-color: #dedede;
                color: #1aab8a;
            }

            .top_btnExit:before, .top_btnExit:after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 0;
                height: 2px;
                background-color: #1aab8a;
                transition: all ease 400ms;
            }

            .top_btnExit:after {
                top: inherit;
                right: inherit;
                left: 0;
                bottom: 0;
            }

            .top_btnExit:hover:after, .top_btnExit:hover:before {
                width: 100%;
                transition: all ease 800ms;
            }

        .aspnetpager {
            color: #999;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            border: 1px solid #1aab8a; border-radius: 5px;
        }

            .aspnetpager a, .aspnetpager .cpb {
                text-decoration: none;
                padding: 0 5px;
                border: 1px solid #ddd;
                background: #ffff;
                margin: 0 2px;
                font-size: 12px;
                color: #000;
                height: 20px;
                line-height: 20px;
            }

                .aspnetpager a:hover {
                    background-color: #E61636;
                    color: #fff;
                    border: 1px solid #E61636;
                    text-decoration: none;
                    height: 20px;
                    line-height: 20px;
                }

            .aspnetpager .cpb {
                font-weight: bold;
                color: #fff;
                background: #E61636;
                border: 1px solid #E61636;
            }
   </style>
<div style="width: 900px; height: 45px">
        <p style="height: 45px; line-height: 45px; text-align: center; background-color: #1aab8a; color: white; font-size: 18px;">
            商品列表
        </p>
    </div>
    <div>
        <table style="width: 95%; height: auto; margin: 0px auto; text-align: center; border: 1px solid #BABABA;">
            <tr style="background-color: #BABABA; height: 40px; line-height: 40px;">
                <th>商品ID</th>
                <th>商品名</th>
                <th>商品图片</th>
                <th>类型ID</th>
                <th>商品价格</th>
                <th>实际库存</th>
                <th>总库存</th>
                <th>操作</th>
            </tr>

            <asp:Repeater ID="RpListInfo" runat="server">
                <ItemTemplate>
                    <tr style="background-color: #dedede; height: 35px; line-height: 35px;">
                        <td><%# Eval("goodsID") %></td>//绑定字段
                        <td><%# Eval("goodsName") %></td>
                        <td>
                            <img src="Images/2011/<%# Eval("goodsPic") %> " style="position:relative;top:5px; height:35px;width:50px;"/>
                         </td>
                        <td><%# Eval("goodsKindsID") %></td>
                        <td><%# Eval("goodsMoney") %></td>
                        <td><%# Eval("goodsRealStock") %></td>
                        <td><%# Eval("goodsVirInventory") %></td>
                        <td>
                            <asp:LinkButton ID="lkBtnDel" CssClass="top_btnExit" CommandName="btnToDel" CommandArgument='<%# Eval("goodsID") %>' runat="server">删除</asp:LinkButton>//这里是一个删除按钮
                        </td>                  
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
         <div style=" position: absolute; left: 250px; width: 400px; height: 30px; line-height: 30px; top: 450px; text-align: center;">
            <webdiyer:AspNetPager ID="AspNetPager1" CurrentPageButtonClass="cpb" CssClass="aspnetpager" runat="server" OnPageChanging="AspNetPager1_PreRender" FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" PagingButtonLayoutType="Span" OnPreRender="AspNetPager1_PreRender">
            </webdiyer:AspNetPager>
        </div>
    		</div>

后台.cs代码：

  public partial class goodsList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SelectgoodsPageBind();//在页面首次加载时显示数据
            }
        }
        public void SelectgoodsPageBind()/*由于多次用到数据的展示，故定义了方法，如果没用分页可以直接在加载事件写 RpListInfo.DataSource=BLL.方法名（参数）；RpListInfo.DataBind();*/
        {
            //设置每页显示数据数量
            this.AspNetPager1.PageSize = 6;
            //设置数据的总数
            this.AspNetPager1.RecordCount = GoodsManger.SelectGoodsTotalCount();
            //调用BLL层中的查询方法并将记录存在dt中
            DataTable dt = GoodsManger.SelectGoodsInfoByPage(this.AspNetPager1.PageSize, this.AspNetPager1.CurrentPageIndex);
            RpListInfo.DataSource = dt;//设置数据源
            RpListInfo.DataBind();//数据绑定


        }

        protected void AspNetPager1_PreRender(object sender, EventArgs e)
        {
            SelectgoodsPageBind();
        }
    }

关于按钮样式可以参照：点击查看按钮样式原作者代码
附上效果图：
由于我设置了分页功能，可能看起来有点繁琐。其实使用方式就两个步骤：
前台页面：设置Repeater的模板格式，再通过<%# Eval(“数据库中的字段名”)%>
后台在加载事件中：先用DataSource属性设置数据源，在用DataBind()方法绑定到控件就可以了。

ps：Repeater控件分页的实现我会单独出一个博客，要用到AspNetPager控件，这个要到网上下载一个AspNetPager.dll文件
在vs2019中工具箱中好像是没这个控件。

知识有限，如文章有任何学术问题，欢迎指出，我再修改！