Repeater 控件

Repeater 控件是一個容器控件，可用於從網頁的任何可用數據中創建自定義列表。Repeater 控件沒有自己內置的呈現功能，這意味着用戶必須通過創建模板來提供 Repeater 控件的布局。當網頁運行時，Repeater 控件會循環通過數據源中的記錄，並為每個記錄呈現一個項。

1.向網頁中添加Repeater 控件

      將 Repeater 控件從“工具箱”任務窗格拖放到網頁上。

2.為 Repeater 控件創建模板

　　在“代碼”視圖中，將插入點放置在 <asp:Repeater></asp:Repeater> 標記內。

　　 Repeater 控件支持的 Repeater 模板:

　　HeaderTemplate 和 FooterTemplate： 包含分別呈現在列表的開始和結束處的文本和控件。

　　ItemTemplate： 包含要逐一呈現給數據源中的每個數據項的 HTML 元素和控件。

　　AlternatingItemTemplate： 交互顯示給數據源中的其他每個數據項的 HTML 元素和控件。通常，可以使用此模板來為替代項創建不同的外觀，例如指定一種不同於 　　　　　　　　　　　　　　　　　ItemTemplate 中所指定顏色的背景色。

　　SeparatorTemplate：一般情況下很少用到 包含呈現在每項之間的元素。典型的示例可能是一條直線（使用 HR 元素）。

3.綁定數據與簡單操作

　　在后台中代碼綁定

 Repeater1.DataSource = new userData().select();//數據源指向Repeater1.DataBind();//數據綁定 

    界面中顯示內容綁定顯示數據用<%#Eval("字段名稱") %>，一個簡單人員管理系統為例，進行簡單操作,界面代碼：

<asp:Repeater ID="Repeater1" runat="server">　　　　<%--插入Repester控件--%>
            <HeaderTemplate>　　　　　　　　　　　　　　<%--列頭顯示--%>
                <table id="tb">
                    <tr id="tr_head">
                        <td>用戶名</td>
                        <td>密碼</td>
                        <td>昵稱</td>
                        <td>性別</td>
                        <td>年齡</td>
                        <td>生日</td>
                        <td>民族</td>
                        <td>操作</td> 　　　　　　　　　　　　　　　　<%--插入一個操作列--%>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>　　　　　　　　　　　　　　　　　　　　　　　　<%--循環展示數據--%>
                <tr class="tr_item" style="<%#Eval("Red") %>"> <%--擴展一個Red屬性，可用於樣式表中，作一個預警--%>
                    <td><%#Eval("Username") %></td>
                    <td><%#Eval("Pword") %></td>
                    <td><%#Eval("Nickname") %></td>
                    <td><%#Eval("Sexstr") %></td>
                    <td><%#Eval("Age") %></td>
                    <td><%#Eval("Birstr") %></td>
                    <td><%#Eval("NationName") %></td>
                    <td>
                        <a onclick="return del();" href="Delte.aspx?id=<%#Eval("Username") %>" >刪除</a> &nbsp
                        <a href="updata.aspx?upid=<%#Eval("Username") %>" target="_blank" >修改</a>  <%--刪除與修改操作--%>
                    </td>
                </tr>
            </ItemTemplate>            
            <FooterTemplate></table></FooterTemplate>      　　　　《%-- 列尾顯示--%>      
        </asp:Repeater>

1.通過屬性拓展來做一個預警 比如年齡小於20的列顯示為紅色，就在實體類中拓展一個熟悉，用做樣式表中：拓展屬性

public int Age  //計算年齡
    {
        get { return DateTime.Now.Year - _Birthday.Year; }
    }
    public string Red
    {
        get {
            if (Age < 20)//年齡小於20
            {
                return "background-color: red;"; //樣式表的樣式
            }
            else //如果不是年齡小於20返回一個空的字符創
            {
                return "";
            }
        }
    }

  2.在js端實現一個光棒效果，代碼如下  ：

<script type="text/javascript"> 
                var item = document.getElementsByClassName("tr_item");
                for (var v = 0; v < item.length;v++)
                {
                    var ordcolor = "";//定義一個鼠標指向前的顏色                
                    item[v].onmouseover = function ()//鼠標移入顏色變為黃色
                    {
                        ordcolor=this.style.backgroundColor;//記錄改變之前的顏色
                        this.style.backgroundColor = "yellow";
                    };
                    item[v].onmouseout = function ()//鼠標移出顏色變為原來的顏色
                    {
                        this.style.backgroundColor = ordcolor;
                    };
                }
                 </script>    

3.簡單的刪除與修改操作，用QueryString - 地址欄數據拼接傳主鍵值 格式為?key=value

刪除操作：創建一個刪除的頁面，只需要執行后台代碼

    //將要刪除的主鍵值去出來
        string uname = Request["id"];
        //執行刪除方法
        new userData().delete(uname);
        //刷新跳轉頁面
        Response.Redirect("Default.aspx");    
    //為防止用戶誤操作 可在js端先進行判斷確定刪除以后在執行 js端del()方法
<script type="text/javascript">
    function del() {
        var ok = confirm("是否確定要刪除？");
        if (ok == false) {
            return false;
        }
    }   
</script>

 修改操作：添加一個屬性target="_blank" 在新頁面打開，將主鍵值傳到修改頁面查出數據綁定到修改頁面這里綁定數據要寫在if (!IsPostBack)里面，在進行修改操作