Asp.net şehir-ilçe Dropdownlist uygulaması

Yapacağımız bu midi programda; Ajax, Dropdownlist, Postback, Updatepanel gibi Asp.net teknolojileri ile karşılaşacağız.

Programımızın ne işe yaradığını konuşalım. Tek başına bir işe yaramıyor, amaç dropdownlist birbirlerini tetiklemesi sonucunda ortaya çıkarabileceğimiz verileri göstermek. İllaki karşınıza gelmiştir; dropdownlist den şehri seçtiğimizde seçilen şehre göre ilçelerin diğer dropdownlist kontrolün de gösterilmesine şahit olmuşsunuzdur.

Programımızda kullandığımız bir diğer vurgulamak istediğim konu ise Ajax UpdatePanel ile sayfayı tamamen sunucuya göndermeden Dropdownlist’in seçili olan verisine göre diğer Dropdownlist’i doldurmak.

Programa geçmeden önce kullanacağımız araç gereçleri sıralayalım; Bir adet ilişkisel veritabanı (üst resimdeki gibi tblsehir(id(int) ,sehir(nvarchar)) ve ilçe(id(int), ilce(nvarchar), sehri(int)) tabloları, tblilce tablosundaki sehri kolonu ile tblsehir kolonundaki id ile birbirine bağlayın!). Görünüm için sayfamıza Ajax ScriptManager, UpdatePanel, eklediğimiz UpdatePanel içerisine 2 adet Dropdownlist ve bir adet etkisiz buton. Burada şehir Dropdownlist’in AutoPostBack özelliğini True yapmayı unutmayın!

İlişkisel veritabanımızı ve sayfamızın dizayn kısmını oluşturduktan sonra kod kısmına geçebiliriz.

İlk önce karmaşaı önlemek için Web.config’e veritabanı bağlantımızı gerçekleştirelim.

[cc lang=”c#”]



[/cc]

Bağlantıdan sonra sayfanın Page_Load’ına aşağıdaki gibi dropdownlist kontrolünü veritabanın dan gelecek şehirler verisi ile dolduruyoruz.

[cc lang=”c#”] protected void Page_Load(object sender, EventArgs e)
{

// DropDownList3 = sehirler kontrolü
// DropDownList4 = ilçeler kontrolü
if (!IsPostBack)
{
string constr = ConfigurationManager.ConnectionStrings[“LocalSqlServer”].ConnectionString;
SqlConnection sql = new SqlConnection(constr);
SqlCommand com = new SqlCommand(“Select id, sehir from tblsehir”, sql);

try
{
sql.Open();
SqlDataReader reader = com.ExecuteReader();

DropDownList3.DataSource = reader;
DropDownList3.DataValueField = “id”;
DropDownList3.DataTextField = “sehir”;
DropDownList3.DataBind();
reader.Close();
}

catch
{
Response.Write(“Bir hata oluştu”);
}

sql.Close();
}
} [/cc]

DropDownList3 yani şehirle listesinin SelectedIndexChanged’ine alttaki kodları yazıyoruz. Burada bağlantıyı globa olarak tanımlayabilirsiniz.
[cc lang=”c#”] protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings[“LocalSqlServer”].ConnectionString;
SqlConnection sql = new SqlConnection(constr);
SqlCommand com = new SqlCommand(“Select id, ilce from tblilce where sehri=” + DropDownList3.SelectedItem.Value, sql);

try
{
sql.Open();

SqlDataReader reader = com.ExecuteReader();

DropDownList4.DataSource = reader;
DropDownList4.DataValueField = “id”;
DropDownList4.DataTextField = “ilce”;
DropDownList4.DataBind();
reader.Close();
}

catch
{
Response.Write(“Bir hata oluştu”);
}

sql.Close();

}[/cc]