Mengisi ExtJs Combobox dengan menggunakan ASP .Net (CSharp) Web Service
20 Jun
Fiuhh, dah lama ga update blog. Postingan kali ini mengenai web programming. Intinya saya waktu itu lagi butuh cara untuk mengisi combobox yang dibuat pake ExtJs (Sencha) dengan menggunakan ASP .Net Web Service. Berhubung kebanyakan contohnya pake PHP, jadi saya kudu muter2 cari referensi, terutama yang berhubungan dengan ExtJs, ASP .Net, dan JSON (sebagai media pertukaran data). Setelah Googling kesana kemari, berikut cara sederhana untuk mengisi Combobox ExtJs dengan ASP .Net (C#). Disini saya menggunakan .Net Framework 3.5 dan ExtJs versi 3.2.0.
Berikut ini adalah gambar struktur direktori yang saya pakai:
Pastikan library ExtJs sudah diimport ke dalam page dan pada kode kali ini, Combobox akan saya render ke div container dengan id=”content”.
Ok, mari berandai-andai saya punya database (MS SQL) dengan nama Test dan sebuah tabel nama ms_prop yang berisi daftar kode dan nama propinsi seperti tampak pada gambar dibawah ini. Asumsi database berada di local.
Pertama, saya coba dengan membuat c# class sederhana. Class ini saya letakkan di file WebService.asmx setelah class WebService. Class ini saya beri nama ComboBoxNameValue dan berisi method2 getter dan setter untuk nama dan value combo box item.
Langkah berikutnya adalah membuat method untuk mengambil data dari database dan mengembalikan datanya ke dalam combo box. Berikut adalah kodenya (oya pastikan komen pada baris [System.Web.Script.Services.ScriptService] dihilangkan).
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = true)]
public ComboBoxNameValue[] GetData()
{
System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection();
conn.ConnectionString = "Data Source=(local);Initial Catalog=Test;Persist " +
"Security Info=True;User ID=sa;Password=sasa";
System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand();
command.Connection = conn;
command.CommandText = "SELECT * FROM Test.dbo.ms_prop";
// create list collection type of ComboBoxNameValue
List<ComboBoxNameValue> l = new List<ComboBoxNameValue>();
conn.Open();
using (System.Data.SqlClient.SqlDataReader reader =
command.ExecuteReader(System.Data.CommandBehavior.CloseConnection))
{
if (reader.HasRows)
{
while (reader.Read())
{
ComboBoxNameValue c = new ComboBoxNameValue();
c.Value = reader["kode_prop"].ToString();
c.Name = reader["propinsi"].ToString();
// add comboboxnamevalue to the list
l.Add(c);
}
}
}
return l.ToArray();
}
Setelah selesai membuat method di WebService.asmx, berikut adalah menulis kode Javascriptnya sebagai berikut:
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'WebService.asmx/GetData',
method: 'GET',
headers: { 'Content-type': 'application/json; charset=utf-8;' }
}),
// root dari Json Data yang dihasilkan oleh ASP .NET
root: 'd',
fields: [ 'Name', 'Value' ],
autoLoad: true
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'Name',
valueField: 'Value',
// set mode ke local untuk me-load
// data secara manual
mode: 'local',
emptyText: 'Pilih propinsi',
renderTo: 'content'
});
});
Simpan kode tersebut lalu jalankan webform Default.aspx. Kalau berhasil maka akan tampak hasilnya seperti gambar berikut:
Dan berikut ini adalah contoh JSON data yang dihasilkan:
{"d":[{"__type":"ComboBoxNameValue","Name":"Bali","Value":"BAL"},
{"__type":"ComboBoxNameValue","Name":"Bangka Belitung","Value":"BKB"},
{"__type":"ComboBoxNameValue","Name":"Bengkulu","Value":"BKL"},
{"__type":"ComboBoxNameValue","Name":"Banten","Value":"BTN"},
{"__type":"ComboBoxNameValue","Name":"DI Yogyakarta","Value":"DIY"},
{"__type":"ComboBoxNameValue","Name":"Gorontalo","Value":"GOR"},
.....,
{"__type":"ComboBoxNameValue","Name":"Sumatera Utara","Value":"SMU"}]}
Setelah muter2 nyari2 cara agar ASP .NET Web Services mau mengembalikan data sebagai JSON (default sebagai XML) adalah dengan men-set Content Type headers pada HttpProxy dan menggunakan method GET (CMIIW).
Maaf kalo ada yang kurang tepat. Maklum newbie :D. Semoga bermanfaat.
Sumber:
pusing… O_o
hahha, jgn pusing2 dong…. :)) duduk dulu … tarik napas :D
wow.. makhluk apakah gerangan ExtJS… *googling dulu*
makhluk luar angkasa :))
wah mantap banget codingnya…sayang belum belajar asp…jadi..belum gitu ngerti…hehe
trims bro :D saya jg lagi belajar2… masih pemula :D
Ini baru kelihatan programmer nya,,, soalnya biasanya yg nampak fotografer nya… hehehe… sukses yah mas…
OMG, brb ya mas saya mau minum obat sakit kepala dulu :p
ikutan du xD
wah, mas ojat, ini konsumsi anak IT. Aku udah pusying duluan. hehe
grrrrrrrrrrrrrrrrrrrr >.<
ayooo.. tetap semangat ngeblog mas.. )
waah, trims mas sigit :D lagi agak kendor nih semangatnya heheh
nggak ada ilmu bumi yang nggak bisa di pelajari,selagi aku masih hidup,akan terus dan terus belajar
pliss jatt…
not progamming again T_T
LOL :))