このシリーズでは、次のような Atlas Sys.UI.Data のより高度なコントロールをいくつか紹介します。
Sys.UI.Data.ListView : ASP.NET Atlas ListView コントロールを使用してリスト データを表示します
Sys.UI.Data.ItemView: ASP.NET Atlas ItemsView コントロールを使用してコレクションからの個々のデータを表示します
Sys.UI.Data.DataNavigator: ASP.NET Atlas PageNavigator コントロールを使用して、クライアント側のページング ナビゲーションを実装します。
Sys.UI.Data.SortBehavior: 継続
Sys.UI.Data.XSLTView: 継続 これは 3 番目の記事です: ASP.NET Atlas PageNavigator コントロールを使用してクライアント側のページング ナビゲーションを実装し、すべてのレコードを 1 ページに配置します特に数百または数千のレコードがある場合、これは決して良い考えではありません。ユーザーは探しているコンテンツを見つけるためにスクロール バーをドラッグし続けるか、Ctrl+F を使用する必要があり、ユーザー エクスペリエンスが非常に低下します。現時点では、データをページングで表示する方がはるかに使いやすくなります。 DataGrid や GridView など、一部の ASP.NET サーバー側コントロールには、ページング機能とページ ナビゲーション機能が組み込まれています。同様に、Atlas クライアント コントロール Sys.UI.Data.DataNavigator も同様の機能を提供しており、開発効率が大幅に向上します。
DataNavigator コントロールは、DataView コントロールと連携して動作します (「Atlas 名前空間 Sys.Data のコントロールの紹介 - DataView および DataFilter」を参照してください)。 DataView コントロールにはページ ナビゲーション関連のメソッドが提供されていないことがわかっているため、ナビゲーションを実装するにはその pageIndex プロパティを直接設定するしかありません。難しいことではありませんが、多くの場合、これは良い考えではありません。なぜなら、私のような不注意な開発者は、pageIndex の境界値の確認を忘れて、無用なトラブルを引き起こすことがよくあるからです。これが、Atlas が DataNavigator コントロールを提供する理由の 1 つであり、DataNavigator コントロールは DataView コントロールのプロキシとして機能し、使いやすいページ ナビゲーション インターフェイスを提供します。
DataNavigator オブジェクトには属性が 1 つだけあります:
dataView: DataView オブジェクトへの参照。この DataNavigator はそれにページ ナビゲーション操作を適用します。このプロパティは常に指定する必要があります。
さらに、DataNavigator コントロールを使用するには、対応するページ ナビゲーション操作をトリガーするために、指定された commandName プロパティを持ついくつかの Atlas ボタンを提供する必要もあります。 DataNavigator がこれらのボタンによって発行されたコマンドを確実にキャプチャできるようにするには、これらのボタンの親プロパティをこの DataNavigator コントロールに設定する必要があります。
ボタンの commandName 属性を、それぞれ異なる意味を持つ次の 5 つの文字列として指定できます。
page: 現在のページ インデックスをコマンド引数で指定された値に変換します。このコマンドを使用すると、ページのインデックスをすばやく変更できます。
nextpage: 次のページに切り替えます (次のページが存在する場合)。
previouspage: 前のページに切り替えます (前のページが存在する場合)。
firstpage: 最初のページに切り替えます。
lastpage: 最後のページに切り替えます。
さて、MSDN のような退屈な紹介はここで終わり、例を通して DataNavigator の使い方に慣れてみましょう。
まず、Atlas ページで使用できるように Web サービスを公開する必要があります。 Web サービスは 100 レコードを返します。以下はこの Web サービスのコードですが、非常に理解しやすいため、ここでは繰り返しません。
ウェブサービス
システムを使用する;
System.Collections を使用します。
System.Collections.Generic を使用します。
System.ComponentModel を使用します。
System.IO を使用します。
System.Web を使用します。
System.Web.Caching を使用します。
System.Web.Services を使用します。
System.Web.Services.Protocols を使用します。
Microsoft.Web.Services を使用します
。
// 簡単にするために、この例では保存と操作を示します。
// メモリ内のデータ オブジェクトも使用できます。
//
[WebService(名前空間 = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
パブリック クラス MyDataService : DataService
{
static List<Entry> _data;
static object _dataLock = new object();
プライベート静的 List<Entry> データ
{
得る
{
if (_data == null)
{
ロック(_dataLock)
{
if (_data == null)
{
_data = 新しい List<Entry>();
for (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
_データを返す;
}
[DataObjectMethod(DataObjectMethodType.Select)
]
public Entry[] SelectRows()
{
MyDataService.Data.ToArray() を返します。
}
パブリッククラスの
エントリ
{
プライベート文字列_name;
プライベート文字列 _email;
プライベート int _id;
[DataObjectField(true, true)]
パブリック整数ID
{
{戻り値}を取得します。
セット { _id = 値 }
オブジェクト
フィールド(false)]
[DefaultValue("新しい行")]
パブリック文字列名
{
{ _name を返す } を取得します。
セット { _name = 値 }
[データオブジェクトフィールド(false)
]
[デフォルト値("")]
パブリック文字列メール
{
{メールを返す}を取得します。
セット { _email = 値 }
エントリ
()
{
_id = -1;
public Entry(int ID, 文字列名, 文字列の説明
)
{
_id = ID;
_name = 名前;
_email = 説明;
}
}
次に、ASPX ページで、次の 4 つの部分を検討して定義する必要があります。
ページに必要な Atlas Framework 関連のスクリプト ファイルを含む ScriptManager コントロール。通常、これはすべての Atlas ページに含める必要があるものです。
プレースホルダー div (ID は dataContents、コードを参照)。 Atlas は、レンダリングされたページ分割された ListView をここに配置します。
ページ ナビゲーション機能を実装するには、コンテナとしての div (DataNavigator コントロール) と、それに含まれるボタンのセット (コマンド ボタン) を使用します。
ListView テンプレートを配置するために使用される非表示の div。
以下は、上記の 4 つの部分のコードです。ListView コントロールのテンプレートについては、私の記事「ASP.NET Atlas ListView コントロールを使用してリスト データを表示する」を参照してください。
<!-- スクリプトマネージャー -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- ページ化された ListView の要素 (コンテナ) -->
<div id="データコンテンツ">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<" />
<input type="button" id="btnPrevPage" value="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="button" id="btnNextPage" value=">" />
<input type="button" id="btnLastPage" value=">>" />
</div>
<!-- テンプレート -->
<div style="可視性: 非表示; 表示: なし">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<頭>
<tr>
<td><span>いいえ</span></td>
<td><span>名前</span></td>
<td><span>メール</span></td>
</tr>
</thead>
<!-- テンプレートを繰り返します -->
<tbody id="myList_itemTemplateParent">
<!-- 繰り返し項目テンプレート -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><スパン id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</テーブル>
<!-- 空のテンプレート -->
<div id="myList_emptyTemplate">
データなし
</div>
</div>
最後に、Atlas の XML スクリプト定義を作成します。これは次の 5 つの部分で構成されます。
パート 1: Atlas クライアント コントロール DataSource。上で定義した Web サービスからデータを取得するために使用されます。
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
パート 2: DataView コントロール (「Atlas 名前空間 Sys.Data のコントロールの紹介 - DataView と DataFilter」を参照)。最初のパートで取得した 100 個のデータをページングするために使用されます。
<dataView id="view" pageSize="12">
<バインディング>
<binding dataContext="dataSource" dataPath="data" property="data" />
</バインディング>
</dataView>
パート 3: ListView コントロール (「ASP.NET Atlas ListView コントロールを使用してリスト データを表示する」を参照)。ページ分割されたデータを表示するために使用されます。
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<バインディング>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</バインディング>
<レイアウトテンプレート>
<templatelayoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<アイテムテンプレート>
<templatelayElement="myList_itemTemplate">
<label id="lblIndex">
<バインディング>
<binding dataPath="$index" transform="Add" property="text"/>
</バインディング>
</label>
<label id="lblName">
<バインディング>
<binding dataPath="Name" property="text"/>
</バインディング>
</label>
<label id="lblメール">
<バインディング>
<binding dataPath="電子メール" property="text"/>
</バインディング>
</label>
</テンプレート>
</itemTemplate>
<空のテンプレート>
<templatelayElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
パート 4: DataNavigator のコントロールとコマンド ボタン。ここには 4 つのボタンがあり、それぞれに異なる commandName 属性があり、DataView 上の DataNavigator の操作にも対応していることに注意してください。同時に、これらのボタンの親プロパティがこの DataNavigator オブジェクトに設定されます。
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage"parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage"parent="pageNavigator" command="前のページ">
<バインディング>
<binding property="enabled" dataPath="hasPreviousPage"/>
</バインディング>
</ボタン>
<button id="btnNextPage"parent="pageNavigator" command="NextPage">
<バインディング>
<binding property="enabled" dataPath="hasNextPage"/>
</バインディング>
</ボタン>
<button id="btnLastPage"parent="pageNavigator" command="LastPage" />
パート 5: 合計ページ数と現在のページのシリアル番号をそれぞれ示す 2 つのラベル。
<label id="lblページ番号">
<バインディング>
<binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
</バインディング>
</label>
<label id="lblPageCount">
<バインディング>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</バインディング>
</label>
OK、ブラウザでテストします。
