Asp.Net MVC dinamik menü aktifliği verme

Asp.Net MVC dinamik menü aktifliği verme

Merhaba dostlar, kıyırdan Asp.Net MVC üzerinde ki kodlarımı da buraya bırakmak istiyorum sonrasında arayıp bulmak zor oluyor.

Bu yazımda Asp.Net MVC üzerinde kullandığımız menümüze aktiflik vermek için yapmamız gerekenlerden bahsedeceğim. Aktiflik derken kullanıcının girdiği sayfanın menü üzerinden nerede olduğunu veya hangi menü içerisinde olduğunu belirtmemize yarayacak olan belirteçten bahsediyorum.

Öncelikle Asp.Net MVC projemize bir adet Class (Sınıf) ekliyoruz, isminin bir önemi yok dilediğiniz ismi verebilirsiniz. ben Class’ıma “CustomExtendedVoids” demeyi uygun buldum. Sınıf ekleme işleminden sonra oluşturduğumuz Class’ını öncelikle namespace uzayında çıkartmamız gerekiyor, böylelikle başka projelere dahil ettiğimiz zaman namespace hatası almayız. Akabinde hemen static özelliğini kazandırmamız lazım ki dilediğimiz yerden kolaylıkla çağırabilelim methodumuzu. Sonrasında bir kaç satır kod yazıp sihrin gerçekleştiriyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

public static class CustomExtendedVoids
{
    public static string IsActive(this HtmlHelper html,
                              string control,
                              string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control.ToLower() == routeControl.ToLower() &&
                           action.ToLower() == routeAction.ToLower();

        return returnActive ? "active" : "";
    }
}

Peki işlerimiz bununla mı sınırlı tabi ki de değil, artık Razor teknolojisi ile bunu tasarladığımız sayfaların içerisinde direkt olarak kullanabileceğiz.

<ul>
  <li class='@Html.isActive("home", "index")'>Anasayfa</li>
  <li class='@Html.isActive("home", "about")'>Hakkımda</li>
  <li class='@Html.isActive("home", "contact")'>iletişim</li>
</ul>

en basit kullanım ve anlatımıyla yazımı burada sonlandırıyorum. Kod sizinle olsun.

Paylaş :

Bu gönderiyi paylaş

Comments (2)

  • Serhat Bilen cevap

    Son derece faydalı bir içerik olmakla beraber daha sonra bir ihtimal işime yarayabileceğini düşünmekteyim.

    Aralık 15, 2020 , 2:32 pm
    • Fatih BAŞ cevap

      her daim kullanabileceğiniz bir fonksiyon

      Aralık 15, 2020 , 3:15 pm

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.