AJAX: Menggunakan CascadingDropdown

Banyak kasus, ketika kita mempunyai 2 atau lebih dropdownlist yang saling berkaitan dimana dropdown kedua atau ketiga melakukan bind data berdasarkan informasi dropdownlist pertama. CascadingDropdown adalah salah satu tool yang tersedia di AJAX control toolkit. Meski tool ini sudah tersedia sejak lama, tapi saya belum pernah menggunakannya. Di projek terakhir, saya baru mempunyai kesempatan untuk menerapkan tool ini untuk menampilkan informasi propinsi, kabupaten dan kecamatan di dropdownlist. Ketika dropdown propinsi dipilih, dropdown kabupaten akan menampilkan data kabupaten yang ada di propinsi yang di pilih di dropdown pertama, begitu juga dropdown kecamatan, akan menampilkan data kecamatan di kabupaten yang terpilih di dropdown kabupaten.

Untuk catatan kali ini, saya buat tiga dropdownlist untuk propinsi, kabupaten dan kecamatan.

<table>
    <tr>
        <td>Propinsi:</td>
        <td><asp:DropDownList ID="ddlpro" runat="server" >
            </asp:DropDownList>
		</td>
	</tr>
	<tr>
		<td>Kabupaten:</td>
		<td><asp:DropDownList ID="ddlkab" runat="server">
			</asp:DropDownList>
		</td>
	</tr>
	<tr>
		<td>Kecamatan:</td>
		<td>
			<asp:DropDownList  ID="ddlkec" runat="server">
			</asp:DropDownList>
		</td>
	</tr>
</table>

Tambahkan file webservice ke projek. Beri nama “wilayah.asmx”

Buka file codebehind dari webservice (wilayah.vb), tambahkan kode berikut

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports AjaxControlToolkit
Imports System.Collections.Specialized
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient

Tambahkan kode berikut dibagian awal webservis

<System.Web.Script.Services.ScriptService()> _

sehingga hasilnya seperti berikut

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Wilayah
    Inherits System.Web.Services.WebService

Buat method untuk bind data propinsi ke dropdownlist pertama

<WebMethod()> _
Public Function GetPropinsi(ByVal knownCategoryValues As String, ByVal category As String) _
As CascadingDropDownNameValue()
	Dim conn As New SqlConnection(koneksi)
	Dim cmd As New SqlCommand()
	cmd.Connection = conn
	cmd.CommandText = "SELECT KD_PROPINSI, NM_PROPINSI FROM ref_Mst_Propinsi ORDER BY NM_Propinsi"
	cmd.CommandType = CommandType.Text

	conn.Open()
	Dim dt As New DataTable
	Dim dtAdapter As New SqlDataAdapter()
	dtAdapter.SelectCommand = cmd
	dtAdapter.Fill(dt)
	conn.Close()
	cmd.Dispose()
	conn.Dispose()

	Dim Propinsi As New List(Of CascadingDropDownNameValue)
	For Each row As DataRow In dt.Rows
		Dim idpro As String = row("KD_PROPINSI").ToString()
		Dim nmpro As String = row("NM_PROPINSI").ToString()
		Propinsi.Add(New CascadingDropDownNameValue(nmpro, idpro))
	Next
	Return Propinsi.ToArray()
End Function

Perhatikan kode diatas, webmethod boleh mempunyai nama bebas, tapi parameter haruslah ‘knownCategoryValues‘ dan ‘category‘ serta outputnya haruslah “CascadingDropDownNameValue()

Buat method kedua untuk bind data kabupaten ke dropdownlist kedua

<WebMethod()> _
Public Function GetKabupaten(ByVal knownCategoryValues As String, ByVal category As String) _
As CascadingDropDownNameValue()
	Dim dtPropinsi As StringDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
	'key string "Propinsi" merupakan value dari atribut Category
	'yang di set di kontrol cascadingdropdown
	Dim kdpro As Integer = CInt(dtPropinsi("Propinsi"))

	Dim conn As New SqlConnection(koneksi)
	Dim cmd As New SqlCommand()
	cmd.Connection = conn
	cmd.CommandText = "SELECT kd_kabupaten, nm_kabupaten FROM ref_mst_kabupaten Where kd_propinsi = @kdpro order by nm_kabupaten"
	cmd.CommandType = CommandType.Text
	cmd.Parameters.AddWithValue("@kdpro", CStr(kdpro))

	conn.Open()
	Dim dt As New DataTable
	Dim dtAdapter = New SqlDataAdapter()
	dtAdapter.SelectCommand = cmd
	dtAdapter.Fill(dt)
	conn.Close()
	cmd.Dispose()
	conn.Dispose()

	Dim kabupaten As New List(Of CascadingDropDownNameValue)
	For Each row As DataRow In dt.Rows
		Dim idkab As String = row("kd_kabupaten").ToString()
		Dim nmkab As String = row("nm_kabupaten").ToString()
		kabupaten.Add(New CascadingDropDownNameValue(nmkab, idkab))
	Next
	Return kabupaten.ToArray()
End Function

Buat method ketiga untuk bind data kecamatan ke dropdownlist ketiga

<WebMethod()> _
Public Function GetKecamatan(ByVal knownCategoryValues As String, ByVal category As String) _
As CascadingDropDownNameValue()
	Dim dtPropinsi As StringDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
	Dim kdpro As Integer = CInt(dtPropinsi("Propinsi"))
	Dim dtKabupaten As StringDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
	Dim kdkab As Integer = CInt(dtKabupaten("Kabupaten"))

	Dim conn As New SqlConnection(koneksi)
	Dim cmd As New SqlCommand()
	cmd.Connection = conn
	cmd.CommandText = "SELECT kd_kecamatan, nm_kecamatan FROM ref_mst_kecamatan WHERE (kd_propinsi = @kdPro) AND (kd_kabupaten = @kdKab) order by nm_kecamatan"
	cmd.CommandType = CommandType.Text
	cmd.Parameters.AddWithValue("@kdPro", kdpro)
	cmd.Parameters.AddWithValue("@kdKab", kdkab)

	conn.Open()
	Dim dt As New DataTable
	Dim dtAdapter As New SqlDataAdapter()
	dtAdapter.SelectCommand = cmd
	dtAdapter.Fill(dt)
	conn.Close()
	cmd.Dispose()
	conn.Dispose()

	Dim kecamatan As New List(Of CascadingDropDownNameValue)
	For Each row As DataRow In dt.Rows
		Dim idkec As String = row("kd_kecamatan").ToString()
		Dim nmKec As String = row("nm_kecamatan").ToString()
		kecamatan.Add(New CascadingDropDownNameValue(nmKec, idkec))
	Next
	Return kecamatan.ToArray()
End Function

Setelah ketiga method di webservis selesai dibuat, buka file aspx, dan tambahkan control cascadingdropdown dan AJAX scriptmanager, sehingga kode html sebelumnya menjadi seperti berikut

<table>
    <tr>
        <td>Propinsi:</td>
        <td><asp:DropDownList ID="ddlpro" runat="server" >
            </asp:DropDownList>
			<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server"
				TargetControlID="ddlpro" Category="Propinsi"
				PromptText=".: Pilih Propinsi :." LoadingText="Load Propinsi..."
				ServicePath="Wilayah.asmx" ServiceMethod="GetPropinsi">
			</cc1:CascadingDropDown>
		</td>
	</tr>
	<tr>
		<td>Kabupaten:</td>
		<td><asp:DropDownList ID="ddlkab" runat="server">
			</asp:DropDownList>
			<cc1:CascadingDropDown ID="CascadingDropDown2" runat="server"
                TargetControlID="ddlkab" Category="Kabupaten" ParentControlID="ddlpro"
                PromptText=".:Pilih Kabupaten:." LoadingText="Load Kabupaten..."
                ServicePath="Wilayah.asmx" ServiceMethod="GetKabupaten">
			</cc1:CascadingDropDown>
		</td>
	</tr>
	<tr>
		<td>Kecamatan:</td>
		<td>
			<asp:DropDownList  ID="ddlkec" runat="server">
			</asp:DropDownList>
			<cc1:CascadingDropDown ID="CascadingDropDown3" runat="server"
                TargetControlID="ddlkec" Category="Kecamatan" ParentControlID="ddlkab"
                PromptText=".:Pilih Kecamatan:." LoadingText="Load Kecamatan..."
                ServicePath="Wilayah.asmx" ServiceMethod="GetKecamatan">
			</cc1:CascadingDropDown>
		</td>
	</tr>
</table>

Tambahkan atribut ‘EnableEventValidation=”false”‘ di bagian page.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb"
  EnableEventValidation="false" Inherits="Default2" %>

Semoga bermanfaat. Selamat mencoba
Happy Coding

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 4 Mei 2010, in AJAX, ASP.net and tagged , , , . Bookmark the permalink. 3 Komentar.

  1. Bagus sekali terimakasih

  2. saya telah menjalankan coding seperti panduang diatas
    ketika saya jalankan di setiap DropDownListnya selalu terisi
    [ Method error 500 ] – hanya itu tidak ada nama propinsi yg dari database

    mohon bantuannya mas, apa yang salah ya

    abuTiara

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: