Penggunaan Calender – AJAX Control Toolkit – ASP.NET

Penggunaan komponen AJAX Control Toolkit Calender sebetulnya mirip dengan penggunaan komponen DateTimePicker dipemrograman berbasis desktop. Sebetulnya di ASP.NET sudah ada komponen Calender biasa yang masih menimbulkan proses postback saat terjadi pemilihan tanggal tertentu didalamnya. Dengan menggunakan Calender dari AJAX Control Toolkit, maka proses tidak ada lagi.

Contoh pemakaiannya adalah sebagai berikut :

Pastikan kamu sudah memiliki ASP.NET AJAX Control Toolkit. Jika belum kamu bisa download disini : ASP.NET AJAX Control Toolkit.

Buat solution baru dengan tipe ASP.NET AJAX Web Enabled Website. Kemudian buat folder bin (bisa dengan memilih menu add ASP.NET Folder -> bin saat diklik kanan pada solution explorer) didalam solution. Tambahkan file dll dari AJAX Control Toolkit kedalam folder bin. File AJAXControlToolkit.dll dapat kamu ambil dari folder SampleWebSite/Bin setelah diekstract dari paket hasil download.

Kemudian buat database baru dengan isian data kurang lebih sebagai berikut :

Tanggal	Keterangan
9/1/2008 12:00:00 AM	AC Milan VS Liverpool
9/2/2008 12:00:00 AM	AS Roma VS AJAX
9/3/2008 12:00:00 AM	Celtic VS Chelsea
9/4/2008 12:00:00 AM	Juventus VS Lyon
9/5/2008 12:00:00 AM	Real Madrid VS Arsenal
9/6/2008 12:00:00 AM	Wender Bremen VS Valencia
9/7/2008 12:00:00 AM	Barcelona VS FC.Porto

Kemudian desain tampilan dengan menambahkan CalenderExtender (Dari AJAX Control Toolkit Toolbox), 2 Textbox, 1 Button, Dan 1 GridView Didalam Update Panel sebagai berikut :

Kemudian set properties Triggers pada UpdatePanel1 ke Button1 dengan Event Click.

Berikutnya klik 2 kali pada tombol simpan dan ketikkan listing berikut :

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports system.Data.Sql
Imports System.Data.SqlClient

Partial Class calender2
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
simpanData()
ambilData()
End Sub

Function simpanData()
Dim dbCOnn As SqlConnection
Dim dbReader As SqlDataReader
Dim dbCommand As SqlCommand
dbCOnn = New SqlConnection( _
“Data Source=kazetku;” & _
“Initial Catalog=pemain2;” & _
“User ID=pakadmin;Pwd=pakadmin”)
dbCOnn.Open()
dbCommand = New SqlCommand(“insert into tbl_jadwal values(‘” & TextBox1.Text & “‘,’” & TextBox2.Text & “‘)”, dbCOnn)
dbReader = dbCommand.ExecuteReader()
GridView1.DataSource = dbReader
GridView1.DataBind()
dbReader.Close()
dbCOnn.Close()

End Function

Function ambilData()
Dim dbCOnn As SqlConnection
Dim dbReader As SqlDataReader
Dim dbCommand As SqlCommand
dbCOnn = New SqlConnection( _
“Data Source=kazetku;” & _
“Initial Catalog=pemain2;” & _
“User ID=pakadmin;Pwd=pakadmin”)
dbCOnn.Open()
dbCommand = New SqlCommand(“select * from tbl_jadwal”, dbCOnn)
dbReader = dbCommand.ExecuteReader()
GridView1.DataSource = dbReader
GridView1.DataBind()
dbReader.Close()
dbCOnn.Close()

End Function
End Class

Sekarang jalankan dengan menekan Ctrl + F5. Hasilnya kurang lebih sebagai berikut :

Mungkin jika ada tambahan masukan atau pertanyaan, silahkan posting melalui comment dibawah. Semoga membantu, makasih