![\"\"](\"http:\/\/www.beansoftware.com\/ASP.NET-Tutorials\/Images\/DataList-Pager-UI.jpg\")
<\/p>\nASP. NET 3.5 memperkenalkan dua data baru terikat kontrol ListView & DataPager. ListView Web server kontrol memungkinkan kita untuk menampilkan data dari sumber data dan jika DataPager terpasang maka memungkinkan paging di ListView.<\/p>\n
ListView adalah\u00a0bound control data yang mirip dengan DataList dan DataRepeater controls tetapi memberikan mengedit, insert, dan delete, semacam operasi pada data yang dibatasi seperti kontrol GridView. Tidak seperti kontrol ListView GridView memberikan pengguna kontrol penuh atas render halaman. menggunakan template dan gaya (CSS) pengguna dapat menghasilkan UI HTML bersih sesuai dengan kebutuhannya.<\/p>\n
DataPager kontrol Web digunakan untuk data halaman dan kontrol navigasi tampilan untuk kontrol data-bound yang menerapkan IPageableItemContainer interface.ListView mengimplementasikan IPageableItemContainer dan akan menggunakan DataPager untuk mendukung Pager.\u00a0Dalam tutorial ini kita akan menggunakan kedua kontrol untuk mencapai email Viewer terlihat dan terasa seperti gambar di bawah ini.<\/p>\n
<\/p>\n
Binding\u00a0ListView ke DataSource.<\/p>\n
Kita dapat menggunakan ASP.NET datasource control data untuk mengikat ke ListView control dengan menyetel properti DataSourceID dari ListView Control dengan nama kontrol DataSource.<\/p>\n
Sampel ini menggunakan kontrol AccessDataSource untuk mengikat ke \u00a0ListView Control .<\/p>\n
<<\/span>asp<\/span>:<\/span>ListView<\/span>\u00a0ID<\/span>=\"ListView1\"<\/span>\u00a0DataSourceID<\/span>=\"AccessDataSource1\"<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0OnSorting<\/span>=\"ListView1Sorting\"<\/span>\r\nDataKeyNames<\/span>=\"id\"<\/span>\u00a0onitemcommand<\/span>=\"ItemUpdate\"<\/span>\u00a0><\/span><\/pre>\nListView menyediakan dibangun untuk semacam fungsi, \u00a0yang dapat ditentukan dengan menetapkan properti commandname dari kontrol, yang merupakan bagian dari \u00a0ListView Control ke ‘Sort’. Yang dapat digunakan untuk mengidentifikasi pengendalian mengangkat peristiwa semacam itu. Handler untuk acara semacam terdaftar dengan menyetel properti OnSorting dari ListView untuk nama handler.<\/p>\n
Menentukan Urutkan acara pada Control<\/p>\n
<asp:LinkButton runat=\"server\" ID=\"LinkButton5\" Text=\"Body\" CommandName=\"Sort\" CommandArgument=\"Body\" \/><\/pre>\nHandling the raised sort event<\/h2>\n
protected<\/span>\u00a0void<\/span>\u00a0ListView1Sorting(Object<\/span>\u00a0sender,\u00a0ListViewSortEventArgs<\/span>\u00a0e)
\n{
\nString<\/span>\u00a0strImage;
\nif<\/span>\u00a0(e.SortDirection ==\u00a0SortDirection<\/span>.Ascending)
\nstrImage =\u00a0“asc.gif”<\/span>;
\nelse<\/span>
\nstrImage =\u00a0“desc.gif”<\/span>;
\nImage<\/span>\u00a0sortSender = (Image<\/span>)ListView1.FindControl(“Image1”<\/span>);
\nImage<\/span>\u00a0sortSubject = (Image<\/span>)ListView1.FindControl(“Image2”<\/span>);
\nImage<\/span>\u00a0sortRecdate = (Image<\/span>)ListView1.FindControl(“Image3”<\/span>);
\nImage<\/span>\u00a0sortBody = (Image<\/span>)ListView1.FindControl(“Image4”<\/span>);<\/p>\nif<\/span>\u00a0(e.SortExpression ==\u00a0“From”<\/span>)
\n{
\nsortSender.ImageUrl = strImage;
\nsortSender.Visible =\u00a0true<\/span>;
\nsortSubject.Visible =\u00a0false<\/span>;
\nsortRecdate.Visible =\u00a0false<\/span>;
\nsortBody.Visible =\u00a0false<\/span>;
\n}
\nelse<\/span>\u00a0if<\/span>\u00a0(e.SortExpression ==\u00a0“Subject”<\/span>)
\n{
\nsortSubject.ImageUrl = strImage;
\nsortSender.Visible =\u00a0false<\/span>;
\nsortSubject.Visible =\u00a0true<\/span>;
\nsortRecdate.Visible =\u00a0false<\/span>;
\nsortBody.Visible =\u00a0false<\/span>;
\n}
\nelse<\/span>\u00a0if<\/span>\u00a0(e.SortExpression ==\u00a0“recdate”<\/span>)
\n{
\nsortBody.ImageUrl = strImage;
\nsortSender.Visible =\u00a0false<\/span>;
\nsortSubject.Visible =\u00a0false<\/span>;
\nsortRecdate.Visible =\u00a0true<\/span>;
\nsortBody.Visible =\u00a0false<\/span>;
\n}
\nelse<\/span>\u00a0if<\/span>\u00a0(e.SortExpression ==\u00a0“Body”<\/span>)
\n{
\nsortBody.ImageUrl = strImage;
\nsortSender.Visible =\u00a0false<\/span>;
\nsortSubject.Visible =\u00a0false<\/span>;
\nsortRecdate.Visible =\u00a0false<\/span>;
\nsortBody.Visible =\u00a0true<\/span>;
\n}
\nelse<\/span>
\n{<\/p>\nsortSender.Visible =\u00a0false<\/span>;
\nsortSubject.Visible =\u00a0false<\/span>;
\nsortRecdate.Visible =\u00a0false<\/span>;
\nsortBody.Visible =\u00a0false<\/span>;
\n}
\n}<\/p>\nMenentukan Template ListView<\/h2>\n
– LayoutTemplate<\/p>\n
– ItemTemplate<\/p>\n
– ItemSeparatorTemplate<\/p>\n
– GroupTemplate<\/p>\n
– GroupSeparatorTemplate<\/p>\n
– EmptyItemTemplate<\/p>\n
– EmptyDataTemplate<\/p>\n
– SelectedItemTemplate<\/p>\n
– AlternatingItemTemplate<\/p>\n
– EditItemTemplate<\/p>\n
– InsertItemTemplate<\/p>\n
![\"\"](\"http:\/\/www.beansoftware.com\/ASP.NET-Tutorials\/Images\/DataList-Pager-Hierarchy.JPG\")
<\/p>\n
<\/p>\n
Main Layoout\u00a0dari ListView Control \u00a0dibuat dengan mendefinisikan LayoutTemplate . \u00a0LayoutTemplate akan mencakup kontrol yang bertindak sebagai tempat untuk data seperti Tabel, Panel, Label atau HTML kontrol seperti elemen tabel, div, atau rentang yang memiliki atribut runat diatur ke “server”.
\nItem Template adalah template utama yang akan menampilkan data dibatasi untuk ListView secara berulang. Template ini biasanya berisi kontrol yang merupakan data-terikat kolom data atau elemen data individu lainnya. Kedua template wajib.
\nGroupTemplate akan digunakan untuk kelompok item. The EditItemTemplate, SelectedItemTemplate, InsertItemTemplate ditampilkan di bahwa operasi tertentu seperti insert, mengedit, pilih. Item SeparatorTemplate, Grup SeparatorTemplate digunakan untuk memisahkan setiap item dan item kelompok terpisah.
\nKami akan menggunakan setiap template untuk menanamkan kontrol HTML yang diperlukan seperti meja, tr, td, div, rentang atau server kontrol untuk menampilkan UI sesuai dengan kebutuhan kita.
\nContoh berikut menunjukkan struktur dasar dari ListView dengan template wajib …<\/p>\n
<<\/span>asp<\/span>:<\/span>ListView<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0ID<\/span>=\"ListView1\"<\/span>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0DataSourceID<\/span>=\"SqlDataSource1\"><\/span>\r\n\u00a0\u00a0<<\/span>LayoutTemplate<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<<\/span>table<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0id<\/span>=\"table1\"<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>tr<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0id<\/span>=\"itemPlaceholder\"<\/span>\u00a0><\/<\/span>tr<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/<\/span>table<\/span>><\/span>\r\n\u00a0\u00a0<\/<\/span>LayoutTemplate<\/span>><\/span>\r\n\u00a0\u00a0<<\/span>ItemTemplate<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<<\/span>tr<\/span>\u00a0runat<\/span>=\"server><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>td<\/span>\u00a0id<\/span>=\"Td1\"<\/span>\u00a0runat<\/span>=\"server\"><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<%-- Data-bound content. --<\/span>%>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>asp<\/span>:<\/span>Label<\/span>\u00a0ID<\/span>=\"NameLabel\"<\/span>\u00a0runat<\/span>=\"server\"<\/span>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Text<\/span>='<\/span><%#Eval(\"Name\")\u00a0%>'<\/span>\u00a0\/><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/<\/span>td<\/span>><\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/<\/span>tr<\/span>><\/span>\r\n\u00a0\u00a0<\/<\/span>ItemTemplate<\/span>><\/span>\r\n<\/<\/span>asp<\/span>:<\/span>ListView<\/span>><\/span><\/pre>\nSebuah pengganti barang harus ditentukan pada ListView. Ini akan ditentukan dalam LayoutTemplate atau GroupTemplate.<\/p>\n
Dalam rangka untuk menentukan pengganti barang menetapkan kontrol properti ID untuk “itemPlaceholder”. Kontrol barang pengganti juga harus menentukan runat = “server”. Jika Anda ingin memberikan ID yang berbeda, Anda dapat menentukan menggunakan atribut ItemPlaceholderID dari kontrol ListView.<\/p>\n
Jika Pengelompokan digunakan, GroupTemplate akan bertindak sebagai tempat dudukan untuk ItemTemplate. Dalam hal ini Groupplaceholder harus ditentukan dalam ListView. Sebuah Groupplaceholder dapat ditentukan dalam LayoutTemplate dengan menetapkan kontrol properti ID untuk “groupPlaceholder” atau menetapkan atribut GroupPlaceholderID dari kontrol ListView untuk kontrol yang ditentukan dalam LayoutTemplate.<\/p>\n
Contoh kode untuk setting ID\u00a0\u00a0properties control untuk “itemPlaceholder”, “groupPlaceholder”<\/h2>\n
<<\/span>asp<\/span>:<\/span>ListView<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0ID<\/span>=”ListView1″<\/span>
\nDataSourceID<\/span>=”SqlDataSource1″<\/span>
\nGroupItemCount<\/span>=”5″><\/span>
\n<<\/span>LayoutTemplate<\/span>><\/span>
\n<<\/span>table<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0id<\/span>=”table1″><\/span>
\n<<\/span>tr<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0id<\/span>=”groupPlaceholder”<\/span>\u00a0\u00a0><\/span>
\n<\/<\/span>tr<\/span>><\/span>
\n<\/<\/span>table<\/span>><\/span>
\n<\/<\/span>LayoutTemplate<\/span>><\/span>
\n<<\/span>GroupTemplate<\/span>><\/span>
\n<<\/span>tr<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0id<\/span>=”tableRow”><\/span>
\n<<\/span>td<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0id<\/span>=”itemPlaceholder”<\/span>\u00a0\/><\/span>
\n<\/<\/span>tr<\/span>><\/span>
\n<\/<\/span>GroupTemplate<\/span>><\/span>
\n<<\/span>ItemTemplate<\/span>><\/span>
\n<<\/span>td<\/span>\u00a0id<\/span>=”Td1″<\/span>\u00a0runat<\/span>=”server”><\/span>
\n<%— Data-bound content. —<\/span>%>
\n<<\/span>asp<\/span>:<\/span>Label<\/span>\u00a0ID<\/span>=”NameLabel”<\/span>\u00a0runat<\/span>=”server”<\/span>
\nText<\/span>=’<\/span><%#Eval(“Name”)\u00a0%>‘<\/span>\u00a0\/><\/span>
\n<\/<\/span>td<\/span>><\/span>
\n<\/<\/span>ItemTemplate<\/span>><\/span>
\n<\/<\/span>asp<\/span>:<\/span>ListView<\/span>><\/span><\/p>\nContoh kode untuk\u00a0setting itemPlaceholderID, groupPlaceholderID\u00a0untuk propertis control ID<\/h2>\n
<<\/span>asp<\/span>:<\/span>ListView<\/span>\u00a0runat<\/span>=”server”<\/span>\u00a0