Pada posting kali ini saya ingin membahas fitur yang menurut saya sangat menarik pada ASP.NET 3.5 yaitu ListView dan Data Pager
ListView dan DataPager adalah control baru pada ASP.NET 3.5. ListView adalah control yang amat sangat fleksible, anda dapat menggunakan ListView untuk kasus yang sama seperti ketika anda menggunakan GridView, DataList, FormView, dan Repeater control. Sedangkan DataPager adalah pasangan dari ListView yang digunakan untuk paging data.
Topik yang akan dibahas:
- Sekilas ListView Control
- Penggunaan Layout Template dan Item Template
- Menampilkan tabular data dengan ListView
- Menggunakan Group Template
- Membuat Master/Detail dengan ListView
Source code untuk contoh-contoh aplikasi dapat anda download di
ListView Control
Anda dapat membayangkan bahwa LisView adalah GridView control yang amat sangat fleksible. Sama seperti GridView, ListView juga dapat digunakan untuk display, edit, delete select, dan sorting data, bedanya dengan GridView, ListView merupakan control yang berbasis template secara keseluruhan, ListView juga dapat digunakan untuk insert data.
ListView juga mirip dengan DataList karena dapat digunakan untuk menampilkan data yang terdiri dari beberapa kolom. ListView juga mirip dengan Repeater karena semuanya berbasis template.
ListView mempunyai beberapa tempalate yang dapat digunakan diantaranya:
- LayoutTemplate
- ItemTemplate
- GroupTemplate
- EmptyItemTemplate
- EmptyDataTemplate
- SelectedItemTemplate
- AlternatingItemTemplate
- EditItemTemplate
- InsertItemTemplate
Contoh Penggunaan Layout Template dan Item Template (SimpleListView.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsKategori" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Kategori]"></asp:SqlDataSource>
8: <asp:ListView ID="lvKategori" runat="server"
9: DataSourceID="sdsKategori">
10: <LayoutTemplate>
11: <div style="border:dotted 1px black; width:200px;">
12: <asp:PlaceHolder ID="itemPlaceHolder"
13: runat="server" />
14: </div>
15: </LayoutTemplate>
16: <ItemTemplate>
17: <div style="border:solid 1px black;">
18: <%# Eval("nama_kat") %>
19: </div>
20: </ItemTemplate>
21: <AlternatingItemTemplate>
22: <div style="border:solid 1px black; background-
23: color:Silver;">
24: <%# Eval("nama_kat") %>
25: </div>
26: </AlternatingItemTemplate>
27: <EmptyDataTemplate>
28: No Record Found
29: </EmptyDataTemplate>
30: </asp:ListView>
31: </div>
32: </form>
Pada contoh diatas LayoutTemplate digunakan untuk membuat <div> paling luar yang akan berisi semua data yang ditampilkan oleh ListView. LayoutTemplate hanya dirender sekali saja ketika halaman dibuat. Di dalam LayoutTemplate anda perlu menambahkan itemPlaceHolder yang nanti akan diganti oleh tag-tag yang ada dalam ItemTemplate.
ItemTemplate digunakan untuk merender data semua data yang ada pada data source. Jadi bagian yang dijalankan berulang-ulang adalah ItemTemplate sesuai dengan jumlah data yang ada di data source.
AlternatingItemTemplate bersifat opsional, pada program diatas digunakan untuk menampilkan data yang background colornya silver. EmptyDataTemplate akan ditampilkan jika tidak ada data pada data source alias kosong.
Jika biasanya anda menampilkan data tabular menggunakan GridView, maka sekarang anda dapat membuat yang lebih fleksible menggunakan ListView
Contoh menampilkan table pada ListView (TableList.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsKategori" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Kategori]"></asp:SqlDataSource>
8: <asp:ListView ID="lvKategori" runat="server"
9: DataSourceID="sdsKategori">
10: <LayoutTemplate>
11: <table border="1px" style="border-collapse:collapse;">
12: <thead>
13: <tr><td>ID</td><td>Nama Kategori</td></tr>
14: </thead>
15: <tbody>
16: <asp:PlaceHolder ID="itemPlaceHolder"
17: runat="server" />
18: </tbody>
19: </table>
20: </LayoutTemplate>
21: <ItemTemplate>
22: <tr>
23: <td><%# Eval("id_kat") %></td>
24: <td><%# Eval("nama_kat") %></td>
25: </tr>
26: </ItemTemplate>
27: <EmptyDataTemplate>
28: No Record Found
29: </EmptyDataTemplate>
30: </asp:ListView>
31: </div>
32: </form>
Menggunakan GroupTemplate
Anda dapat menggunakan ListView GroupTemplate untuk mengelompokan beberapa item. GroupTemplate berguna ketika anda ingin menampilkan multiple column pada ListView.
Contoh menggunakan GroupTemplate (ListGroup.aspx’)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsPhoto" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Photo]"></asp:SqlDataSource>
8: <asp:ListView ID="lvPhoto" runat="server"
9: GroupItemCount="3" DataSourceID="sdsPhoto">
10: <LayoutTemplate>
11: <asp:PlaceHolder ID="groupPlaceHolder" runat="server" />
12: </LayoutTemplate>
13: <GroupTemplate>
14: <div>
15: <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
16: </div>
17: </GroupTemplate>
18: <ItemTemplate>
19: <asp:Image ID="imgPhoto" Width="200px" ImageUrl='<%#
20: Eval("namafile","~/Photo/{0}") %>' runat="server" />
21: </ItemTemplate>
22: </asp:ListView>
23: </div>
24: </form>
Contoh Membuat Master Details dengan ListView (ListMasterDetail.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsKategori" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Kategori]"></asp:SqlDataSource>
8: <asp:SqlDataSource ID="sdsBerita" runat="server"
9: ConnectionString="<%$
10: ConnectionStrings:MhsConnectionString %>"
11: SelectCommand="SELECT * FROM [Berita]
12: WHERE ([id_kat] = @id_kat)">
13: <SelectParameters>
14: <asp:ControlParameter ControlID="lvKategori"
15: Name="id_kat" />
16: </SelectParameters>
17: </asp:SqlDataSource>
18: <asp:ListView ID="lvKategori" runat="server"
19: DataSourceID="sdsKategori" DataKeyNames="id_kat">
20: <LayoutTemplate>
21: <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
22: </LayoutTemplate>
23: <ItemTemplate>
24: <div>
25: <asp:LinkButton ID="lnkSelect" Text='<%#
26: Eval("nama_kat") %>' CommandName="Select"
27: runat="server" />
28: </div>
29: </ItemTemplate>
30: <SelectedItemTemplate>
31: <%# Eval("nama_kat") %>
32: </SelectedItemTemplate>
33: </asp:ListView><br /><br />
34: <asp:ListView ID="lstBerita" runat="server"
35: DataSourceID="sdsBerita"
36: onitemdatabound="lstBerita_ItemDataBound">
37: <LayoutTemplate>
38: <table border="1px" style="border-collapse:collapse;">
39: <thead>
40: <td>No</td><td>Judul</td>
41: <td>Berita</td><td>Tanggal</td>
42: </thead>
43: <tbody>
44: <asp:PlaceHolder ID="itemPlaceHolder"
45: runat="server" />
46: </tbody>
47: </table>
48: </LayoutTemplate>
49: <ItemTemplate>
50: <tr>
51: <td><asp:Label ID="lblNo" runat="server" /></td>
52: <td><%# Eval("judul_berita") %></td>
53: <td><%# Eval("detail_berita") %></td>
54: <td><%# Eval("tanggal") %></td>
55: </tr>
56: </ItemTemplate>
57: </asp:ListView>
58: </div>
59: </form>
Untuk menambahkan urutan pada kolom ‘No’, tambahkan kode pada event ‘ItemDataBound’.
1: private int count = 0;
2: protected void lstBerita_ItemDataBound(object sender,
3: ListViewItemEventArgs e) {
4: count++;
5: Label lblNo = (Label)e.Item.FindControl("lblNo");
6: lblNo.Text = count.ToString();
7: }
Isi dari SelectItemTemplate akan ditampilkan ketika anda memilih salah satu link kategori. Anda dapat manampikan style berbeda pada SelectedItemTemplate.
Perhatikan bahwa linkButton pada ItemTemplate mempunyai property ‘CommandName’ yaitu ‘Select’, berarti jika link tersebut diklik maka perintah select dijalankan. Karena pada ‘lvKategori’ property ‘DataKeyNames’ berisi ‘id_kat’ maka jika user menekan select maka akan dikembalikan nilai ‘id_kat’ dari record yang dipilih.
bersambung next post ^_^
Actual Training 