Bu site emekli olmuştur. Arşiv amaçlı olarak BT AKADEMİ sponsorluğunda yayın hayatına devam etmektedir.




C#nedir?com
  Ana Sayfa .net TV Makaleler Kaynak Kod Haberler Serbest Köşe Canlı Köşe Forum C#nedir? Ekibimiz RSS RSS
YAZAR HAKKINDA
Burak Batur
Burak Batur
http://www.csharpnedir.com/
İletişme geçmek için tıklayın.
1 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: dinamik elemanlarinin hiyerarsik istiyorum. karsimiza kodlari kontrollerin navigation sayfalara sitemap sitemap?i statik studio treeview visual ASP.NET Burak Batur
 
YAZI HAKKINDA
Türü : Makale
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : Başlangıç
Kategori : ASP.NET
Yayınlanma Tarihi : 2.5.2006
Okunma Sayısı : 46597
Yorum Sayısı : 4     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
Silindi
emre TAŞ
yazının devamı >
emre TAŞ
silindi
emre TAŞ
yazının devamı >
emre TAŞ
silindi
emre TAŞ
yazının devamı >
emre TAŞ
silindi
emre TAŞ
yazının devamı >
emre TAŞ
silindi
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Turhal Temizer
Conda install environment.yml Package 23.11.2024
Turhal Temizer
Mac OS/X Removing CUDA 23.11.2024
Burak Selim Şenyurt
Rust ile ECS Yaklaşımını Anlamak 23.11.2024
Burak Selim Şenyurt
Birlikte Rust Öğrenelim Serisi 23.11.2024
  Diğer Herşey
» Makaleler RSS
» Video Gönder
» Makale Gönder
» Serbest Köşeye Yazı Gönder
» Yazar Başvurusu
» C#nedir? Ekibinde Olmalıyım!
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Ana Sayfa / Makaleler / Burak Batur / ASP.NET / ASP.NET 2.0 SiteMap ve Ulaşım kontrolleri
ASP.NET 2.0 SiteMap ve Ulaşım kontrolleri
arkadaşıma gönder
Arkadaşınızın email adresi:
 
Mesajınız:
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon
Bu yazımda ASP.NET 2.0’da Navigation Menüsünde yer alan kontrollerin kullanımını basit bir şekilde ele alacağım. Bu menüdeki kontrolleri kullanabilmek için bir veri kaynağına ihtiyacımız olacak. Veri kaynağı olarak da ASP.NET 2.0’la birlikte gelen SiteMap kontrolünü kullanacağız.

SiteMap kontrolü sitenin hiyerarşik yapısını tanımlayabileceğimiz bir XML dosyasıdır. Bu kontrolü kullanmak için Solution Explorer’dan sitemize bir tane SiteMap kontrolü ekleyeceğiz. Visual Studio 2005 karşımıza aşağıda gördüğünüz gibi bir görüntü getirecek. Bu kontrolün içini hızlı bir şekilde doldurup kullanabilirsiniz. SiteMap’in içini doldururken dikkat etmeniz gereken bir kaç kural var bunlardan biri tek bir tane kök olması, bu kökün içine istediğimiz kadar alt menü ekleyebiliriz. Hatta alt menü altına bir tane alt menü daha ekleyebiliriz. Aşağıdaki kodlarda alt menü eklemenin bir örneğini görüyorsunuz:



<siteMapNode url="" title="KÖK" description="">
    <siteMapNode title="AltMenü1">
        <siteMapNode url="" title="" description="" />
        <siteMapNode url="" title="" description="" />
    </siteMapNode>
    <siteMapNode title="AltMenü2">
        <siteMapNode url="" title="" description="" />
        <siteMapNode url="" title="" description="" />
    </siteMapNode>
</siteMapNode>
Şimdi yukarıdaki kodları değiştirip uygulamamızda kullanacağımız veri kaynağını oluşturalım Uygulamamızda ana sayfamız SiteMap’imizin kökünü oluşturacak ve ana sayfanın alt bölümleri olarak ta Bölüm1 ve Bölüm2 adında iki ayrı alt bölüm oluşturacağız ve bu iki alt bölümden de ikişer ayrı sayfaya ulaşılacak. Yukarıdaki kodları doldurarak bu yapıyı oluşturabiliriz. Yukarıdaki kodları değiştirdikten sonraki kodumuz aşağıdaki gibi olacak.

