數據綁定控件之Repeater

時間  2019-11-17
標籤 數據 綁定 控件 repeater 简体版
原文   原文鏈接

引言

        前幾篇的文章在說AJAX的內容，利用AJAX技術可以開發出高效運行的網站應用程序，不過在進行B/S項目開發時只擁有AJAX技術是遠遠不夠的，踏入到B/S要學的東西會更多，但相較C/S的複雜邏輯結構來講B/S在開發時仍是很簡單的。javascript

        在開發B/S項目時，經常會用到數據綁定控件，.NET平臺已經對這些控件進行了良好的封裝，只要稍有經驗的程序猿很快就可以上手使用這些數據控件，因此接下來的幾篇文章將會討論數據控件，首先將會從數據控件的細節入手討論ListView、GridView、Repeater、DataList控件的基本使用方法，並在會後系列文章的最後對這幾個控件進行綜合性的分析總結。css

1、綁定控件之Repeater

        .NET封裝了多種數據綁定控件，諸如GridView、DataList等但該篇文章將會從Repeater入手，由於Repeater只提供了基本的數據綁定模板，沒有內置其它分頁等功能，因此它是最原始的數據綁定控件，只要可以熟練運用Repeater控件其它的綁定控件也就很簡單了。html

  一、Repeater簡介

 

        Repeater 控件是基本模板化數據列表。 它不像GridView控件同樣可以可視化的設計格式或樣式，所以開發時在控件模板中必須顯式聲明全部格式、格式和樣式標記。另外Repeater控件沒有內置選擇、排序、編輯、分頁等功能，它只提供了基本的數據綁定，可是它爲開發人員提供了ItemCommand 事件，該事件支持在控件中收發命令。         想要綁定數據，模板是必不可少的，Repeater控件一樣支持數據模板，並且還能夠在模板中添加想要的標籤，它主要用法以下圖：java

           Note：每一個 Repeater 控件必須定義 ItemTemplate。sql

2、控件使用技巧

 

      上文講解了Repeater基本的使用方法及它的一些基本特性，接下來作幾個經典的示例來運用Repeater控件。數據庫

 

