このシリーズでは、次のような Atlas Sys.UI.Data のより高度なコントロールをいくつか紹介します
。 : ASP.NET Atlas ListView コントロールを使用してリスト データを表示します
Sys.UI.Data.ItemView: 継続
Sys.UI.Data.DataNavigator: 続く
Sys.UI.Data.XSLTView: 続き この記事はその最初の記事です: ASP.NET Atlas ListView コントロールを使用してリスト データを表示する
現在の Web プログラムでは、いくつかのリスト データをユーザーに表示する必要があります。 ASP.NET の GridView サーバー コントロールはこの機能を提供し、Atlas のクライアント コントロール ListView もクライアント側で同様の機能を提供し、AJAX モードで実行できます。従来の GridView コントロールと Atlas の UpdatePanel を使用して同じ AJAX 操作を提供することもできますが、この実装は効率が低く、「純粋な」Atlas アプローチではありません。代わりに Atlas のクライアント コントロール ListView を使用することをお勧めします。心配しないでください。Atlas の ListView コントロールは GridView と同じくらい単純で、この 2 つは、ItemTemplate などの多くの概念で似ています。ただし、現在の IDE は Atlas スクリプトに対するインテリジェントな認識機能を提供していないことに注意してください。また、Atlas スクリプトにはコンパイル時のチェックがないため、コードを作成するときは特に注意する必要があります。
ListView を使用する場合は、Atlas にコンテンツのレンダリング方法を指示するために、必要なテンプレート (テンプレート) をいくつか提供する必要があります。 ListView には次のテンプレートがあります
。layoutTemplate: このテンプレートは、リスト項目 (たとえば、<table> タグを使用)、リストの先頭 (たとえば、<thead> タグを使用) を含むコンテナーをレンダリングするために使用されます。尻尾などListView には、layoutTemplate を指定する必要があります。また、このテンプレートには itemTemplate テンプレートと、オプションで separatorTemplate テンプレートが含まれている必要があります。
itemTemplate: このテンプレートは、リスト内の項目をレンダリングするために使用されます (たとえば、<tr> タグを使用)。このテンプレートは、layoutTemplate に配置する必要があります。
separatorTemplate: このテンプレートは、リスト内の項目間の区切り要素をレンダリングするために使用されます (たとえば、<hr> タグを使用)。このテンプレートは、layoutTemplate に配置する必要があります。
emptyTemplate.: このテンプレートは、項目が存在しない場合に ListView をレンダリングするために使用されます。この時点では、ListView に関連する DataSource オブジェクトに項目がないか、サーバーから取得中である可能性があります。
ListView にはいくつかのプロパティもあります。
itemCssClass: item 項目の CSS クラスを指定します。
alternatingItemCssClass: 間隔を指定する項目 item の CSS クラス。
selectedItemCssClass: 選択された項目 item の CSS クラスを指定します。
separatorCssClass: 要素を区切る CSS クラスを指定します。
itemTemplateParentElementId: この属性は、itemTemplate および separatorTemplate の親要素を指定します。このようにして、itemTemplate 要素と separatorTemplate 要素を繰り返しレンダリングできます。
OK、例を使用して ListView コントロールの使用方法を説明しましょう。
まず、.NET で DataTable を返す Web サービスを作成します。ここでは、Microsoft.Web.Services.DataService 基本クラスから継承し、名前空間 System.ComponentModel で定義された属性 DataObjectMethod をサービス メソッドに追加することに注意してください。サービス メソッドの開始時に、System.Threading.Thread.Sleep(2000) を使用して 2 秒のネットワーク遅延をシミュレートし、emptyTemplate の内容を確認できるようにします。
[WebService(名前空間 = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
パブリック クラス MyService : Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
パブリック DataTable GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MyListData");
dt.Columns.Add("名前", typeof(string));
dt.Columns.Add("電子メール", typeof(string));
データ行新しい行;
for (int i = 0; i < 5; ++i)
{
newRow = dt.NewRow();
newRow["名前"] = string.Format("Dflying {0}", i);
newRow["メール"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
dt を返します。
}
}
次に、ASP.NET ページに必要なコントロール/タグをいくつか追加します: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- myList の要素 (コンテナ) -->
<div id="myList"></div>
<!-- レイアウト要素 -->
<div style="display: none;">
</div>
上記のタグでは、必須の ScriptManager コントロールという 3 つのタグを追加しました。 id が myList の div は、Atlas がレンダリングされた ListView をここに配置できるようにするために使用されます。テンプレートを定義する隠し div。この非表示 div 内の要素はページには表示されず、Atlas に必要なテンプレートを提供するためにのみ使用されます。
次の ListView テンプレートをこの隠し div に追加します:
<!-- Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<頭>
<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>
<!-- 区切り項目テンプレート -->
<tr id="myList_separatorTemplate">
<tdcolspan="3">区切り文字</td>
</tr>
</tbody>
</テーブル>
<!-- 空のテンプレート -->
<div id="myList_emptyTemplate">
データなし
</div>
上記のコードでは、前述した 4 つのテンプレートすべてを確認できます。また、各テンプレートの ID を指定します。これは、以下の Atlas スクリプト宣言で使用されます。この例では、この ListView を HTML テーブルとしてレンダリングしますが、残念ながら、分割された要素は見苦しくなります (空白行)。
最後に、Atlas スクリプト ステートメントをページに追加します:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<バインディング>
<binding dataContext="listDataSource" dataPath="data" 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="名前" property="テキスト" />
</バインディング>
</label>
<label id="lblメール">
<バインディング>
<binding dataPath="電子メール" property="テキスト" />
</バインディング>
</label>
</テンプレート>
</itemTemplate>
<区切り文字テンプレート>
<templatelayElement="myList_separatorTemplate" />
</separatorTemplate>
<空のテンプレート>
<templatelayElement="myList_emptyTemplate"/>
</emptyTemplate>
ここ
では、Web サービスからデータを取得するために Atlas クライアント DataSource オブジェクトを追加しました。ここでは DataSource についてはあまり話しません (後続の記事で紹介する可能性があります)。 ListView に関連する定義を見てみましょう。 ListView の定義では、itemTemplateParentElementId 属性を指定します。次に、バインディング セグメントが ListView 内で定義され、DataSource から取得したデータを ListView にバインドします。また、4 つのテンプレート セグメントも定義しました。各セグメントは、layoutElement を使用して、上で定義した 4 つのテンプレートに関連付けます。 layoutTemplate テンプレートの最初のラベル コントロールでは、バインディングで Add トランスフォーマーを指定して、0 から始まる順序を 1 から始まる順序に変更していることに注意してください (Atlas Transformer については、私の記事を参照してください: http://dflying.cnblogs. com/archive/2006/04/05/367908.html )。
完了しました。実行しましょう。