Web sitelerinin çoğu birbirleriyle hiyerarşik bir ilişki içerisinde olan birçok sayfadan oluşmaktadır. Dolaşma kontrolleri ile özellikle de fazla sayıda sayfalar içeren bu Web sitelerinde, sayfalar arasındaki hareketler sırasında kullanıcılara site içerisinde nerede olduklarını anlamalarına yardımcı olan site haritaları oluşturulur. Bu haritalar Web sitelerinin mantıksal bütünlüğü açısından önemli bir yere sahiptir. Ayrıca bu haritalar sayesinde site içerisindeki bütün sayfalara direk bağlantı sağlanabilmektedir.
Dolaşma kontrolleri dahilinde aynı amacı yerine getiren, ancak farklı görüntüler alınmasını sağlayan dört alt yordam vardır. Bunlar aşağıdaki gibidir:
- Pointer (İşaretçi)
- SiteMapPath (Site Haritası Yolu)
- Menu (Menü)
- TreeView (Ağaç Görünümü)
Uygulama
Öncelikle Web sitesinde bulunan sayfaları hiyerarşik bir düzenle içeren ve kullanılan kontrollere kaynak oluşturan Web.sitemap sayfası oluşturulur:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Ana Sayfa" description="">
<siteMapNode url="AltSayfa1.aspx" title="Alt Sayfa 1" description="" >
<siteMapNode url="Bolum1.aspx" title="Bölüm 1" description="" />
<siteMapNode url="Bolum2.aspx" title="Bölüm 2" description="" />
</siteMapNode>
<siteMapNode url="AltSayfa2.aspx" title="Alt Sayfa 2" description="" />
</siteMapNode>
</siteMap>
Bu uygulamadaki Web sitesi bir Ana Sayfa ve onun altında iki adet Alt Sayfa içermektedir. 1. Alt Sayfa da kendi içinde ikiye bölünmüştür. Web.siteMap içerisindeki hiyerarşik düzen, içiçe <siteMapNode> etiketleri yardımıyla sağlanır. Örneğin, en dıştaki etiket Ana Sayfa'nın etiketidir.
Web sitesindeki bütün sayfaların ortak görsel özelliklerinin aynı olmasını, daha kolay yönetilebilir ve programlanabilir olmasını sağlamak amacıyla ASP.NET'inMasterPage (Yönetici Sayfa) sınıfından yararlanılabilir. Bu amaçla proje içerisinde bir MasterPage.master oluşturulur ve Default.aspx sayfası MasterPage.master sayfasına MasterPageFile="~/MasterPage.master" kod parçası kullanılarak yönlendirilir. Kullanılan dolaşma kontrollerinin tümü bu sayfada konumlandırılır ve kodlanır. Web sitesini oluşturan sayfaların her birinde, içeriğin görüntülendiği konumda <asp:ContentPlaceHolder> etiketi yer almalıdır. Örneğin, bu uygulamada MasterPage.master sayfası Web sitesinin Ana Sayfası'dır ve <asp:ContentPlaceHolder> etiketi aşağıdaki gibidir:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
Görüntülenen sayfa Ana Sayfa'dır.
</asp:ContentPlaceHolder>
Diğer sayfaların <asp:ContentPlaceHolder> etiketinin içerisindeki içerik bilgileri tercihe göre farklı olabilir.
SiteMapPath (Site Haritası Yolu)
MasterPage.master sayfasına eklenilen <asp:SiteMapPath> etiketleri ile bu dolaşma kontrolü aktif hale getirilir. MasterPage.master sayfasında, bu etiketin görüntüsü aşağıdaki gibi olur:
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana"
Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
<RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
</asp:SiteMapPath>
Burada PathSeperator (Yol Ayırıcı) olarak belirtilen özellik önemlidir. Haritada Ana Sayfa'dan itibaran bulunulan sayfaya kadarki yolun hangi karakterle ayrıldığını gösterir. Diğer Style (Biçim) etiketleri içerisindeki özellikler ise yazının karakteri, rengi, tipi gibi biçimsel özellikleri belirler.
Menu (Menü)
MasterPage.master sayfasına eklenilen <asp:Menu> etiketleri ile bu dolaşma kontrolü aktif hale getirilir. MasterPage.master sayfasında, bu etiketin görüntüsü aşağıdaki gibi olur:
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6"
DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000"
StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#FFCC66" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
</asp:Menu>
Burada DataSourceID (Veri Kaynağı Numarası) özelliği önemlidir ve mutlaka bir kaynak belirtilmelidir. Diğer özellikler ise Menü kontrolünün görüntüsünü belirler.
Burada özelliği önemlidir ve mutlaka bir kaynak belirtilmelidir. Diğer özellikler ise Menü kontrolünün görüntüsünü belirler.
Bu kodlarla birlikte uygulamanın Web sayfası aşağıdaki şekilde olur.
TreeView (Ağaç Görünümü)
MasterPage.master sayfasına eklenilen <asp:TreeView> etiketleri ile bu dolaşma kontrolü aktif hale getirilir. MasterPage.master sayfasında, bu etiketin görüntüsü aşağıdaki gibi olur:
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Burada Menü kontrolünde olduğu gibi bir kaynak belirlenmeli ve DataSourceID yazılmalıdır. ImageSet (Görüntü Takımı) özelliği Ağaç Görünümü'nde dallar arasında hangi karakterin bulunduğunu belirtir. Yukarıdaki örnekte Arrows (Oklar) karakteri seçilmiştir. Diğer özellikler görüntüyle ilişkilidir.
TreeView ve daha önce kodlanmış olan SiteMapPath ile birlikte Web sayfası aşağıdaki gibi olur:
