Blog Detay


Asp.net te Kategorileme ve Accordion Menü

Asp.net te Kategorileme ve Accordion Menü
Ekleme Tarihi:24 Temmuz 2013 16:32:12
Kategori:ASP.NET
Etiketler:Accordion Menü

Arkadaşlar şimdi size Kategori ekleme Alt Kategori eklemeyi ve bunları çekmeyi basit bir şekilde anlatıcam.

İlk başta yapmamız gereken Sql serverımızı açıp bir veritabanı eklemek.veritabanına istediğiniz adı koyabilirsiniz..

Ben eticaret dedim..Şimdide bir tablo açalım..Benim tablomun adı kategori...

Geçelim tablonun alanlarına.. kategoriId,kategoriAdi,ustKategoriId...ust kategoride yazdıkki kategori ile alt kategoriyi birbirinden ayıralım.

Tablo Ekleme kodu:

 
CREATE TABLE kategori
(
   kategoriId INT NOT NULL PRIMARY KEY IDENTITY, 
  kategoriAdi NVARCHAR(50) NULL,> 
   ustKategoriId INT NULL
)

Tablo Görünümü:

Şimdi geçelim kategori ekleme sayfamıza...Bize gerekli olan toollar 1 TextBox,1 Button,1 Label...

KategoriEkle.aspx

Şimdi geçelim c# taraındaki kodlarına Butona çift tıklayıp click olayına geliyoruz..

KategoriEkle.cs

if (IsPostBack)
        {
            //Veritabanına bağlanıyoruz
            SqlConnection conn = new SqlConnection(@"Data Source=server;Integrated Security=true;Initial Catalog=veritabanı");
            //Veritabanına açıyoruz
            conn.Open();
            //Sql komutçuğumuzu yazıyoruz..
            SqlCommand cmd = new SqlCommand("insert into kategori (kategoriAdi) values(@KatAdi)", conn);
            //TextBox tan aldığımız veriyi komut satırındaki değişkene atıyoruz
            cmd.Parameters.AddWithValue("@KatAdi", txtKategori.Text);
            //Gelen veriyi kaydediyoruz..
            int donen = cmd.ExecuteNonQuery();
            //Eğer eklenmise bize bilgi mesajı vermesi için nonqueryi bir değişkene attım..
            if (donen > 0)
            {
                lblBilgi.Text = "Kategori Başarılı Bir Şekilde Eklendi.";
            }
            else
            {
                lblBilgi.Text = "Bir Hata Oluştu";
            }
           //komut parametresini ve bağlantı parametremizi kapatıyoruz..
            cmd.Dispose();
            conn.Close();
        }
        

Şimdi Kategoriyi Eklemiş olduk...

Geçelim alt Kategoriye...

Alt Kategori için gerekli olan toollar 1 TextBox,1 DropDownList,1 Buton,1 Label...

DropDownList ten kategoriyi çekip Alt Kategorinin ust Kategorisi yapmak için lazım..

AltKategoriEkle.aspx

DropDownlist in AutoPostBak True yapalım....

Şimdi Alt Kategori kod kısmına geldik...

İlk önce Page_Load una şu kodları ekliyelim...

 if (!IsPostBack)
        {
            SqlConnection conn = new SqlConnection(@"Data Source=(localdb)\Projects;Integrated Security=true;Initial Catalog=eticaret");
            conn.Open();
            //Sql komutumuzda ustKategoriId sinin boş veya 0 a eşit olanı getir..
            SqlCommand cmd = new SqlCommand("Select * from kategori where ustKategoriId is null or ustKategoriId=0", conn);
            //Şimdi DropDownListte gösterecez Kategorileri..
            ddlKategori.DataSource = cmd.ExecuteReader();
            //Kategori Gorunumu...
            ddlKategori.DataTextField = "kategoriAdi";
            //id değeri
            ddlKategori.DataValueField = "kategoriId";
            //dropdownliste verileri basıyoruz..
            ddlKategori.DataBind();
            //ilk önce şeçiniz... çıkmasını sağlıyoruz...
            ddlKategori.Items.Insert(0, new ListItem("Seçiniz...", "-1"));
            cmd.Dispose();
            conn.Close(); 
        }
        

Geçelim Alt Kategori Ekleme Koduna Butonumuza çift tıklıyalım ve click olayına şu kodları yazalım..

        SqlConnection conn = new SqlConnection(@"Data Source=(localdb)\Projects;Integrated Security=true;Initial Catalog=eticaret");
        conn.Open();
        SqlCommand cmd = new SqlCommand("insert into kategori (kategoriAdi,ustKategoriId) values(@KatAdi,@ustId)", conn);
        cmd.Parameters.AddWithValue("@KatAdi", txtAltKategori.Text);
        //DropDownListden gelen id yi ustkategori parametremize ekliyoruz..
        cmd.Parameters.AddWithValue("@ustId", ddlKategori.SelectedValue);
        int donen = cmd.ExecuteNonQuery();
        if (donen > 0)
        {
            lblBilgi.Text = "Alt Kategori Başarılı Bir Şekilde Eklendi.";
        }
        else
        {
            lblBilgi.Text = "Bir Hata Oluştu";
        }
        cmd.Dispose();
        conn.Close();
        

