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.

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.

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…