Bir Web Tasarımcısı Günlüğü

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.

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.

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…