Versi Bahasa Inggris: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
Dalam seri ini, saya akan memperkenalkan beberapa kontrol tingkat lanjut di Atlas Sys.UI.Data, termasuk:
Sys.UI.Data.ListView : Menampilkan data daftar menggunakan kontrol ASP.NET Atlas ListView
Sys.UI.Data.ItemView: Bersambung
Sys.UI.Data.DataNavigator: Bersambung
Sys.UI.Data.XSLTView: Bersambung Artikel ini adalah yang pertama: Menggunakan kontrol ASP.NET Atlas ListView untuk menampilkan data daftar.
Di sebagian besar program Web saat ini, kita perlu menampilkan beberapa data daftar kepada pengguna. Kontrol server GridView di ASP.NET menyediakan fungsi ini, dan kontrol klien ListView di Atlas juga dapat menyediakan fungsi serupa di sisi klien dan dijalankan dalam mode AJAX. Meskipun Anda dapat menggunakan kontrol GridView tradisional ditambah UpdatePanel Atlas untuk menyediakan operasi AJAX yang sama, implementasi ini kurang efisien dan bukan merupakan pendekatan Atlas "murni". Metode yang disarankan adalah dengan menggunakan kontrol klien Atlas ListView sebagai gantinya. Jangan khawatir, kontrol ListView Atlas sesederhana GridView, dan keduanya serupa dalam banyak konsep, seperti ItemTemplate. Namun perlu diperhatikan bahwa IDE saat ini tidak menyediakan fungsi persepsi cerdas untuk skrip Atlas. Selain itu, skrip Atlas tidak memiliki pemeriksaan waktu kompilasi, jadi Anda harus ekstra hati-hati saat menulis kode.
Saat menggunakan ListView, Anda harus menyediakan beberapa templat (Templat) yang diperlukan untuk memberi tahu Atlas cara merender konten Anda. Ada templat berikut di ListView:
layoutTemplate: Templat ini digunakan untuk merender wadah yang berisi item daftar (misalnya, menggunakan tag <table>), kepala daftar (misalnya, menggunakan tag <thead>), ekornya, dll. Anda harus menentukan layoutTemplate untuk ListView. Dan template ini harus berisi template itemTemplate, dan opsional template separatorTemplate.
itemTemplate: Templat ini digunakan untuk merender item dalam daftar (misalnya, menggunakan tag <tr>). Templat ini harus ditempatkan di layoutTemplate.
separatorTemplate: Templat ini digunakan untuk merender elemen pemisah antar item dalam daftar (misalnya, menggunakan tag <hr>). Templat ini harus ditempatkan di layoutTemplate.
blankTemplate.: Templat ini digunakan untuk merender ListView ketika tidak ada item. Saat ini, mungkin tidak ada item di objek DataSource yang terkait dengan ListView, atau mungkin sedang dalam proses diperoleh dari server.
Ada juga beberapa properti di ListView:
itemCssClass: menentukan kelas css dari item item.
AlternatingItemCssClass: Kelas css dari item item yang menentukan interval.
SelectItemCssClass: Menentukan kelas css dari item item yang dipilih.
separatorCssClass: Menentukan kelas css yang memisahkan elemen.
itemTemplateParentElementId: Atribut ini menentukan elemen induk itemTemplate dan separatorTemplate. Dengan cara ini elemen itemTemplate dan separatorTemplate dapat dirender berulang kali.
Oke, mari kita gunakan contoh untuk mengilustrasikan cara menggunakan kontrol ListView:
Pertama, kita menulis Layanan Web yang mengembalikan DataTable di .NET. Perhatikan bahwa di sini kita akan mewarisi kelas dasar Microsoft.Web.Services.DataService, dan menambahkan atribut DataObjectMethod yang ditentukan dalam namespace System.ComponentModel ke metode layanan. Pada awal metode layanan, kami menggunakan System.Threading.Thread.Sleep(2000) untuk mensimulasikan penundaan jaringan 2 detik sehingga konten dari templat kosong dapat dilihat.
[Layanan Web(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
kelas publik MyService : Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
Tabel Data publik GetListData()
{
Sistem.Threading.Thread.Tidur(2000);
DataTable dt = DataTable baru("DataDaftar Saya");
dt.Columns.Add("Nama", typeof(string));
dt.Kolom.Tambahkan("Email", typeof(string));
DataRow baris baru;
untuk (int saya = 0; saya < 5; ++i)
{
baris baru = dt.baris baru();
newRow["Nama"] = string.Format("Terbang {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
kembalikan dt;
}
}
Kemudian, tambahkan beberapa kontrol/tag yang diperlukan di halaman ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Elemen untuk myList (wadah) -->
<div id="Daftar Saya"></div>
<!-- Elemen Tata Letak -->
<div style="tampilan: tidak ada;">
</div>
Pada tag di atas, kami menambahkan tiga tag: kontrol ScriptManager yang diperlukan. Div dengan id myList digunakan untuk memungkinkan Atlas menempatkan ListView yang dirender di sini. Div tersembunyi yang mendefinisikan template kita. Elemen dalam div tersembunyi ini tidak terlihat di halaman dan hanya digunakan untuk menyediakan template yang diperlukan Atlas.
Kami menambahkan template ListView berikut ke div tersembunyi ini:
<!-- Layout Template -->
<tabel id="myList_layoutTemplate" border="1" cellpadding="3">
<kepala>
<tr>
<td><span>Tidak.</span></td>
<td><span>Nama</span></td>
<td><span>Email</span></td>
</tr>
</kepala>
<!-- Ulangi Templat -->
<tbody id="myList_itemTemplateParent">
<!-- Ulangi Templat Item -->
<tr id="daftarsaya_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
<!-- Templat Item Pemisah -->
<tr id="myList_separatorTemplate">
<td colspan="3">Pemisah</td>
</tr>
</tbody>
</tabel>
<!-- Templat Kosong -->
<div id="daftarsaya_emptyTemplate">
Tidak Ada Data
</div>
Pada kode di atas Anda dapat melihat keempat template yang saya sebutkan. Tentukan juga id untuk setiap template, yang akan digunakan dalam deklarasi skrip Atlas di bawah. Dalam contoh ini saya akan merender ListView ini sebagai Tabel HTML, sayangnya elemen yang dipisahkan akan jelek (baris kosong).
Terakhir, tambahkan pernyataan skrip Atlas ke halaman:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<ikatan>
<mengikat dataContext="listDataSource" dataPath="data" property="data" />
</binding>
<templat tata letak>
<template layoutElement="myList_layoutTemplate" />
</tata letakTemplat>
<Templat Barang>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<ikatan>
<mengikat dataPath="$index" transform="Tambahkan" properti="teks"/>
</binding>
</label>
<label id="namalbl">
<ikatan>
<mengikat dataPath="Nama" properti="teks" />
</binding>
</label>
<label id="lblEmail">
<ikatan>
<mengikat dataPath="Email" properti="teks" />
</binding>
</label>
</templat>
</itemTemplat>
<templat pemisah>
<template layoutElement="myList_separatorTemplate" />
</separatorTemplate>
<Templat kosong>
<template layoutElement="myList_emptyTemplate"/>
</templat kosong>
</listView>
Di sini saya menambahkan objek DataSource klien Atlas untuk mendapatkan data dari Layanan Web. Kami tidak akan membahas banyak tentang DataSource di sini (mungkin akan diperkenalkan di artikel berikutnya). Mari kita lihat definisi yang terkait dengan ListView: Dalam definisi ListView, kita menentukan atribut itemTemplateParentElementId. Kemudian segmen pengikatan ditentukan di dalam ListView untuk mengikat data yang diperoleh dari DataSource ke ListView. Kami juga mendefinisikan empat segmen templat, yang masing-masing menggunakan layoutElement untuk dikaitkan dengan empat templat yang ditentukan di atas. Perhatikan bahwa untuk kontrol label pertama di templat layoutTemplate, kami menentukan Tambahkan transformator dalam pengikatannya untuk mengubah urutan mulai dari 0 hingga mulai dari 1 (untuk Atlas Transformer, silakan merujuk ke artikel saya: http ://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
Selesai, ayo kita jalankan.