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:

• http://www.sencha.com/deploy/dev/docs/
• http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx
• http://www.google.com