Skip to content
Eylül 8, 2006 / Erkan

C# İle XML Tabanlı Dinamik Menü Tasarımı


Web sitelerinin vazgeçilmez unsuru olan menüler, web tasarımcılarının en çok zaman harcadıkları yerlerden biridir. Bugünkü yazımda “.Net Framework 2.0” platformunda “C#” dili ile basit ve kullanışlı bir tab menü nasıl oluşturabiliriz ondan bahsetmek istiyorum.

Önce Menümüzü HTML Olarak Kodlayalım

<div id="MenuContainer"> 
<ul id="XmlMenu"> 
<li><a href="#">Nesne 1</a></li> 
<li><a href="#">Nesne 2</a></li> 
<li><a href="#">Nesne 3</a></li> 
<li><a href="#">Nesne 4</a></li> 
<li><a href="#">Nesne 5</a></li> 
</ul> 
</div>


Menümüzü CSS ile Şekillendirelim

<style type="text/css"> 
#MenuContainer{ 
width: 100%; 
border-bottom: 1px solid #999999; 
background-color: #f5f5f5; 
height: 31px; 
}  

#XmlMenu{ 
display: inline; 
font-family: verdana; 
font-size: 12px; 
font-weight: bold; 
width: 550px; 
margin: 0 auto; 
list-style: none; 
}  

#XmlMenu li{ 
display: inline; 
float: left; 
margin-left: 10px; 
}  

#XmlMenu a{ 
display: block; 
width: 100px; 
background-color: #336699; 
text-align: center; 
color: #ffffff; 
line-height: 30px; 
border-bottom: 1px solid #FF0000; 
}  

#XmlMenu a:hover{ 
background-color: #FF0000; 
} 
</style>

Evet artık bu aşamadan sonra elimizde oldukça hoş görünen bir tab menümüz oldu.

HTML Menu Preview

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> 
<items> 
<ItemText>Ana Sayfa</ItemText> 
<ItemUrl>~/</ItemUrl> 
<ItemTitle>Ana Sayfaya Gitmek İçin Tıklayınız</ItemTitle> 
<ItemTarget>_parent</ItemTarget> 
</items> 
<items> 
<ItemText>Xml Menu</ItemText> 
<ItemUrl>xmlmenu.aspx</ItemUrl> 
<ItemTitle>XML Menu Sayfası İçin Tıklayınız</ItemTitle> 
<ItemTarget>_blank</ItemTarget> 
</items> 
<items> 
<ItemText>C# Menu</ItemText> 
<ItemUrl>~/xxx/csharpmenu.aspx</ItemUrl> 
<ItemTitle>Ana Sayfaya Gitmek İçin Tıklayınız</ItemTitle> 
<ItemTarget>_parent</ItemTarget> 
</items> 
<items> 
<ItemText>Nesne 3</ItemText> 
<ItemUrl>#</ItemUrl> 
<ItemTitle>Nesne 3 İçin Tıklayınız</ItemTitle> 
<ItemTarget>_parent</ItemTarget> 
</items> 
<items> 
<ItemText>Nesne 4</ItemText> 
<ItemUrl>#</ItemUrl> 
<ItemTitle>Nesne 4 İçin Tıklayınız</ItemTitle> 
<ItemTarget>_parent</ItemTarget> 
</items> 
</data>

Xml dosyamızı da oluşturduğumuza göre, menümüzün programlamasına geçebiliriz. Öncelikle sayfamıza 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) 
    { 
        CreateXmlMenu(); 
    }  

private void CreateXmlMenu() 
    { 
        DataSet ds = new DataSet(); 
        ds.ReadXml(Server.MapPath("~/_XmlData/MenuData.xml"));  

string strMenu = string.Empty; 
        strMenu += 
            "<div id=\"MenuContainer\">"; 
        strMenu += "<ul id=\"XmlMenu\">";  

foreach (DataRow dr in ds.Tables["items"].Rows) 
        { 
            strMenu += "<li>"; 
            strMenu += "<a href=\"" + 
            this.ResolveUrl(dr["ItemUrl"].ToString()) + "\" " + 
            "target=\"" + 
            dr["ItemTarget"].ToString() + "\" " + 
            "title=\"" + 
            dr["ItemTitle"].ToString() + "\">" + 
            dr["ItemText"].ToString() + "</a>"; 
            strMenu += "</li>"; 
        } 
        strMenu += "</li>"; 
        strMenu += "</div>"; this.Literal1.Text = strMenu; 
    }

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

C# Xml 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…

12 Yorum