<?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="default.aspx" title="Ana Sayfa" description="Burasy sizi anasayfaya götürür">
            <siteMapNode title="Bölüm1">
                <siteMapNode url="b1s1.aspx" title="Sayfa 1" description="1. Bölümün 1. Sayfasy" />
                <siteMapNode url="b1s2.aspx" title="Sayfa 2" description="1. Bölümün 2. Sayfasy" />
        </siteMapNode>
        <siteMapNode title="Bölüm2">
                <siteMapNode url="b2s1.aspx" title="Sayfa 1" description="2. Bölümün 1. Sayfasy" />
                <siteMapNode url="b2s2.aspx" title="Sayfa 2" description="2. Bölümün 2. Sayfasy" />
        </siteMapNode>
    </siteMapNode>
</siteMap>



SiteMap’imizi oluşturduktan sonra sıra geldi Naviation Menüsündeki kontrollerin kullanımını anlatmaya. Ama bu kontrolleri anlatmadan önce genel mantığı anlatmak istiyorum. MSDN’den bulduğum soldaki resmi açıklayarak Navigation Menüsündeki kontrollerin SiteMap’i nasıl kullandığını açıklamış olacağım. Resimde sol alttan başlayarak okları takip edersek ilk okun SiteMap’den çıktığını görürüz bu da demektir ki SiteMap veri kaynağı olarak kullanılıyor. Daha sonra .NET Framework’teki XmlSiteMapProvider sınıfı sayesinde XML dosyası XmlSiteMapProvider sınıfı tarafından okunup SiteMapDataSource kontrölü oluşturuluyor. SiteMapPath kontrolü XmlSiteMapProvider sınıfından SiteMap’i direkt kullanabilir. Bu kontrol sitede o an nerede bulunulduğunu ve SiteMap’i kullanarak o anda bulunulan sayfaya göre en üstteki sayfaya kadar hiyerarşik bir link serisi oluşturur. Menü ve TreeView kontrolleri SiteMap’i XmlSiteMapProvider’dan direkt kullanamaz. Bu kontroller XmlSiteMapProvider sınıfının oluşturduğu SiteMapDataSource kontrolü’nü kullanarak bize çıktı verir.

Şimdi teker teker bu kontrollerin kullanımını anlatmaya çalışacağım:

Menü
Projemize bir tane Web User Control ekleyelim. Menü’yü bu UserControl’ün içine konumlandıracağız ve tüm sayfalara bu UserControl’ü ekleyerek Menü’nün tüm sayfalarda görüntülenmesini sağlayacağız. Böylelikle menü’yü değiştirdiğimizde değişiklikleri tüm sayfalara aktarmış olacağız.

Şimdi Navigation meüsünden UserControl’ün üzerine bir tane Menu kontrolü sürükleyip bırakalım.

Şu anda soldaki görünümü elde etmiş olmanız gerekiyor. Şu anda herhangi bir item eklemediğimiz için ve DataSource belirlemediğimiz için bütün item’lar root olarak görünüyor. Az önce oluşturduğumuz SiteMap’i bu kontrole bağladığımız zaman menü’nün itemları da otomatik olarak karşımıza çıkacak.. Bu işlem için Choose Data Source bölümünden seçeneğini seçmemiz gerekiyor. seçeneğini seçtikten sonra karşımıza o an kullanılabilecek veri kaynaklarını gösteren bir pencere açılacak. Buradan daha önce oluşturduğumuz Site Map’i seçeceğiz. Visual Studio 2005 bizim için bir tane DataSource oluşturacaktır. Artık menü kullanılabilir durumdadır. İsterseniz UserControl’ü diğer sayfalara sürükle bırak metodu ile ekleyip menünün çalışıp çalışmadığını test edebiilirsiniz.





UserControl’ü diğer sayfalara sürüklediğinizde bir değişiklik fark etmiş olmalısınız artık siteyi çalıştırmadan anında UserControl’ün içeriğini eklendiği sayfada görebiliyoruz.

Şu anda menümüz çalışıyor ama tüm ayarları varsayılanlarda. Biz bu ayarlar ile oynayıp menümüzü kişiselleştirmek istiyoruz. Öncelikle yönünü belirleyerek başlayalım. Menümüzün yönünü belirlemek için kullandığımız özellik Orientation özelliğidir. Bu özellik altında iki adet seçenek vardır bunlar Horizontal ve Vertical seçenekleridir.

Horizontal özelliği menü’nün elemanlarının yatay bir şekilde dizilmesini sağlar. Vertical ise dikey. Varsayılan ayar Vertical’dır. Bu özelliği Horizontal olarak ayarlıyoruz.

Şimdi sıra geldi Menü’müzün görünümünü ayarlamaya... Öncelikle statik ve dinamik görüntülenme kavramlarını açıklayalım:

Statik Görüntülenme: Sayfanın ilk yüklendiğinde görüntülenen ve devamlı sayfada kalan kısımdır. StaticDisplayLevels özelliği ile kökten başlayarak kaç adet elemanın statik olarak görüntüleneceğini belirler. Minimum ve varsayılan değeri 1’dir. Sizin de fark ettiğiniz gibi projemizde şu anda sadece adını AnaSayfa olarak belirlediğimiz eleman görünüyor. Ama biz Bölüm1 ve Bölüm2’nin de görüntülenmesini istiyoruz. Bu yüzden StaticDisplayLevels özlliğinin değerini 2 yapacağız. Şu anda aşağıdaki görünümü elde ettik...



Dinamik Görüntülenme: Bu bölümse menümüzün Mouse’la üzerine geldiğimizde açılıp görüntülenen bölümüdür. MaximumDynamicDisplayLevels özelliği ile menün statik elemanlarından sonra görüntülenecek dinamik eleman sayısını belirler. Örneğin; Menünün StaticDisplayLevels özelliği 3’e MaximumDynamicDisplayLevels özelliği de 2’ye ayarlanmış olsun. Bu durumda menü son iki elemanı dinamik olacak şekilde ilk üç seviyesi statik olarak görüntülenecektir. Menümüzün görüntülenme şeklini belirledik şimdi de özellikleriyle oynayarak daha güzel görünmesini sağlayalım...

StaticBottomSeparatorImageUrl : Her menü elemanından sonra görüntülenecek bir resim dosyasının URL’sini tutar. Bu özelliği ~/xp4.gif olarak değiştiriyoruz.

StaticEnableDefaultPopOutImage : Alt menüsü olan menü elemanlarının yanına image koyulup koyulmayacağını ayarlayacağımız bir özellik. True olarak bırakıyoruz...

StaticPopOutImageUrl : Alt menüsü olan menü elemanlarının yanına koyulacak image’ın URL’sini buraya yazıyoruz. Bu özelliği ~/arrow_d.gif olarak değiştiriyoruz.

StaticHoverStyle : Bu özellikler serisi Mouse üzerindeyken menünün nasıl davranacağını belirler. Yanındaki kutucuya tıklayıp özelliği genişlettiğimizde oynayabileceğimiz oldukça özellikler karşılaşıyoruz. Sadece yazı tipi ve rengi ile oynuyorum. Mouse üzerine gelince elemanın yazı tipi italik olsun ve rengi de turuncuya dönüşsün istiyorum. Bu sebeple sadece StaticHoverStyle menüsü altındaki Font menüsünden Italic seçeneğini True yapıyorum ve ForeColor’dan da turuncuyu seçiyorum.

StaticSelectedStyle : Bu özellikte seçili olan elemanın nasıl görüntüleneceğini belirler. Kullanımı tıpkı StaticHoverStyle’daki gibi. Burada sadece yazının rengiyle oynamak istiyorum. O anda bulunduğumuz sayfayı işaret eden menü’nün turuncu olmasını istiyorum ve bunun için de sadece StaticSelectedStyle menüsü altındaki ForeColor özelliğini turuncu olarak seçiyorum.

StaticMenuStyle : Bu özellikte statik olarak görüntülenen kısmın genel olarak nasıl görüntüleneceğini belirliyor.

StaticMenuItemStyle : Bu özellik statik olarak görüntülenen kısmın elemanlarının görünümünü belirliyor. Burada fazla değişiklik yapmıyorum sadece StaticMenuItemStyle menüsü altındaki ForeColor özelliğini #3f619a olarak ayarlıyorum.

StaticTopSeparatorImageUrl : Her menü elemanından önce görüntülenecek bir resim dosyasının URL’sini tutar. Bu özelliği de ~/xp4.gif olarak değiştiriyoruz.

Yukarıdaki özelliklilerin hemen hemen aynısı Dinamik kısım için de mevcut ve kullanımı aynı. Dinamik kısım için sadece DynamicHoverStyle, DynamicSelectedStyle, DynamicMenuItemStyle özelliklerini tıpkı Statikteki gibi değiştiriyoruz. Bu işlemden sonra menümüzün tasarımını da bitirmiş olduk. Çalıştırdığımızda Karşımıza oldukça sade ve şık bir JavaScript menüsü gelecek. Bu menüyü gördüğünüz gibi herhangi bir kod yazmadan ve üçüncü parti bir program kullanmadan yaptık. Aşağıda VisualStudio’nun bizim için oluşturduğu kodları görüyorsunuz. Bu kodlara DataSource’da dahil!

<asp:Menu ID="Menu1" runat="server"
 DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2"
 Height="1px" StaticBottomSeparatorImageUrl="~/xp4.gif"
 StaticPopOutImageUrl="~/arrow_d.gif" StaticTopSeparatorImageUrl="~/xp4.gif" Width="242px">
<StaticMenuItemStyle ForeColor="#3F619A" />
<DynamicHoverStyle Font-Italic="True" ForeColor="#FF8000" />
<StaticSelectedStyle ForeColor="#FF8000" />
<DynamicSelectedStyle ForeColor="#FF8000" />
<DynamicMenuItemStyle ForeColor="#3F619A" />
<StaticHoverStyle Font-Italic="True" ForeColor="#FF8000" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Menümüzün elemanlarını herhangi bir DataSource kullanmadan direkt menü’nün Items özelliğinden de ekleyebilirdik. Ancak aşağıda anlatmaya çalıştığım diğer özellikleri de bir arada kullanabilmek içen bir SiteMap kullanmak son derece mantıklı.

TreeView
Projemize SiteHaritasi.aspx adında bir tane sayfa ekleyelim, bu sayfa adından da anlaşılacağı gibi sitemizdeki tüm sayfaları toplu halde hiyerarşik bir yapıda listelesin. Bu işlemler için en uygun görünüm ağaç görünümüdür, elemanlarının açılır kapanır olması şüphesiz herkesin isteyeceği bir durumdur ve kullanım kolaylığı bakımından da oldukça kullanışlıdır. Daha önce böyle bir görünüm oluşturmak için üçüncü parti yazılımlar kullanıyorduk ya da sitenin haritasını manual olarak oluşturuyorduk, bizim uygulamamız için manual olarak site haritası oluşturmak son derece kolay ama onlarca sayfadan oluşan bir sitenin site haritasını elle oluşturmak oldukça can sıkıcı bir durum. Bu işlem için Visual Studio 2005 ile birlikte gelen TreeView kontrolü biçilmiş kaftan. SiteHaritasi.aspx sayfasının üzerine Navigations menüsünden bir tane TreeView kontrolü sürükleyip bırakıyoruz. TreeView kontrolünün elemanlarını da SiteMap’i kullanarak dinamik olarak oluşturacağız. Bu işlem için tahmin ettiğiniz gibi Smart Task menüsünü kullanacağız. Choose Data Source bölümünde New Data Source seçeneğini tıklıyoruz ve daha önce anlattığım gibi SiteMap’i seçerek seçimimizi onaylıyoruz. Visual Studio bizim için bir adet DataSource oluşturuyor ve bunu SiteMap XML dosyası ve TreeView kontrolüne bağlıyor. Şu anda TreeView kontrolümüzü kullanmaya başlayabiliriz işte bu kadar basit.



TreeView kontrolümüzün dizaynını da biraz değiştirelim. TreeView kontrolünün dizaynını kendimiz yukarıda anlattığım gibi kişiselleştirebildiğimiz gibi bizim için Visual Studio’da daha önce tanımlanmış hazır dizaynları da kullanabiliriz. Bu işlem için gene Smart Task menüsünden Auto Format seçeneğine tıklıyoruz. Visual Studio kullanabileceğimiz şablonları bize listeliyor. Buradan MSDN şablonunu seçiyorum ve seçimimi onaylıyorum. Artık TreeView kontrolümüz MSDN’in menüsü gibi görünüyor. Burayı anlatırken bir özellikten daha bahsetmek istiyorum. Smart Task menüsünün en altındaki Show Lines kutusunu görmüş olmalısınız. Bu kutu işaretlendiğinde TreeView kontrolümüz yandaki resimde gördüğünüz görünümü alacaktır.

Site Haritamızı oluşturduk ama hiçbir yerden site haritamıza link vermedik. Menü’yü içine koyduğumuz User Control’ü yeniden açalım ve Menü’nün hemen altına bir tane HyperLink sürükleyip bırakalım, Text özelliğini Site Haritası, NavigateUrl özelliğini de SiteHaritasi.aspx olarak değiştirelim.

SiteMapPath
Bu kontrol şu ana kadar anlattığım kontrollerin içinde kullanımı en basit olanı. Yaptığı iş bize o anda hangi sayfada olduğumuzu göstermek ve bu sayfanın site içinde hiyerarşik olarak nerede olduğunu göstererek hiyerarşik olarak daha üstte bulunan sayfalara link vermek. Bu kontrolün de tüm sayfalarda görünmesi mantıklıdır bu yüzden bu kontrolü de UserControl’ümüzün içine yerleştiriyoruz. Az önce yerleştirdiğimiz HyperLink kontrolün altına bir tane SiteMapPath sürükleyip bırakalım. İşte yapmamız gereken bu şu anda bu kontrol çalışıyor. Smart Task’dan da daha güzel bir görünüm için Auto Format’dan Professional’ı seçiyorum ve ctrl+F5 ile projemi test ediyorum.


Bu makalemde Visual Studio 2005 ile birlikte gelen Navigation Menüsü’nün kullanımından oldukça basit bir şekilde bahsettim. Görüldüğü gibi Visual Studio 2005 ile üçüncü parti bir yazılım kullanmadan etkili menüler yaratabiliyoruz. Tek bir geliştirme ortamından bunların yapılabilmesi oldukça keyifli bir şey ve herhangi bir uyum sorunuyla da karşılaşmıyoruz. Görüşmek dileğiyle.

Makalde anlattığım projeyi buraya tıklayarak indirebilirsiniz.

Burak Batur

Kaynak : MSDN

Makale:
ASP.NET 2.0 SiteMap ve Ulaşım kontrolleri ASP.NET Burak Batur
  • Yazılan Yorumlar
  • Yorum Yaz
MAY
7
2010
 Teşekkürler..
AĞU
17
2009
 Merhabalar.verdiğiniz bilgiler için teşekkür ederim. Bi sorum olacaktı. Orientation seçeneğini sadece static bölümde kullandık. Acaba dinamik kısım içinde orientation veya onun işini yapacak bir yöntem var mı. kısacası ben static kısım gibi dinamik kısmıda yatay yapmak istiyorum..Ankara Belediyesi sitesi gibi. http://www.ankara-bel.gov.tr/TasarimOgeleri/default.aspx
KAS
6
2006
 Teşekkür ederim. Zor anımda derdime derman oldun.
AĞU
1
2006
 Verdiğin bilgiler için teşekkurler burak. Çalışmlarının devamını dilerim.
Sayfalar : 1 
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor