TOP

[C#] ListView 利用 GridView 達成分頁功能

因為在asp.net 3.5 的狀況下 ListView沒有提供分頁的功能。
一般的做法都是用以下兩種方式:
(1)ListView + DataPager + LinqDataSource
(2)ListView + DataPager + SQLDataSource

但因為資料來源不是從LinqDataSource或SQLDataSource取得,所以使用DataPager 造成很多不必要的麻煩,改用ListView +GridView 的方式,雖然會浪費資源及效能但同樣可以執成同樣的效果。

一、ASPX新增及建立

1.GridView 的相關設定,並且在Columns新增一個項目,利用CSS做隱藏

<pre class='codeblock'>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" GridLines ="None" onpageindexchanging="GridView1_PageIndexChanging" onrowdatabound="GridView1_RowDataBound" >
         <PagerSettings FirstPageText="_FirstPage" LastPageText="_LastPage" Mode="NumericFirstLast" NextPageText="_NextPage" PreviousPageText="_PreviousPage" PageButtonCount="2" />
         <Columns>
             <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name"
             ReadOnly="True" ItemStyle-cssclass="hiddencol" HeaderStyle-CssClass="hiddencol">
              <HeaderStyle CssClass="hiddencol"></HeaderStyle>
               <ItemStyle CssClass="hiddencol"></ItemStyle>
           </Columns>
            <FooterStyle HorizontalAlign ="Left" />
            <PagerStyle HorizontalAlign="Center" Font-Size="10" BackColor="#ffffff"                                                      ForeColor="#0072BC" Wrap="False" CssClass="PagerCss"></PagerStyle>
        </asp:GridView>
</pre>

2.增加CSS
<pre class='codeblock'>
<style type="text/css">
    .hiddencol
    {
        display:none;
    }
    .viscol
    {
        display:block;
    }
 
   .PagerCss TD A:hover { width: 20px; color: blue; }
    .PagerCss TD A:active { width: 20px; color: black; }
    .PagerCss TD A:link {width: 20px; color: Green;}
    .PagerCss TD A:visited { width: 20px; color:black ; }
    .PagerCss TD SPAN { font-weight: bold; font-size: 25px; width: 20px; color: red;  background-color:Silver ; }  
</style>
</pre>

3.ListView相關設定
<pre class='codeblock'>
    <asp:ListView ID="ListView1" runat="server" onitemdatabound="ListView1_ItemDataBound">
        <LayoutTemplate>
                <span ID="itemPlaceholder" runat="server"></span>
        </LayoutTemplate>
        <ItemTemplate>
             <asp:Label ID="Name" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
        </ItemTemplate>
    </asp:ListView>
</pre>

二、Code Behind新增及建立
1.建立全域變數的DataTable 及DataView
<pre class='codeblock'>
    public partial class Page : System.Web.UI.UserControl
    {
        public DataTable dt= new DataTable();
        public DataView dv = new DataView();
    }
</pre>

2.建立DataTable 的結構,並取得資料來源。
<pre class='codeblock'>
    protected void Page_Load(object sender, EventArgs e)
    {
        dt.Columns.Add("Name");
        dv = dt.DefaultView;
        DataView dvSource = GetSource();
        GridView1.DataSource = dvSource ;
        GridView1.DataBind();
        ListView1.DataSource = dv;
        ListView1.DataBind();
    }
</pre>
3.
<pre class='codeblock'>
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRow dr = dv.Table.NewRow();
            dr["Name"] = DataBinder.Eval(e.Row.DataItem, "Name") as string;
            dv.Table.Rows.Add(dr);
        }
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.EditIndex = -1;
        GridView1.PageIndex = e.NewPageIndex;
        dt.Columns.Add("Name");
        dv = dt.DefaultView;
        DataView dvSource = GetSource();
        GridView1.DataSource = dvSource ;
        GridView1.DataBind();
        ListView1.DataSource = dv;
        ListView1.DataBind();
    }

    protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
         Label Name = (e.Item.FindControl("Name") as Label);
         string Name = DataBinder.Eval(dataItem.DataItem, "Name ").ToString();
     }
</pre>

參考資料 :
http://charlesbc.blogspot.tw/2010/05/iqueryable-gridview-rowdatabound.html
http://www.dotblogs.com.tw/dennismao/archive/2009/08/10/9977.aspx?fid=16726
http://kennyfan88.pixnet.net/blog/post/84881604-%E4%BD%BF%E7%94%A8datatable%E5%8A%A0%E5%85%A5%E6%AC%84%E4%BD%8D%E3%80%81%E6%96%B0%E5%A2%9E%E6%AC%84%E4%BD%8D%E5%90%84%E8%B3%87%E6%96%99%E5%88%97

0 意見:

張貼留言