Yorum Yapın
  1. EVREN / Eyl 10 2006 12:18 am

    merhaba,

    sizin sitenizin sağ tarafında bulunan categories kısmındaki tree şeklindeki menüyü xml ile yapabilirmiyiz?

  2. Erkan / Eyl 10 2006 12:27 am

    Tabiki, sitede yer alan comments başlığı altındaki tree menü xml’den okuma yöntemi ile yapılabilir. Veri tabanından okutarak yaptığımız bir çok işlemi XML dosyasından okutarak yapmamız mümkün.

    Fakat tree menu yapımında kodlama birazdaha karışık ve zahmetli olacaktır, ayrıca XML yapısınıda daha özenli tasarlamak gerekir.

    İleride tree menü tasarımı ile ilgili bir yazı eklemeyi düşünüyorum.

    İlginiz için teşekkür.

  3. Osman AKIN / Eki 10 2006 1:13 pm

    Yazınız güzel. Yalnız html taglarını kodun içinde kullanarak değilde. Kod kısmında elde edilen verileri html kısmında nasıl gösterebiliriz. Diyelimki bir tablom var ve tablo üzerinde başlık, tarih, açıklama gibi table ın herhangi bir td si içerisinde xml den dataset e okuttuğum veriyi nasıl gösterebilirim.
    Teşekkürler

  4. Erkan / Eki 10 2006 6:42 pm

    Html tarafındaki nesnelerinizi kontrol etmenin bir çok yöntemi mevcut benim tavsiyem kesinlikle spagetti kod alışkanlığından kurtulmanız yönünde olacaktır. Yani klasik ASP kodlaması mantığı ile html kodlarınızın arasına ASP .Net kodları eklemeniz ASP.Net’in sunduğu tasarım ile kodlamayı birbirinden ayıran özelliğinden uzaklaşmanız anlamına geliyor.

    Asp .Net ile sapgetti kod yazmadan kod tarafından klasik HTML nesnelerini kontrol etmek istiyorsanız, öncelikle kontrol etmek istediğiniz nesnenenin etiketleri arasına runat=”server” ve id=”xxx” özelliklerini (attribute) eklemeniz gerekecektir.

    Html tablonuzun bir kolonuna asp .net button, datagrid, resim gibi asp .net kontrolleri eklemek istiyorsanız. Aşağıdaki örnek kodlamayı inceleyebilirsiniz.

    HTML tarafı

    <td id=”tdBtn” runat=”server”>

    Kod tarafı

    private void Page_Load(object sender, System.EventArgs e)
    {
    Button btn = new Button();
    btn.Text = “Tamam”;
    btn.Width = 100;
    this.tdBtn.Controls.Add(btn);
    }

  5. edaaa / Ara 27 2006 7:30 pm

    güzel ama daha da canlı efekler lazım bunun içinde daha kapsamlı bir arştırma yapılması gerekiyor..:)

  6. Erkan / Ara 27 2006 10:20 pm

    Merhaba edaaa,

    Evet başlangıç seviyesinde bir yardım. Daha kapsamlı efekler uygulamak kodu kullanacak kişilerin kendi kararı :)

    Belki ileride görsellik açısından daha gelişmiş tab menüler ekleyebilirim sizler için.

  7. Murat Tufekci / Şub 22 2007 9:58 am

    http://www.mt.gen.tr/Menu Db den dinamik menu olursturabilirsiniz var olan bir menu js lib ustune C# ile db ve direk txt den hatta istersen direk text ozelligine atadiginiz kod ile dropdown menu olusturabilirsiniz. iletisim icin murat[at]mt[dot]gen[dot]tr

  8. ferit / Tem 7 2007 2:13 pm

    merhaba nasılsınız ben web tasarımcılığı konusunda sizden yardım istiyorum şu an web tasarımcılığı konusunda çok yeniyim ve cok hevesliyim ama fazla birşey bilmiyorum bu konu hakkında hangi kitaba başvurmalıyım yada hangi konu anlatımlı sitelerden yararlanmalıyım bana biraz yardım edermısin acaba ne dersıniz? ederseniz size şimdiden çok teşekkür ederim cevabınızı bekliyorum cevabınızı hotmail sayfama gönderirseniz sevinirim.teşekkürler

  9. viola_ / Tem 9 2009 8:37 am

    merhaba,
    xml ile web den aldigimiz bir bilgiyi, bir c# programinda nasil kullanabiliriz, yada bu xml kodunu c# projesinin icine gomebilir miyiz?

    simdiden tesekkurler..

  10. Ramazan / Eyl 2 2010 11:59 am

    Merhaba,
    dediğiniz şekilde düzenledim. fakat hem div içerisinde yer alan menucontanier için hemde literal1 için menü oluşuyor. sayfamda bu verdiğiniz kodlara göre 2 adet menü şablonu oluşmaktadır. sorun neden kaynaklanıyor acaba.

    • Erkan / Eyl 17 2010 6:41 pm

      Merhaba Ramazan bey,

      En üstte yer alan HTML kodu sayfanıza eklemenize gerek yoktur.

      HTML kod menünün tableles olarak nasıl hazırlandığını görmeniz açısından örnek olarak eklenmiştir.

  11. Deniz Deniz / Ağu 18 2016 2:16 pm

    öncelikle çok teşekkürler. Kodlar çok sağlıklı bir şekilde çalışıyor yalnız bu oluşturulan menüyü bir Div in içerisinde nasıl gösterebilirim? Bu kodları oluşturduğumuzda sayfanın en üstünde çıkıyor. Ben bu menüleri sayfanın altında göstermek istiyorum nasıl yapabilirim?

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: