2010
04 26

ListView分頁控制項的使用方法(DataPager)

20:12:00   閱讀數 ( 1617 )   回應數 ( 0 )
續上篇 介紹ListView ,使用ListView都會搭配 DataPager 來實作分頁
這邊簡單地說明使用 DataPager 的方式
相同地,因為資料來源百百種,
由於我們是要示範,所以Random這邊以簡單為主,我們先寫一個假的資料來源:

VirtualDAL.cs (放置於App_Code中)
using System;
using System.Collections.Generic;

// 假的資料層
public class VirtualDAL
{
	// 假資料用的 List<T> static field.
	protected static List<Member> Members;

	// 這邊使用一個 static function 回傳List<T>充當資料來源
	public static List<Member> GetMembers()
	{
		if( Members == null )
		{
			Members = new List<Member>();

			for( var i = 0 ; i <= 9 ; i++ )
			{
				Members.Add( new Member
				{
					Name = "ID:[" + i + "]",
					DateTimeCreate = DateTime.Now.AddDays( i )
				} );
			}
		}
		return Members;
	}
}

/// <summary>暫用的Member類別</summary>
public class Member
{
	public String Name { get; set; }
	public DateTime DateTimeCreate { get; set; }
}

 然後我們的ListView也以簡單的方式示範:
<asp:ObjectDataSource ID="Main_ODS" runat="server"
 TypeName="VirtualDAL" SelectMethod="GetMembers" />

<asp:ListView ID="Main_LV" runat="server" ItemPlaceholderID="PH_Inner" DataSourceID="Main_ODS">
<LayoutTemplate>
		
	<div style="width:300px;border:gray 1px dotted;margin:2px">
		<ul>
			<asp:PlaceHolder ID="PH_Inner" runat="server" />
		</ul>
	</div>

</LayoutTemplate>
<ItemTemplate>

	<li>
		<%# Eval("Name") %> &nbsp;	
		<small><%# Eval("DateTimeCreate","{0:yyyy-MM-dd}") %></small>
	</li>

</ItemTemplate>
</asp:ListView>
這邊我們用ObjectDataSource當資料來源,
TypeName就是我們的VirtualDAL類別名稱,SelectMethod則是GetMembers()函式名稱。
接著設定ListView的DataSourceID為ObjectDataSource的ID, 這樣就完成了.

我們可以看到如下的顯示畫面:
成功顯示的畫面

嗯,跟我們預想中是一樣的,那......如何加入分頁?
很簡單,我們只要把DataPager控制項寫進去就可以了:
<div style="width:300px;border:blue 1px dotted;margin:2px">
	<asp:DataPager ID="Main_DP" runat="server" PageSize="3" PagedControlID="Main_LV" runat="server">
	<Fields>
		<asp:NumericPagerField />
	</Fields>
	</asp:DataPager>
</div>
這邊我們以一個Div包住<asp:DataPager>控制項讓顯示出來明顯一點,
你可以看到我設定了PageSize="3"、並且指定PagedControlID為ListView的ID,
DataPager的部份,你可以看到嵌套的屬性Fields,在這邊可以指定許多種的分頁顯示樣式,
包括頁數型的換頁按鈕,上、下頁的換頁按鈕...等,詳細可以參照MSDN上的DataPager說明

以上這樣的設定,我們就可以看到分頁能正常運作了:
ListView與DataPager顯示

是不是非常簡單?
甚至有時需要在資料的上方也放置一組分頁按鈕,
我們只要把相同DataPager的HtmlTag,放置到ListView的上面,
就可以簡單的達成需求:
兩組DataPager

以往Asp.net 2.0的時候,相信大家為了分頁樣式的問題無不想盡辦法解決,
現在有 ListView + DataPager 的控制項配合,在設計套版上就會方便很多囉

*註:如果資料來源是用動態綁定的會有些小問題,可以參考另一篇。
2010-04-26 20:12:00 By RazgrizHsu       1617 Visits

關於站長 About

RazgrizHsu 的大頭照o.o RazgrizHsu
程式設計之偉大航道
其中的一個小設計師
致力於開發技術研究
願能與各位一同成長!

大家來噗浪 Plurk

免責聲明 Disclaimer

  • 本站所轉載或引用之資料,其版權和知識產權屬於原始所有者。
  • 本站雖力求資料準確,但無法保證或擔保全數資料均準確無誤,許多資料具有時效或環境上的不同,在使用本站資料前應先行初步判斷,若是發現問題,歡迎您通知本站。
  • 在任何情況下,因本站所造成的直接、間接、偶然或其他衍生問題,本站不承擔任何責任。
RandomART程式道-88x31連結用Logo
Copyright © Runart.net 暴走的藝術 since 2009 - 2011
Design By Razgriz Hsu, Asp.net MVC 3 & SqlServer 2008R2.