Skip to content
Eylül 10, 2006 / Erkan

C# İle XML Tabanlı Ağaç Menü (Tree Menu) Tasarımı


Ağaç menüler (tree menu) web sitelerinde bağlantıları kategorize edebilmek ve anlaşılması kolay hale getirebilmek için oldukça kullanışlıdırlar. Bugünkü yazımda C# ile XML tabanlı ağaç menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Menümüze ait taslak görünümü HTML olarak hazırlayalım

<div id="MenuContainer">
<ul id="XmlTreeMenu">
<li><a href="#">Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li>
<li><a href="#">Alt Nesne 2</a></li>
<li><a href="#">Alt Nesne 3</a></li></ul></li>
<li><a href="#">Nesne 2</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li></ul></li>
<li><a href="#">Alt Nesne 2</a></li></ul></li></ul></li>
<li><a href="#">Nesne 3</a></li></ul>
</div>


Menümüzü CSS ile şekillendirelim

<style type="text/css">
#MenuContainer{
width: 300px;
background-color: #F8F8F8;
}

#XmlTreeMenu li{
font-family: verdana;
font-size: 12px;
margin-top: 5px;
}

#XmlTreeMenu a{
color: #000000;
text-decoration: none;
padding: 2px;
}

#XmlTreeMenu a:hover{
color: #ffffff;
background-color: #999999;
}
</style>

Bu aşamadan sonra artık programlamasını yapabileceğimiz taslak bir ağaç menüye sahip olduk.

Tree Menu HTML

Artık taslak menümüz üzerinden dinamik kodlamaya geçebiliriz. Tabiki dinamik kodlamaya geçmeden önce VS Studiomuz’da yeni bir web projesi oluşturuyoruz. Oluşturduğumuz bu web projesine menümüze ait xml dosyasını koyacağımız “_XmlData” adlı yeni bir klasör oluşturalım.

Menümüz İçin Xml Dosyası Oluşturalım

Daha önceden oluşturduğumuz _XmlData klasörüne faremizin sağ tuşu ile tıklayalım çıkan menüden “Add New Item” seçeneğini seçelim. Karşımıza çıkan pencereden xml dosyası seçip adını “MenuData.Xml” yapalım.

MenuData.Xml dosyası

<?xml version="1.0" encoding="utf-8" ?>
<data>
  <MenuItem ItemText="Programlama"
            ItemUrl="#"
            ItemTitle="Programlama"
            ItemTarget="_parent">
    <MenuItem ItemText="C#"
              ItemUrl="#" ItemTitle="C#"
              ItemTarget="_parent"></MenuItem>
    <MenuItem ItemText="VB .Net"
              ItemUrl="#"
              ItemTitle="Vb .Net"
              ItemTarget="_parent"></MenuItem>
    <MenuItem ItemText="C++"
              ItemUrl="#"
              ItemTitle="C++"
              ItemTarget="_parent"></MenuItem>
  </MenuItem>
  <MenuItem ItemText="Linkler"
            ItemUrl="#"
            ItemTitle="Linkler"
            ItemTarget="_parent">
    <MenuItem ItemText="WebSiteleri"
              ItemUrl="#"
              ItemTitle="WebSiteleri"
              ItemTarget="_parent">
      <MenuItem ItemText="WebTasarimcisi"
                ItemUrl="http://www.webtasarimcisi.com"
                ItemTitle="WebTsaarimcisi.Com"
                ItemTarget="_blank">
        <MenuItem ItemText="Ana Sayfa"
                  ItemUrl="#"
                  ItemTitle="Web Tasarimcisi Ana Sayfa"
                  ItemTarget="_parent"></MenuItem>
      </MenuItem>
      <MenuItem ItemText="Google"
                ItemUrl="http://www.google.com"
                ItemTitle="Google.com"
                ItemTarget="blank"></MenuItem>
    </MenuItem>
  </MenuItem>
  <MenuItem ItemText="Hakkında"
            ItemUrl="#"
            ItemTitle="Hakkında"
            ItemTarget="_parent"></MenuItem>
</data>

Xml dosyamızı da oluşturduğumuza göre, menümüzün programlamasına geçebiliriz. Öncelikle sayfamıza “System.Xml” ad uzayını ve bir adet asp literal control’ü ekliyoruz ve daha sonra kod kısmında aşağıdaki kodlamayı yapıyoruz.

Xml Menu C# Kodu

protected void Page_Load(object sender, EventArgs e)
    {
        CreateXmlTreeMenu();
    }

private void CreateXmlTreeMenu()
    {
        XmlDataDocument xdd = new XmlDataDocument();
        xdd.Load(Server.MapPath("~/_XmlData/MenuData.xml"));
        string strMenu = string.Empty;
        strMenu += "<div id=\"MenuContainer\">";
        strMenu = GetAllChildElements(strMenu, xdd);
        strMenu += "</div>";
        this.Literal1.Text = strMenu;
    }

