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#”]
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]
ilce tarafındaki id öbür tabloda şehir id si ilemi pk yoksa şehir ismi ile ilişki kurulamaz.
Dostum ilişkilendirme resmine baktıysan sarı renkle belirttiğim kolonları ilişkilendiriyosun.
Kardesm bu mevzuyu zaten senin sitenden baska bi yerde bulamazdm, ellerine sağlık da bise soracagm ben bunu javascripte nasıl uyarlayabilirm? 🙂 Yardımcı olsan?
hocam kod çok güzel ellerine sağlık fakat bana bu kodun biraz daha gelişmişi lazım ben yazdığım otomasyonda müşterilerin bu bilgilerini aldım ve şuan güncelleme paneli yaptım ve bu panele bilgiler ilk çekildiği anda dropdownlistte müşterinin önceden seçtiği il ilçe görünsün sonra yine bu şekilde çalışsın istiyorumda yardımcı olursanız sevinirim.
Onu cookies lerle yapıcan, burdan ötesine gidememem biraz membership ve cookie tarafını kurcaladın mı istediğin sonuca ulaşırsın.
Sarı ile işaretlediğin başka açıkladığın başka (tblilce tablosundaki sehri kolonu ile tblsehir kolonundaki id ile birbirine bağlayın!)