Öncelikle veritabanını Tasarlayalım..
Ana kategorileri, alt kategorilerden ayıran hücremiz MainKategori adındaki hücre. Buradaki mantık şu şekilde. Eğer MainKategori alanımız 0 ise bu bir ana kategoridir. Alt kategorileride AnaKategorisi hücresinden anlayacağız. AnaKategorisi hücresindeki sayı herhangi bir kategorinin KategoriId si ile aynı ise bu onun alt kategorisidir. Verileri girilmiş bir tablo örneğine bir göz atalım.
Verileri girilmiş tabloya bakarsak MainKategori hücresindeki 0 olanlar Ana kategoriyi temsil ediyor. Yani Ehliyet Sınavları, OKS Sınavları, ÖSS Sınavları ve Microsoft Sertifika birer Ana kategori.
Trafik, İlk Yardım, Motor kategorileri Ehliyet Sınavları kategorisinin Alt kategorileridir.
Matematik, Coğrafya, Fizik kategorileri OKS Sınavları nın Alt kategorileridir.
Tablomuzun mantığını anladıktan sonra sayfamıza bir repeater kontrolü ekleyelim ve ID sini rpAnaKategori olarak değiştirelim. Biliyorsunuzki Repeater kontrolünün tasarımına Visual Studio Design kısmından müdahale edemiyoruz. Code kısmına girip Tasarımızı html kodları yardımıyla yapmamız gerekecek. Bunun için Repeater kontrolünün içerisine ItemTemplate ekliyoruz ve içerisine kategorilerimizi çektiriyoruz.
<asp:Repeater ID="rpAnaKategori" runat="server">
<ItemTemplate>
<%#Eval("KategoriAdi") %> //Kategori ismini çektirdik.
<br/>
</ItemTemplate>
</asp:Repeater>
Page Load Eventine gelip Repeater içerisine Ana Kategorilerimizi Çektirelim.
SqlConnection baglanti = new SqlConnection(@"Data Source=localhost;Initial Catalog=TestPort;Integrated Security=True;");
//MainKategori=0 ile sadece ana kategorileri çektirmiş olduk
SqlCommand cmdAnaKat = new SqlCommand("Select * from Kategoriler Where MainKategori=0", baglanti);
rpAnaKategori.DataSource = cmdAnaKat.ExecuteReader();
rpAnaKategori.DataBind();
cmdAnaKat.Dispose();
baglanti.Close();
Bu haliyle sadece Ana kategorileri Alt Alta sıralamış olduk. Şimdi Repeaterımın içerisine bir repeater daha koyup adını rpAltKategori yapıp ve Ana kategoriler her dönüşünde Alt kategorilerini kontrol edip, alt kategorisi varsa listelemesini yapalım. Repeaterımızı şu şekilde düzenliyoruz.
<asp:Repeater ID="rpAnaKategori" runat="server">
<ItemTemplate>
<%#Eval("KategoriAdi") %>
<br />
<asp:Repeater ID="rpAltKategori" runat="server">
<ItemTemplate>
<%#Eval("KategoriAdi") %>
<br />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
Gördüğünüz gibi rpAnaKategori Repeaterının içerisine rpAltKategori adında bir Repeatar daha oluşturduk ve içerisine ItemTemplate ekleyip KategoriAdi ni çektirdik. Şimdi yapmamız gereken Ana Kategoriler her döndüğünde Alt kategorileri altına listelemek.
Ana Kategoriler her döndüğünde Alt kategorinin kontrol edilmesi için rpAnaKategori ye ItemDataBound eventi oluşturmamız gerekiyor. rpAnaKategori kontrolünün ilk satırı aşağıdaki gibi olacaktır.
<asp:Repeater ID="rpAnaKategori" OnItemDataBound="rpAnaKategori_ItemDataBound" runat="server">
Şimdi bu Eventi sayfamızın .cs kısmında yazalım.
protected void rpAnaKategori_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Repeater rp = (Repeater)e.Item.FindControl("rpAltKategori"); //İç tarafdaki rpAltKategori kontrolüne erişiyoruz ve rp değişkenine atıyoruz
SqlConnection baglanti = new SqlConnection(@"Data Source=localhost;Initial Catalog=TestPort;Integrated Security=True;");
//Ana Kategoriye bağlı alt kategorileri seçiyoruz
SqlCommand cmdAltKat = new SqlCommand("Select * from Kategoriler where AnaKategorisi=" + Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "KategoriId").ToString()), baglanti);
rp.DataSource = cmdAltKat.ExecuteReader();
rp.DataBind();
cmdAltKat.Dispose();
baglanti.Close();
}
Böylece Ana ve Alt kategorileri Alt Alta çekmiş Olduk. İsterseniz birde buna ufak bir javascript kodu ekleyip Alt kategorileri gizleyelim. İlk olarak Ana Kategori isimleri görünsün, Ana kategorilere tıklandığında alt kategorilerini gösterelim. Ana kategorileri ve Alt kategorileri birbirinden ayırmak için 2 farklı resim kullanalım.
Ana Kategori Resmi (Resim Adı: menukapali.png)
Alt Kategori Resmi (Resim Adı: menuacik.png)
Javascript kodunuzu Head bölümüne ekleyin
<SCRIPT language="javascript">
function show(id) {
obj = document.getElementById(id);
if (obj.style.display == "block") {
obj.style.display = "none"
}
else {
obj.style.display = "block"
}
}
</SCRIPT>
Şimdi Repeaterlarımızda biraz düzenleme yapacağız. Ana ve alt kategorin yanlarına resimlerimizi koyacağız. Alt kategorileri listeleyen rpAltKategori kontrolümüzü gizlenip açılması için bir div tagı içine alacağız. Bu dive erişmemiz için Idsi Ana Kategorinin Id si olacak. Ana kategori ismine link verip javascriptimizdeki show fonksiyonuna KategoriId sini gönderiyoruz.
Bu fonksiyonun yaptığı iş kendisine gelen değeri sayfada bulup display özelliği none ise block yapmak, block ise none yapmak J
<asp:Repeater ID="rpAnaKategori" OnItemDataBound="rpAnaKategori_ItemDataBound" runat="server">
<ItemTemplate>
<img align="absmiddle" src="imajlar/menukapali.png" />
<a href="javascript:show(<%#Eval("KategoriId")%>)">
<%#Eval("KategoriAdi") %>
</a>
<br>
<div id="<%#Eval("KategoriId")%>" style="DISPLAY:none">
<asp:Repeater ID="rpAltKategori" runat="server">
<ItemTemplate>
<img align="absmiddle" src="imajlar/menuacik.png" />
<%#Eval("KategoriAdi") %>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
Evet arkadaşlar şimdi uygulamamızı çalıştırıp kategorilemizi ve repeaterlarımızın şeklini görebiliriz.
Göründüğü gibi Turuncu olanlar Ana Kategori, Mavi olanlar alt kategoridir. Ben daha sonradan Ana ve Alt kategori yazılarına style tanımladım. İç içe 2 tanemi repeater kullanılıyor Tabiki Hayır. İstediğiniz kadar repeatarı iç içe ItemDataBound ları unutmadan kullanabilirsiniz
Hiç yorum yok:
Yorum Gönder