private string GetAllChildElements(string strMenu, 
        XmlElement elm)
    {
        if (elm.ChildNodes.Count > 0)
        {
            strMenu += "<ul>";
            foreach (XmlElement celm in elm.ChildNodes)
            {
                strMenu += "<li>";
                strMenu += "<a ";
                if (celm.GetAttribute("ItemUrl") != null)
                    strMenu += "href=\"" + this.ResolveUrl(
                    celm.GetAttribute("ItemUrl")) + "\" ";
                if (celm.GetAttribute("ItemTitle") != null)
                    strMenu += "title=\"" + 
                        celm.GetAttribute("ItemTitle") 
                        + "\" ";
                if (celm.GetAttribute("ItemTarget") != null)
                    strMenu += "target=\"" + 
                        celm.GetAttribute("ItemTarget") 
                        + "\" ";
                strMenu += ">";
                if (celm.GetAttribute("ItemText") != null)
                    strMenu += celm.GetAttribute("ItemText");
                strMenu += "</a>";
                strMenu = GetAllChildElements(strMenu, celm);
                strMenu += "</li>";
            }
            strMenu += "</ul>";
        }
        return strMenu;
    }

private string GetAllChildElements(string strMenu, 
        XmlDataDocument xdd)
    {
        strMenu += "<ul id=\"XmlTreeMenu\">";
        foreach (XmlElement elm in 
            xdd.DocumentElement.ChildNodes)
        {
            strMenu += "<li>";
            strMenu += "<a ";
            if (elm.GetAttribute("ItemUrl") != null)
                strMenu += "href=\"" + this.ResolveUrl(
                elm.GetAttribute("ItemUrl")) + "\" ";
            if (elm.GetAttribute("ItemTitle") != null)
                strMenu += "title=\"" + 
                    elm.GetAttribute("ItemTitle") 
                    + "\" ";
            if (elm.GetAttribute("ItemTarget") != null)
                strMenu += "target=\"" + 
                    elm.GetAttribute("ItemTarget") 
                    + "\" ";
            strMenu += ">";
            if (elm.GetAttribute("ItemText") != null)
                strMenu += elm.GetAttribute("ItemText");
            strMenu += "</a>";
            strMenu = GetAllChildElements(strMenu, elm);
            strMenu += "</li>";
        }
        strMenu += "</ul>";
        return strMenu;
    }

Yukarıdaki kodlamayı projemize ekledikten sonra, artık projemizi çalıştırıp sonuçları görebiliriz.

Tree Menu

Yukarıdaki kodları geliştirerek, kendinize görsel ve işlevsellik açısından daha iyi dinamik menüler tasarlayabilirsiniz.

Herkese Kolay Ve İyi Kodlamalar Diliyorum…

6 Yorum

Yorum Yapın
  1. Evren / Oca 17 2007 11:45 pm

    Bu kodu kendi sitemde veya ticari sitede kullanabilir miyim?

  2. Erkan / Oca 18 2007 2:03 am

    Tabiki kullanabilirsiniz.

  3. cenk ışıtan / Ağu 10 2007 5:17 pm

    bakın ben tree yapısı ile veritabanına eklentiler yapmak istiyorum bana bununla ilgili yardımcı olabilirseniz msn adresim aynı zamanda

    yani tree açılacak ben alttan eklenecek bilgiyi bir textboxa yazacağım ve kaydet butonuna basınca kaydedilecek
    nasıl yaparız bunu

  4. safter / Tem 9 2008 2:44 pm

    veri tabanından b,b+ ve b# yapılarını kullanarak veri çekmem gerek bununla ilgili döküman kod yada benzeri bilgi aktarımı yapabilirseniz cok makbule geçecek mail adresim mevcut sanırım, şimdiden teşekkürler…

  5. Serkan / Haz 17 2009 2:07 pm

    ben bu kismi anlayamadim ‘ Öncelikle sayfamıza “System.Xml” ad uzayını ve bir adet asp literal control’ü ekliyoruz ‘ biraz acarmisiniz.?

    • Erkan / Haz 17 2009 10:14 pm

      Merhaba Serkan,

      Kod dosyasının (.cs uzantılı) üst bölümüne “using System.Xml;” eklemelisin daha sonrada aspx sayfasının tasarım bölümüne “asp:literal” literal kontrolü ekleyebilirsin….

      Fakat çıktıyı yazdırmak için illa literal kullanmana gerek yok… Asp net’e ait başka kontrolleri kullanarak yada en basitinden Response.Write(strMenu); kullanarakta çıktıyı sayfana yazdırabilirsin…

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: