西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)ASP.NET → Asp.NET實現(xiàn)具有分頁功能的自定義DataList控件

Asp.NET實現(xiàn)具有分頁功能的自定義DataList控件

相關軟件相關文章發(fā)表評論 來源:WestGarden時間:2012/10/21 21:43:22字體大。A-A+

作者:佚名點擊:87次評論:0次標簽: 分頁

  • 類型:濾鏡插件大小:3.7M語言:英文 評分:5.0
  • 標簽:
立即下載

一、控件也是類

【效果】

【操作步驟】

1、  新建網(wǎng)站W(wǎng)eb

2、  添加類CustomDataList.cs(系統(tǒng)會提示你把類建在App_Code文件夾中),代碼如下:

using System;
using System.Collections;
using System.Text.RegularExpressions;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WestGarden.Web
{
    public class CustomDataList : DataList
    {
    }
}

3、在Default.aspx中注冊并添加類CustomDataList,代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Namespace="WestGarden.Web" TagPrefix="cc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>具有分頁功能的自定義DataList控件</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc:CustomDataList ID="CustomDataList1" runat="server" RepeatColumns="2">
            <ItemTemplate>
                <table border="1">
                <tr>
                    <td><%# Eval("Number")%></td>
                </tr>
                </table>
            </ItemTemplate>
        </cc:CustomDataList>
    </div>
    </form>
</body>
</html>

4、在Default.aspx.cs中創(chuàng)建符合IList接口的表格示例數(shù)據(jù),并做為數(shù)據(jù)源與CustomDataList1綁定,代碼如下:

using System;
using System.Data;
using System.Collections;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        CustomDataList1.DataSource = CreateDataSource();
        CustomDataList1.DataBind();
    }
    //創(chuàng)建符合IList接口的表格示例數(shù)據(jù)
    IList CreateDataSource()
    {
        DataTable dt = new DataTable();
        DataRow dr;
        dt.Columns.Add(new DataColumn("Number", typeof(Int32)));
        for (int i = 0; i <10; i++)
        {
            dr = dt.NewRow();
            dr["Number"] = i;
            dt.Rows.Add(dr);
        }
        DataView dv = new DataView(dt);
        return dv;
    }
}

5、在瀏覽器中查看運行結果如效果圖示。

【說明】

1、很多時候,怎么說都說不清楚的事情,做出來,什么都不說,大家也就都明白了。在這里,大家可以清清楚楚地看到,所謂的控件,完完全全地是個類。所謂的類,其實就是具有一定功能,可以進行某類操作的程序塊,這個程序塊可以有變量、屬性、可以有函數(shù)、代碼,當然也可以有窗體、界面。

2、為了演示方便,我們沒有從數(shù)據(jù)庫中讀取數(shù)據(jù),而是做了一個函數(shù),動態(tài)創(chuàng)建一個具有Ilist接口的簡單的表格數(shù)據(jù)。

3、DataList的模板和Repeater差不多,還是手工做,方便一些。和Repeater相比,主要多了一個RepeatColumns屬性,在電子商務系統(tǒng)中,用來展示商品列表比較方便,但默認沒有分頁功能,可以通過本例,自定義實現(xiàn)。

二、呈現(xiàn)

【效果】

【操作步驟】

1、CustomDataList.cs中改寫基類的Render()函數(shù)來實現(xiàn),完整代碼如下:

using System;
using System.Collections;
using System.Text.RegularExpressions;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WestGarden.Web
{
    public class CustomDataList : DataList
    {
        protected const string HTML1 = "<table border=1><tr><td colspan=2>";
        protected const string HTML2 = "</td></tr><tr><td class=paging align=left>";
        protected const string HTML3 = "</td><td align=right class=paging>";
        protected const string HTML4 = "</td></tr></table>";
        private static readonly Regex RX = new Regex(@"^&page=\d+", RegexOptions.Compiled);
        private const string LINK_PREV = "<a href=?page={0}>< 上一頁</a>";
        private const string LINK_MORE = "<a href=?page={0}>下一頁 ></a>";
        private const string KEY_PAGE = "page";
        private const string COMMA = "?";
        private const string AMP = "&";
        private int currentPageIndex = 0;
        override protected void Render(HtmlTextWriter writer)
        {
            string query = "";
            if (!DesignMode)
            {
                query = Context.Request.Url.Query.Replace(COMMA, AMP);
                query = RX.Replace(query, string.Empty);
            }
            writer.Write(HTML1);
            base.Render(writer);
            writer.Write(HTML2);
            writer.Write(string.Format(LINK_PREV, (currentPageIndex - 1) + query));
            writer.Write(HTML3);
            writer.Write(string.Format(LINK_MORE, (currentPageIndex + 1) + query));
            writer.Write(HTML4);
        }
    }
}

2、在瀏覽器中查看運行結果如效果圖示。

  【說明】

1、這段代碼的主要功能是呈現(xiàn)一個二行二列的表格,為了顯示得清晰一些,設置了這個表格的邊框為1,從效果圖可以看出,原來DataList顯示的內(nèi)容,顯示在表格的第一行,合并單元格后的單元格中,第二行的兩個單元格,分別顯示“<上一頁”和“下一頁>”。

2、這兩個單元格內(nèi)的文字,分別加了個鏈接參數(shù)?page={0},page的值暫時由默認的當前頁號加1或減1獲得。

3、使用類Regex是根據(jù)正則表達式“&page=\d+”獲取并替代網(wǎng)址中的參數(shù)page,具體用法可參閱MSDN的相關內(nèi)容。

4、if (!DesignMode)是判斷當前是否在設計時狀態(tài),以決定{}中的語句是否執(zhí)行。因為{}中的語句需要從地址中獲取參數(shù)page后面的字符串query,這個query在設計時是未知數(shù),會影響到控件內(nèi)容的呈現(xiàn),所以,在設計時不執(zhí)行,而并不影響實際使用。

三、屬性

【效果】

 

【操作步驟】

1、CustomDataList.cs中為自定義控件添加屬性,并改寫屬性DataSource、函數(shù) OnDataBinding(),完整代碼如下:

using System;
using System.Collections;
using System.Text.RegularExpressions;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WestGarden.Web
{
    public class CustomDataList : DataList
    {
        protected const string HTML1 = "<table border=1><tr><td colspan=2>";
        protected const string HTML2 = "</td></tr><tr><td class=paging align=left>";
        protected const string HTML3 = "</td><td align=right class=paging>";
        protected const string HTML4 = "</td></tr></table>";
        private static readonly Regex RX = new Regex(@"^&page=\d+", RegexOptions.Compiled);
        private const string LINK_PREV = "<a href=?page={0}>< 上一頁</a>";
        private const string LINK_MORE = "<a href=?page={0}>下一頁 ></a>";
        private const string KEY_PAGE = "page";
        private const string COMMA = "?";
        private const string AMP = "&";
        private int pageSize = 10;
        private int currentPageIndex=0;
        private int itemCount;
        private IList dataSource;
        protected string emptyText;
        public int PageSize
        {
            get { return pageSize; }
            set { pageSize = value; }
        }
        protected int PageCount
        {
            get { return (ItemCount - 1) / pageSize; }
        }
        virtual protected int ItemCount
        {
            get { return itemCount; }
            set { itemCount = value; }
        }
        virtual public int CurrentPageIndex
        {
            get { return currentPageIndex; }
            set { currentPageIndex = value; }
        }
        public string EmptyText
        {
            set { emptyText = value; }
        }
        override public object DataSource
        {
            set
            {
                try
                {
                    dataSource = (IList)value;
                    ItemCount = dataSource.Count;
                }
                catch
                {
                    dataSource = null;
                    ItemCount = 0;
                }
            }
        }
        override protected void OnDataBinding(EventArgs e)
        {
            int start = CurrentPageIndex * pageSize;
            int size = Math.Min(pageSize, ItemCount - start);
            IList pageList = new ArrayList();
            for (int i = 0; i < size; i++)
                pageList.Add(dataSource[start + i]);
            base.DataSource = pageList;
            base.OnDataBinding(e);
        }
        override protected void Render(HtmlTextWriter writer)
        {
            if (ItemCount == 0)
            {
                writer.Write(emptyText);
                return;
            }
            string query = "";
            if (!DesignMode)
            {
                query = Context.Request.Url.Query.Replace(COMMA, AMP);
                query = RX.Replace(query, string.Empty);
            }
            writer.Write(HTML1);
            base.Render(writer);
            writer.Write(HTML2);
            writer.Write(string.Format(LINK_PREV, (currentPageIndex - 1) + query));
            writer.Write(HTML3);
            writer.Write(string.Format(LINK_MORE, (currentPageIndex + 1) + query));
            writer.Write(HTML4);
        }
    }
}

  
2、Default.aspx中設置CustomDataList1的屬性PageSize="4" EmptyText="No Data found.",這兩個屬性可以屬性窗口中設置,如圖示:

3、在瀏覽器中查看運行結果如效果圖示。

【說明】

1、CustomDataList分頁的主要邏輯是,改寫DataList的DataSource屬性,在設置數(shù)據(jù)源CustomDataList1.DataSource =CreateDataSource();時,用Ilist類指針dataSource (也就是俗稱的接口)接收過來,同時,獲取數(shù)據(jù)源中數(shù)據(jù)項的個數(shù)ItemCount,然后,改寫DataList的DataBind()函數(shù),在函數(shù)中通過當前頁號CurrentPageIndex(當前頁號初始值為0,在后面,點擊“上一頁”“下一頁”時需要重新設置)與屬性中設置的每頁的數(shù)據(jù)項個數(shù)pageSize獲取起始數(shù)據(jù)項int start = CurrentPageIndex * pageSize;。因為最后一頁數(shù)據(jù)項的個數(shù)不一定,所以該頁的個數(shù)需要重新確定一下int size =Math.Min(pageSize,ItemCount - start);,有了這兩個值,就可以把相應的數(shù)據(jù)項取出存放在重新定義的IList pageList =newArrayList();中,最后,把這個pageList做為DataList的數(shù)據(jù)源與DataList綁定。

