Posting ini adalah lanjutan dari posting sebelumnya di
Topik yang akan dibahas pada posting kali ini:
- Sorting dengan ListView
- Edit, Delete data dengan ListView
- Insert data dengan ListView
- Sekilas DataPager Control
- Contoh menggunakan DataPager
- Custom Paging
Source code untuk contoh-contoh aplikasi dapat anda download di
Sorting Dengan ListView
Anda juga dapat menambahkan sorting pada ListView control dengan cara merubah property ‘CommandName’ menjadi ‘Sort’ dan ‘CommandArgument’ berisi nama kolom untuk yg akan disorting.
Contoh sorting dengan ListView Control (ListSort.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="lvBerita" runat="server"
9: DataSourceID="sdsKategori">
10: <LayoutTemplate>
11: <table border="1px" style="border-collapse:collapse;">
12: <thead>
13: <tr>
14: <th><asp:LinkButton ID="lnkId" Text="ID"
15: CommandName="Sort" CommandArgument="id_kat"
16: runat="server" /></th>
17: <th><asp:LinkButton ID="lnkNama" Text="Nama
18: Kategori" CommandName="Sort"
19: CommandArgument="nama_kat"
20: runat="server" /></th>
21: </tr>
22: </thead>
23: <tbody>
24: <asp:PlaceHolder ID="itemPlaceHolder"
25: runat="server" />
26: </tbody>
27: </table>
28: </LayoutTemplate>
29: <ItemTemplate>
30: <tr>
31: <td><%# Eval("id_kat") %></td>
32: <td><%# Eval("nama_kat") %></td>
33: </tr>
34: </ItemTemplate>
35: </asp:ListView>
36: </div>
37: </form>
Edit, Delete, Insert Data dengan ListView
ListView menggunakan tag-tag <EditItemTemplate>, <DeleteItemTemplate>, <InsertItemTemplate> untuk inser, edit, delete data. Didalam tag tersebut anda dapat membuat tampilan ketika tombol edit, insert, atau delete ditekan.
Contoh Edit dan Delete data menggunakan ListView (EditList.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 [Kategori]"
7: DeleteCommand="DELETE FROM [Kategori]
8: WHERE [id_kat] = @id_kat"
9: UpdateCommand="UPDATE [Kategori] SET [nama_kat] =
10: @nama_kat WHERE [id_kat] = @id_kat">
11: <DeleteParameters>
12: <asp:Parameter Name="id_kat" Type="Int32" />
13: </DeleteParameters>
14: <UpdateParameters>
15: <asp:Parameter Name="nama_kat" Type="String" />
16: <asp:Parameter Name="id_kat" Type="Int32" />
17: </UpdateParameters>
18: </asp:SqlDataSource>
19: <asp:ListView ID="lvKategori" runat="server"
20: DataKeyNames="id_kat" DataSourceID="sdsKategori">
21: <LayoutTemplate>
22: <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
23: </LayoutTemplate>
24: <ItemTemplate>
25: <div style="border:solid 1px black;width:250px">
26: <h3><%# Eval("nama_kat") %></h3>
27: <p>Id: <%# Eval("id_kat") %></p><hr />
28: <asp:LinkButton id="lnkEdit" Text="{Edit}"
29: CommandName="Edit" Runat="server" />
30: <asp:LinkButton id="lnkDelete" Text="{Delete}"
31: CommandName="Delete" Runat="server"
32: OnClientClick="return confirm('Anda yakin
33: mendelete data?')" />
34: </div>
35: </ItemTemplate>
36: <EditItemTemplate>
37: <div style="border:solid 1px black;width:250px">
38: Nama Kategori :<asp:TextBox ID="txtKat" Text='<%#
39: Bind("nama_kat") %>' runat="server" />
40: <asp:RequiredFieldValidator ID="rfvKat"
41: runat="server" ControlToValidate="txtKat"
42: ErrorMessage="{required}" /><hr />
43: <asp:LinkButton id="lnkUpdate" Text="{Update}"
44: CommandName="Update" Runat="server" />
45: <asp:LinkButton id="lnkCancel" Text="{Cancel}"
46: CommandName="Cancel" Runat="server" />
47: </div>
48: </EditItemTemplate>
49: </asp:ListView>
50: </div>
51: </form>
Contoh insert data menggunakan ListView (InsertList.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsKategori" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: InsertCommand="INSERT INTO [Kategori] ([nama_kat])
7: VALUES (@nama_kat)"
8: SelectCommand="SELECT * FROM [Kategori]">
9: <InsertParameters>
10: <asp:Parameter Name="nama_kat" Type="String" />
11: </InsertParameters>
12: </asp:SqlDataSource>
13: <asp:ListView ID="lvKategori" runat="server"
14: DataSourceID="sdsKategori"
15: InsertItemPosition="FirstItem">
16: <LayoutTemplate>
17: <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
18: </LayoutTemplate>
19: <ItemTemplate>
20: <div style="border:solid 1px black;width:250px">
21: <h3><%# Eval("nama_kat") %></h3>
22: <p>Id Kategori : <%# Eval("id_kat") %></p><hr />
23: </div>
24: </ItemTemplate>
25: <InsertItemTemplate>
26: <div style="border:solid 1px black;width:250px">
27: <h3>Tambah Kategori</h3>
28: Nama Kategori :<asp:TextBox ID="txtKat" Text='<%#
29: Bind("nama_kat") %>' runat="server" /><hr />
30: <asp:LinkButton ID="lnkInsert" Text="{Insert}"
31: CommandName="Insert" runat="server" />
32: </div>
33: </InsertItemTemplate>
34: </asp:ListView>
35: </div>
36: </form>
DataPager Control
DataPager adalah pasangan dari ListView yang digunakan untuk paging halaman. DataPager dapat digunakan oleh semua control yang mengimplementasikan interface IPageableItemContainer. Di ASP.NET 3.5 baru ada satu control yang mengimplementasikan interface tersebut yaitu ListView ^_^
DataPager control mempunyai beberapa property yang penting yaitu:
- PageSize: jumlah data yang akan ditampilkan.
- PagedControlId: ambil atau set control pada halaman.
- Fields: ambil fields yang ada pada DataPager.
- StartRowIndex: ambil index dari item pertama yang ditampilkan.
- MaximumRows: ambil maksimum row yang diambil dari data source.
- TotalRowCount: ambil total number dari items yang ada pada data source.
- NextPreviousPagerFields : untuk menampilkan link dalam bentuk next, previous, first dan last.
- NumericPagerFileds: menampilkan link dalam bentuk numeric.
- TemplatePagerField: membuat custom user interface pada paging.
Contoh menggunakan DataPager (ShowDataPager.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsBerita" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Berita]"></asp:SqlDataSource>
8: <asp:ListView ID="lvBerita" runat="server"
9: DataSourceID="sdsBerita">
10: <LayoutTemplate>
11: <table border="2">
12: <thead>
13: <th>Judul</th><th>Berita</th><th>Tanggal</th>
14: </thead>
15: <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
16: </table>
17: <asp:DataPager ID="dpBerita" PageSize="2"
18: runat="server">
19: <Fields>
20: <asp:NextPreviousPagerField
21: ShowFirstPageButton="true"
22: ShowPreviousPageButton="true"
23: ShowNextPageButton="false"
24: ShowLastPageButton="false" />
25: <asp:NumericPagerField />
26: <asp:NextPreviousPagerField
27: ShowFirstPageButton="false"
28: ShowPreviousPageButton="false"
29: ShowNextPageButton="true"
30: ShowLastPageButton="true" />
31: </Fields>
32: </asp:DataPager>
33: </LayoutTemplate>
34: <ItemTemplate>
35: <tr>
36: <td><%# Eval("judul_berita") %></td>
37: <td><%# Eval("detail_berita") %></td>
38: <td><%# Eval("tanggal") %></td>
39: </tr>
40: </ItemTemplate>
41: </asp:ListView>
42: </div>
43: </form>
Membuat Custom Paging
Jika anda tidak puas dengan default paging yang disediakan, anda dapat menggunakan TemplatePagerField.
Contoh menggunakan DataPager TemplatePagerField (PagerTemplate.aspx)
1: <form id="form1" runat="server">
2: <div>
3: <asp:SqlDataSource ID="sdsBerita" runat="server"
4: ConnectionString="<%$
5: ConnectionStrings:MhsConnectionString %>"
6: SelectCommand="SELECT * FROM
7: [Berita]"></asp:SqlDataSource>
8: <asp:ListView ID="lvBerita" runat="server"
9: DataSourceID="sdsBerita">
10: <LayoutTemplate>
11: <table border="1">
12: <thead>
13: <th>Judul</th><th>Berita</th><th>Tanggal</th>
14: </thead>
15: <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
16: </table>
17: <asp:DataPager ID="dpBerita" runat="server"
18: PageSize="2">
19: <Fields>
20: <asp:TemplatePagerField
21: OnPagerCommand="dpBerita_OnPagerCommand">
22: <PagerTemplate>
23: <asp:LinkButton ID="lnkPrev" Text="{Prev}"
24: CommandName="Previous" runat="server" />
25: <asp:LinkButton ID="lnkNext" Text="{Next}"
26: CommandName="Next" runat="server" />
27: </PagerTemplate>
28: </asp:TemplatePagerField>
29: </Fields>
30: </asp:DataPager>
31: </LayoutTemplate>
32: <ItemTemplate>
33: <tr>
34: <td><%# Eval("judul_berita") %></td>
35: <td><%# Eval("detail_berita") %></td>
36: <td><%# Eval("tanggal") %></td>
37: </tr>
38: </ItemTemplate>
39: </asp:ListView>
40: </div>
41: </form>
Kemudian tambahkan kode berikut pada event ‘OnPagerCommand’ pada TemplateFields.
1: protected void dpBerita_OnPagerCommand(object sender,
2: DataPagerCommandEventArgs e) {
3: e.NewMaximumRows = e.Item.Pager.MaximumRows;
4: switch (e.CommandName) {
5: case "Previous":
6: if (e.Item.Pager.StartRowIndex > 0)
7: e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2;
8: break;
9: case "Next":
10: e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2;
11: break;
12: }
13: }
Dibandingkan dengan GridView, Kombinasi ListView dan DataPager menawarkan fleksibilitas yang lebih besar kepada programmer untuk memodifikasi tampilan dan program. Secara pribadi saya menyarankan penggunaan dua control baru ini daripada control lama seperti GridView, DataList, atau Repeater.
selesai ^_^
Actual Training 