一、數據綁定之刪除、編輯

 

      該示例將會使用Asp.net的前臺和後臺結合來實現顯示數據，並可以編輯和刪除數據。學習

      刪除頁面：
     編輯頁面：
       前臺代碼：在單擊編輯按鈕後將會進入編輯頁面，頁面是由兩個Panel控件來控制，經過傳遞ID號的方式判斷顯示的是編輯頁面仍是刪除頁面，另外前臺代碼經過設置控件的CommandArgument屬性來傳遞後臺所須要判斷的id號。網站

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="userRepeat" runat="server" OnItemCommand="userRepeat_ItemCommand" OnItemDataBound="userRepeat_ItemDataBound">
            <HeaderTemplate>
                <table border="1" style="width:1000px;text-align:center;border-collapse:collapse;">
                    <thead style="background-color:red;">
                        <tr>
                            <th>ID</th>
                            <th>內容</th>
                            <th>操做</th>
                        </tr>
                    </thead>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Panel ID="plItem" runat="server">
                    <tr>
                        <td><asp:Label runat="server" ID="lblID" Text='<%#Eval("id") %>'></asp:Label></td>
                        <td><%#Eval("name") %></td>
                        <td>
                            <asp:LinkButton ID="lbtEdit" CommandName="Edit" CommandArgument='<%#Eval("id") %>' runat="server">編輯</asp:LinkButton>
                            <asp:LinkButton ID="lbtDelete" CommandName="Delete" CommandArgument='<%#Eval("id") %>' runat="server">刪除</asp:LinkButton>
                        </td>
                    </tr>
                </asp:Panel>
                <asp:Panel ID="plEdit" runat="server">
                    <tr>
                        <td><asp:Label runat="server" ID="Label1" Text='<%#Eval("id") %>'></asp:Label></td>
                        <td><asp:TextBox ID="txtName" runat="server" Text='<%#Eval("name") %>'></asp:TextBox></td>
                        <td>
                            <asp:LinkButton ID="lbtCancel" CommandName="Cancel" CommandArgument='<%#Eval("id") %>' runat="server">取消</asp:LinkButton>
                            <asp:LinkButton ID="lbtUpdate" CommandName="Update" CommandArgument='<%#Eval("id") %>' runat="server">更新</asp:LinkButton>
                        </td>
                    </tr>
                </asp:Panel>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>

      後臺代碼：在後臺代碼中很重要的兩個事件是ItemCommand和ItemDataBound，其中ItemCommand負責接收前臺傳進來的按鈕命令，根據命令的參數來設置後臺傳遞的id，並在ItemDataBound中來驗證id判斷切換顯示Panel。ui

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class EditPage : System.Web.UI.Page
    {
        private int id = 0; //保存指定行操做所在的ID號
        /// <summary>
        /// 窗體加載時綁定數據
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.DataBindToRepeater();//將數據綁定到Repeater控件上
            }
        }

        /// <summary>
        /// 將數據源綁定Repeater控件上
        /// </summary>
        private void DataBindToRepeater() {
            //使用using語句進行數據庫鏈接
            using (SqlConnection sqlCon=new SqlConnection("server=.;database=MyBlog;uid=sa;pwd=1"))
            {
                sqlCon.Open();  //打開數據庫鏈接

                SqlCommand sqlcom = new SqlCommand();   //建立數據庫命令對象
                sqlcom.CommandText = "select * from match"; //爲命令對象指定執行語句
                sqlcom.Connection = sqlCon; //爲命令對象指定鏈接對象

                this.userRepeat.DataSource = sqlcom.ExecuteReader();    //爲Repeater對象指定數據源
                this.userRepeat.DataBind(); //綁定數據源
            }
        }

        /// <summary>
        /// Repeater控件命令事件
        /// </summary>
        /// <param name="source"></param>
        /// <param name="e"></param>
        protected void userRepeat_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            //獲取命令文本，判斷髮出的命令爲什麼種類型，根據命令類型調用事件
            if (e.CommandName=="Edit")  //編輯命令
            {
                id = int.Parse(e.CommandArgument.ToString());   //獲取命令ID號
            }
            else if (e.CommandName=="Cancel")   //取消更新命令
            {
                id = -1;
            }
            else if(e.CommandName=="Delete")    //刪除行內容命令
            {
                id = int.Parse(e.CommandArgument.ToString());   //獲取刪除行的ID號
                //刪除選定的行，並從新指定綁定操做
                this.DeleteRepeater(id);
            }
            else if (e.CommandName == "Update") //更新行內容命令
            {
                //獲取更新行的內容和ID號
                string strText = ((TextBox)e.Item.FindControl("txtName")).Text.Trim();
                int intId=int.Parse(((Label)e.Item.FindControl("lblID")).Text);
                //更新Repeater控件的內容
                this.UpdateRepeater(strText,intId);
            }

            //從新綁定控件上的內容
            this.DataBindToRepeater();
        }

        /// <summary>
        /// 刪除行內容
        /// </summary>
        /// <param name="intId">刪除行所在內容的ID</param>
        private void DeleteRepeater(int intId) {
            using (SqlConnection sqlCon = new SqlConnection("server=.;database=MyBlog;uid=sa;pwd=1"))
            {
                sqlCon.Open();  //打開數據庫鏈接

                SqlCommand sqlcom = new SqlCommand();   //建立數據庫命令對象
                sqlcom.CommandText = "delete from match where id=@id"; //爲命令對象指定執行語句
                sqlcom.Connection = sqlCon; //爲命令對象指定鏈接對象

                //建立參數集合,並向sqlcom中添加參數集合
                SqlParameter sqlParam = new SqlParameter("@id", intId);
                sqlcom.Parameters.Add(sqlParam);

                sqlcom.ExecuteNonQuery();   //指定更新語句

            }
        }

        /// <summary>
        /// 更新Repeater控件中的內容
        /// </summary>
        /// <param name="strText">修改後的內容</param>
        /// <param name="intId">內容所在行的ID號</param>
        private void UpdateRepeater(string strText,int intId) {
            using (SqlConnection sqlCon = new SqlConnection("server=.;database=MyBlog;uid=sa;pwd=1"))
            {
                sqlCon.Open();  //打開數據庫鏈接

                SqlCommand sqlcom = new SqlCommand();   //建立數據庫命令對象
                sqlcom.CommandText = "update match set name=@str where id=@id"; //爲命令對象指定執行語句
                sqlcom.Connection = sqlCon; //爲命令對象指定鏈接對象

                //建立參數集合,並向sqlcom中添加參數集合
                SqlParameter[] sqlParam = { new SqlParameter("@str", strText), new SqlParameter("@id", intId) };
                sqlcom.Parameters.AddRange(sqlParam);

                sqlcom.ExecuteNonQuery();   //指定更新語句
                
            }
        }

        /// <summary>
        /// Repeater控件數據綁定時發生的事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void userRepeat_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            //判斷Repeater控件中的數據是不是綁定的數據源，若是是的話將會驗證是否進行了編輯操做
            //ListItemType 枚舉表示在一個列表控件能夠包括，例如 DataGrid、 DataList和 Repeater 控件的不一樣項目。 
            if (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
            {
                //獲取綁定的數據源，這裏要注意上面使用sqlReader的方法來綁定數據源，因此下面使用的DbDataRecord方法獲取的
                //若是綁定數據源是DataTable類型的使用下面的語句就會報錯.
                System.Data.Common.DbDataRecord record = (System.Data.Common.DbDataRecord)e.Item.DataItem;
                //DataTable類型的數據源驗證方式
                //System.Data.DataRowView record = (DataRowView)e.Item.DataItem;

                //判斷數據源的id是否等於如今的id，若是相等的話證實現點擊了編輯觸發了userRepeat_ItemCommand事件
                if (id == int.Parse(record["id"].ToString()))
                {
                    ((Panel)e.Item.FindControl("plItem")).Visible = false;
                    ((Panel)e.Item.FindControl("plEdit")).Visible = true;
                }
                else
                {
                    ((Panel)e.Item.FindControl("plItem")).Visible = true;
                    ((Panel)e.Item.FindControl("plEdit")).Visible = false;
                }
            }
        }
    }
}

 二、分頁--PageDataSourcethis

        前臺代碼：使用原始的html文本，並添加了一個Literal標籤，用來動態添加並指定html標籤。

        頁面截圖：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">

        .pageBar
        {
            margin-top: 10px;
        }
        .pageBar a
        {
            color: #333;
            font-size: 12px;
            margin-right: 10px;
            padding: 4px;
            border: 1px solid #ccc;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:Repeater ID="Repeater1" runat="server" >
            <HeaderTemplate>
                <table border="1" cellpadding="0" cellspacing="0" style="width:1006px;border-collapse:collapse; text-align:center;">
                    <tr>
                        <th style="background-color:red">ID</th>
                        <th style="background-color:red">內容</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td><asp:Label ID="lblId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"id") %>' ></asp:Label></td>
                    <td><%# DataBinder.Eval(Container.DataItem,"name") %></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
        
    </div>
    <div class="pageBar">
        <asp:Literal ID="ltlPageBar" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

     後臺代碼：Repeater控件的數據源是PagedDataSource對象，在頁面加載時爲該對象動態指定了分頁的屬性，並使用Literal標籤來動態指定每一個標籤跳轉頁的連接。

 

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class PageDemo : System.Web.UI.Page
    {
        private string id = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //設置當前頁的索引
                int pageIndex = 1;
                try
                {
                    //獲取當前索要跳轉頁的索引號
                    pageIndex = Convert.ToInt32(Request.QueryString["Page"]);
                    //若是是第0頁將會跳轉入第1頁
                    if (pageIndex <= 0)
                    {
                        pageIndex = 1;
                    }
                }
                catch
                {
                    pageIndex = 1;
                }

                DataTable dt = this.GetDataTable(); //獲取綁定的數據表

                PagedDataSource pds = new PagedDataSource();    //建立分頁數據源對象                
                pds.DataSource = dt.DefaultView;    //爲數據源對象設置數據源
                pds.AllowPaging = true; //對象容許分頁
                pds.PageSize = 2;   //設置對象每頁顯示的大小
                pds.CurrentPageIndex = pageIndex - 1; //設置數據源的當前頁

                //向Repeater控件上綁定分頁數據源控件
                this.Repeater1.DataSource = pds;
                this.Repeater1.DataBind();

                //使用Literal標籤來動態指定每一個標籤跳轉頁的連接
                ltlPageBar.Text = this.GetPageBar(pds);
            }
        }

        /// <summary>
        /// 獲取每一個標籤上的跳轉頁的連接地址
        /// </summary>
        /// <param name="pds">分頁數據源對象</param>
        /// <returns>分頁操做按鈕的html文本</returns>
        private string GetPageBar(PagedDataSource pds)
        {
            string pageBar = string.Empty;  //聲明頁面標籤文本
            int currentPageIndex = pds.CurrentPageIndex + 1;    //獲取當前頁索引

            //判斷首頁的連接頁面
            if (currentPageIndex == 1)  //若是該頁爲第一頁，則證實它爲首頁
            {
                pageBar += "<a href=\"javascript:void(0)\">首頁</a>";
            }
            else 
            {
                //若是不是首頁，首頁連接的地址將會爲1
                pageBar += "<a href=\"" + Request.CurrentExecutionFilePath + "?Page=1\">首頁</a>";
            }

            //判斷上一頁連接的地址
            if ((currentPageIndex - 1) < 1) //若是上一頁小於1則連接到第一頁
            {
                pageBar += "<a href=\"javascript:void(0)\">上一頁</a>";
            }
            else
            {
                //若是上一頁地址不是1將會連接到上一頁
                pageBar += "<a href=\"" + Request.CurrentExecutionFilePath + "?Page=" + (currentPageIndex - 1) + "\">上一頁</a>";
            }

            //指定下一頁的連接地址
            if ((currentPageIndex + 1) > pds.PageCount)
            {
                //若是下一頁的地址大於總頁數，將會鏈接到首頁
                pageBar += "<a href=\"javascript:void(0)\">下一頁</a>";
            }
            else
            {
                //不然的話連接到下一頁
                pageBar += "<a href=\"" + Request.CurrentExecutionFilePath + "?Page=" + (currentPageIndex + 1) + "\">下一頁</a>";
            }

            //指定末頁的連接地址
            if (currentPageIndex == pds.PageCount)
            {
                pageBar += "<a href=\"javascript:void(0)\">末頁</a>";
            }
            else
            {
                pageBar += "<a href=\"" + Request.CurrentExecutionFilePath + "?Page=" + pds.PageCount + "\">末頁</a>";
            }

            return pageBar; //返回html文本
        }

        /// <summary>
        /// 獲取數據源，從新連接數據
        /// </summary>
        /// <returns>DataTable，數據源</returns>
        private DataTable GetDataTable()
        {
            DataTable dt = new DataTable(); //建立數據庫表
            using (SqlConnection con = new SqlConnection("server=.;DataBase=MyBlog;uid=sa;pwd=1;"))
            {

                con.Open(); //打開數據庫連接

                SqlCommand sqlCom = new SqlCommand();    //聲明並建立數據庫命令集
                StringBuilder sqlStr = new StringBuilder(); //聲明sql語句
                sqlStr.Append("select * from match");   //獲取sql語句

                sqlCom.CommandText = sqlStr.ToString(); //爲sqlcommand對象指定sql語句

                sqlCom.Connection = con;    //爲sqlcommand對象指定連接對象
                SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCom);  //聲明數據庫適配器
                SqlCommandBuilder sqlBuilder = new SqlCommandBuilder(sqlDa);
                sqlDa.Fill(dt); //填充表
            }

            return dt;
        }

    }
}

        上文Demo下載地址：Repeater使用技巧。

http://files.cnblogs.com/files/netserver/Repeater.zip

結語 

         文章主要介紹了Repeater控件的基本使用方法，並經過兩個示例來更深一步的學習了Repeater控件的使用。雖然Repeater控件封裝的操做較少，但它是最基礎的數據綁定控件，另外能夠經過使用其它控件來彌補Repeater控件的不足，如能夠經過使用PagedataSource類來實現數據的分頁。文章寫到這裏並無結束，下篇文章將會着重討論ListView。

 

 http://blog.csdn.net/zhang_xinxiu/article/details/21872433

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程