ASP.Net ile Sayfa Navigasyon Sistemi

Yazar: Gökhan BAĞCI
Kategori: ASP.NET
Eklenme Tarihi: 15.3.2008 15:43:13



Bu makalemizde site içi navigasyon sisteminden söz edeceğiz. Navigasyondan kastımız kullanıcının sayfaları gezinirken hangi sayfada olduğunu path şeklinde göstererek hiyerarşik bir biçimde sayfaların adreslerini görebilmesini ve gezinebilmesini sağlayacağız.

Bu makalemizde site içi navigasyon sisteminden söz edeceğiz. Navigasyondan kastımız kullanıcının sayfaları gezinirken hangi sayfada olduğunu path şeklinde göstererek hiyerarşik bir biçimde sayfaların adreslerini görebilmesini ve gezinebilmesini sağlayacağız.

Örnek bir navigasyon:  Ana Sayfa  >>  Kategoriler  >>  ASP.Net

Aslında .net içerisinde bu işi sağlayan bir nesne var SiteMapPath. Ancak kullanım kolaylığı açasından çokta basit olduğunu söyleyemeyiz. Yeni başlayan kullanıcıların kullanımda zorlanacağı bir kontroldür. Yapacağımız kontrol hem daha kolay, hemde daha esnek olacağından hem kullanıcılar hemde geliştiriciler için kolaylık sağlayacaktır.

Gelelim nasıl bir sistem tasarlayacağımızı öncelikle bütün sayfalarda bu kontrolü kullanabiliceğimizi düşünürsek bunun için bir user control oluşturacağız. Kontrol içinde daha sonra oluşturacağımız NavigasyonNesnelerini array list ile gönderip, diğer parametrelerle beraber ekran çıktısını oluşturacağız.

Öncelikle NavigasyonNesnesi ?ni tanımlayacağız.

NavigasyonNesnesi.cs

 
public class NavigasyonNesnesi
{
    private string baslik;
    public string Baslik
    {
        get { return baslik; }
        set { baslik = value; }
    }

    private string url;
    public string Url
    {
        get { return url; }
        set { url = value; }
    }

    public enum TargetType
    { 
        _blank,
        _self
    }
    private TargetType target;
    public TargetType Target
    {
        get { return target; }
        set { target = value; }
    }

    public NavigasyonNesnesi(string nBaslik, string nUrl, TargetType nTarget)
    {
        baslik = nBaslik;
        url = nUrl;
        target = nTarget;
    }
}
 
 

 
Baslik: Ekran çıktısında görüntülenecek alan.
Url: Eklenen navigasyonun yönlendirileceği alan.
Target: Yönlendirme tipi (Ör: Aynı Sayfada, Farklı Sayfada gibi...)
 
 

Nesnemizi tanımladıktan sonra sayfalarda kullanacağımız Navigasyon user controlünü oluşturacağız.

Navigasyon.ascx


<%
@ Control Language="C#" AutoEventWireup="true" CodeFile="Navigasyon.ascx.cs" Inherits="Navigasyon" %>
<!-- temp kod kısmında oluturduğumuz string tipinde bir değişken -->
<%= temp %>
 

Navigasyon.ascx.cs


public
string temp;
public enum StyleTip

    Style,
    Class
}

public void Yukle(ArrayList alMenu, StyleTip StyleTipi, string LinkCSS, string TextCSS, string Ayrac)
{
    //alMenu arraylistine eklediğimiz NavigasyonNesneleri içinde dönüyoruz...
    for (int i = 0; i < alMenu.Count; i++)
    {
        //Dönen her değeri NavigasyonNesnesi tipine çeviriyoruz...
        NavigasyonNesnesi nn = (NavigasyonNesnesi)alMenu[i];
        //nn.Url 'nin boş değer alıp almadığını kontol ediyoruz. 
        //Boş ise normal text, değilse link haline çevireceğiz...
        if (String.IsNullOrEmpty(nn.Url))
        {
            //Bu kısma düşen nesnenin text tipinde olduğunu anlıyoruz...
            //StyleTipi.ToString() ile girilen CSS bilgilerinin style ya da class mı? olduğunu belirtiyoruz...
            //TextCSS normal text yazılar için kullanacağımız CSS biçimi...
            //nn.Baslik eklediğimiz NavigasyonNesnesi'nin başlğı...
            //Ayrac bölümler arasında kullanılacak text değer... Bu kısımda isterseniz HTML değerde gönderebilirsiniz...
            //Ör: "<b> >> </b>" gibi...
            temp += "<span " + StyleTipi.ToString() + "=\"" + TextCSS + "\">" + nn.Baslik + "</span>" + Ayrac;
        }
        else
        {
            //Bu kımda düşenlerin ise link şeklinde olacağını anlıyoruz...
            //nn.Target.ToString() linkin açılma tipi...
            //.nn.Url sayfa adresi...
            //StyleTipi, LinkCSS, nn.Baslik ve Ayrac yukarıdaki gibi aynı işlevlere sahip...
            temp += "<a target=" + nn.Target.ToString() + " href=\"" + nn.Url + "\" " + StyleTipi.ToString() + "=\"" + LinkCSS + "\">" + nn.Baslik + "</a>" + Ayrac;
        }
    }
    //Bu kısımda en son eklenen fazlalık olan ayracı kaldırıyoruz...
    temp = temp.Remove(temp.Length - Ayrac.Length);
}
 

User controlümüze oluşturduktan sonra projemize herhangi bir sayfa ekliyoruz ve içerisine oluşturmuş olduğumuz Navigasyon.ascx dosyasını sürüklüyoruz. Bu işlemi gerçekleştirdikten sonra Yukle methodu ile navigasyonumuzu oluşturacağız.

Default.aspx


<%
@ Register Src="Navigasyon.ascx" TagName="Navigasyon" TagPrefix="uc1" %>
<uc1:Navigasyon ID="Navigasyon1" runat="server" />
 

Default.aspx.cs


protected
void Page_Load(object sender, EventArgs e)
{
    //alMenu ile NavigasyonNesnelerimizi tutacağız...
    ArrayList alMenu = new ArrayList();
    //new NavigasyonNesnesi() ile yeni bir Navigasyon nesnesi tanımlayacağız,
    //Sırasıyla Baslik, Url ve Target özelliklerini belirleyeceğiz...
    //NavigasyonNesnesi.TargetType._self ile yönlendirmeyi aynı sayfada, 
    //NavigasyonNesnesi.TargetType._blank ile de farklı bir sayfada açabiliriz...
    alMenu.Add(new NavigasyonNesnesi("Ana Sayfa", "Default.aspx", NavigasyonNesnesi.TargetType._self));
    //Bu kısımlarda linklemeler size kalmış Ör. kategori sayfası için QueryString ile farklı bir sayfada gönderebilirsiniz vs...
    alMenu.Add(new NavigasyonNesnesi("Kategoriler", "Kategori.aspx?KategoriID=2", NavigasyonNesnesi.TargetType._blank));
    alMenu.Add(new NavigasyonNesnesi("ASP.Net", String.Empty, NavigasyonNesnesi.TargetType._self));
    //Bütün bölümeri oluşturduktan sonra Sırasıyla NavigasyonNesnelerini, CSS Tipini, LinkCSS, TextCSS ve Ayracı gönderebilirsiniz...
    //CSS bölümlerinde görldüğü gibi "color: red; text-decoration: underline;" şeklinde gönderebiliriz...
    //ya da StyleTipini Class olarak belirttip daha önce tanımladığımız her hangi bir css classını değer olrak atayabiliriz...
    Navigasyon1.Yukle(alMenu, Navigasyon.StyleTip.Style, "color: red; text-decoration: underline;", "color: red; text-decoration: none;", " >> ");
}
 

Projemizi derleyip çlıştırdığımızda aşağıdaki gibi bir ekran görüntüsü oluşturmuş olacağız...



Makale Dosyaları:

http://rapidshare.com/files/99704485/expNavigasyon.rar
(Not: Dosyanın direkt download özelliği vardır. Sağ tıklayıp ?Hedefi Farklı Kaydet? seçeneği ile beklemeden, hızlı bir şekilde indirebilirsiniz.)

Başka bir makalemde görüşmek dileğiyle...

Gökhan BAĞCI
Microsoft Certified Professional
gokhanbagci.info