Geçelim kod çekme ve basit bir acordion menü yapımana...

Kullanacağım toolumuz Data Repeater kontrölü ve iki tane repeater iç içe kullanacaz..

Default.aspx kodu...

 
  <asp:Repeater ID="rptKategori" runat="server" OnItemDataBound="rptKategori_ItemDataBound">
    <ItemTemplate>
     <%#Eval("kategoriAdi") %> 
        <br/>
     <asp:Repeater ID="rptAltKategori" runat="server">
       <ItemTemplate>
        <%#Eval("kategoriAdi") %>
        <br />
    </ItemTemplate>
    </asp:Repeater>
   </ItemTemplate>
  </asp:Repeater>  

Şimdide  geldik c# kodlarına...

Page_Load Eventine gelip Repeater içerisine Ana Kategorilerimizi Çektirelim.

Default.cs kodu...

SqlConnection conn = new SqlConnection(@"Data Source=(localdb)\Projects;Integrated Security=true;Initial Catalog=eticaret");
        conn.Open();
        SqlCommand cmd = new SqlCommand("Select * from kategori where ustKategoriId is null or ustKategoriId=0", conn);
        rptKategori.DataSource = cmd.ExecuteReader();
        rptKategori.DataBind();
        cmd.Dispose();
        conn.Close();
        

Şimdi gelelim ikinci Repeterın kodlarına yani Alt Kategoriyi çekeceğimiz koda.

Ana Kategoriler her döndüğünde Alt kategorinin kontrol edilmesi için rptKategori ye ItemDataBound eventi oluşturmamız gerekiyor.

 
 protected void rptKategori_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        //İç tarafdaki rptAltKategori kontrolüne erişiyoruz ve rpt değişkenine atıyoruz
        Repeater rpt = (Repeater)e.Item.FindControl("rptAltKategori"); 
        SqlConnection conn = new SqlConnection(@"Data Source=(localdb)\Projects;Integrated Security=true;Initial Catalog=eticaret");
        conn.Open();
        //Ana Kategoriye bağlı alt kategorileri seçiyoruz
        SqlCommand cmd = new SqlCommand("Select * from kategori where ustKategoriId=" + Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "kategoriId").ToString()), conn);
        rpt.DataSource = cmd.ExecuteReader();
        rpt.DataBind();
        cmd.Dispose();
        conn.Close();
    }

Şimdide buna ufak bir Javascript kodu ekliyelim.böylelikle alt kategorileri gizlemiş olalım...

<script type="text/javascript">
 
        function show(id) {
 
            obj = document.getElementById(id);
 
            if (obj.style.display == "block") {
 
                obj.style.display = "none"
 
            }
 
            else {
 
                obj.style.display = "block"
 
            }
 
        }
    </script>
    

En son sayfamızın haline gelelim gerekli düzenlemeleri yapalım..

.aspx

 
<asp:Repeater ID="rptKategori" runat="server" OnItemDataBound="rptKategori_ItemDataBound">
 <ItemTemplate>
<a href="javascript:show(<%#Eval("KategoriId")%>)" style="color:#808080;text-decoration:none">
<%#Eval("KategoriAdi") %>
</a>
     <br>
      <div id='<%#Eval("kategoriId")%>' style="display:none">
      <asp:Repeater ID="rptAltKategori" runat="server">
          
          <ItemTemplate>
<div style="margin:0px;padding:0px 0px 0px 10px;color:#000;width:120px;">
       <%#Eval("kategoriAdi") %>
    </div>
          </ItemTemplate>
          
      </asp:Repeater>
      </div>
  </ItemTemplate>
</asp:Repeater>
 

İstediğiniz gibi div ekleyip css leri ona göre düzenleyin color,background,font size vs...

Yorumlar (2 Yorum)

  • avatar

    Raj
    06 Mayıs 2014 19:58:46

    Office SoftwareSoftware Protection Platform 서비스에서 중지하고 덮으시고 시작 또는 명령프롬프트 관리자관리자 권한으로 실행후 net stop ossvppc (중지) 덮어주시고덮어주시고 net start ossvppc (시작)



  • avatar

    salih
    16 Ağustos 2015 13:05:22

    menüyü kendim ul li lerle oluşturdum databaseden çağırarak. ama tıklama olayı yok. tıkladığım menü itemi nasıl yazdırabilirim



Yorum Yazın

*Zorunlu Alanlar

Facebook

Sayfanın Başına Dön