2、在屬性窗口中設置屬性,需要刷新一下,在工作區(qū)窗口中把Default.aspx關閉,再重新打開就可以了。

四、事件

【效果】

 

【操作步驟】

1、在CustomDataList.cs中,添加事件PageIndexChanged

public event DataGridPageChangedEventHandler PageIndexChanged;
virtual protected void OnPageIndexChanged(DataGridPageChangedEventArgs e)
{
    if (PageIndexChanged != null)
        PageIndexChanged(this, e);
}

2、在Default.aspx中設置事件處理函數(shù)onpageindexchanged="CustomDataList1_PageIndexChanged",這個設置也可以在屬性窗口中的事件選項卡中進行,如圖示:

3、在Default.aspx.cs中添加代碼,并刪除原來Page_Load()中的代碼,完整代碼如下:

using System;
using System.Data;
using System.Collections;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    //創(chuàng)建符合IList接口的表格示例數(shù)據(jù)
    IList CreateDataSource()
    {
        DataTable dt = new DataTable();
        DataRow dr;
        dt.Columns.Add(new DataColumn("Number", typeof(Int32)));
        for (int i = 0; i <= 10; i++)
        {
            dr = dt.NewRow();
            dr["Number"] = i;
            dt.Rows.Add(dr);
        }
        DataView dv = new DataView(dt);
        return dv;
    }
    protected void CustomDataList1_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
    {
        CustomDataList1.CurrentPageIndex = e.NewPageIndex;
        CustomDataList1.DataSource = CreateDataSource();
        CustomDataList1.DataBind();
    }
}

4、在瀏覽器中查看運行結果如效果圖示。

【說明】

1、DataGridPageChangedEventHandler是委托,原型為:

publicdelegatevoidDataGridPageChangedEventHandler(Object source,DataGridPageChangedEventArgs e)

C#中的委托,類似于C、C++中的函數(shù)指針,從DataGridPageChangedEventHandler的原型可以看出,它相當于是形參為(Object source,DataGridPageChangedEventArgs e),返回值為void的函數(shù)指針。只不過在C#中,委托被做成了類,是一種數(shù)據(jù)類型,需要實例化成類變量,才能存放函數(shù)的指針變量。

2、在屬性窗口的事件選項卡中設置事件處理程序,需要刷新一下,在工作區(qū)窗口中把Default.aspx關閉,再重新打開就可以了。

3、運行結果沒有數(shù)據(jù)顯示,是因為事件PageIndexChanged的事件處理程序沒有被觸發(fā)。

五、觸發(fā)事件處理程序

【效果】

 

【操作步驟】

1、CustomDataList.cs中改寫DataList的OnLoad()函數(shù),并添加函數(shù)SetPage(),代碼如下:

override protected void OnLoad(EventArgs e)
{
    if (Visible)
    {
        string page = Context.Request[KEY_PAGE];
        int index = (page != null) ? int.Parse(page) : 0;
        SetPage(index);
    }
}
public void SetPage(int index)
 {
     OnPageIndexChanged(new DataGridPageChangedEventArgs(null, index));
 }

3、在瀏覽器中查看運行結果如效果圖示。

【說明】

1、觸發(fā)(Raise)事件有很多方式,在這里,重載并修改了DataList的OnLaod()函數(shù),在裝載自定義控件CustomDataList時,讀取地址中的參數(shù)page,并根據(jù)page的值獲取要顯示的頁號index (如果page為空的話,就設為0),并把index交給函數(shù)SetPage(),在SetPage()中調(diào)用OnPageIndexChanged(),進而通過PageIndexChanged(this, e);觸發(fā)了事件處理函數(shù)。因為,事件相當于C、C++中的函數(shù)指針變量,它的值,在Default.aspx中設置CustomDataList的事件處理函數(shù)時,就已經(jīng)指向了形參為(objectsource,DataGridPageChangedEventArgs e),返回值為void類型的函數(shù)了。

2、委托我們使用的是現(xiàn)成的不需要聲明的DataGridPageChangedEventHandler,委托要傳遞的參數(shù)變量也是現(xiàn)成的不需要聲明的DataGridPageChangedEventArgs,通過newDataGridPageChangedEventArgs(null, index),就可以直接給參數(shù)變量賦值并傳遞了。

3、前面,為了強調(diào)顯示效果,我們把“<上一頁”“下一頁>”無條件地顯示了,事實上,如果頁號為0,就不應該顯示當前頁“<上一頁”,而頁號為最后一頁的時候,如果顯示“下一頁>”,由于鏈接問題,點擊會出現(xiàn)錯誤的。為此,需要在Render(),顯示這兩句之前分別加上條件:

if (currentPageIndex > 0)
    writer.Write(string.Format(LINK_PREV, (currentPageIndex - 1) + query));
if (currentPageIndex < PageCount)
    writer.Write(string.Format(LINK_MORE, (currentPageIndex + 1) + query));

    相關評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)