ASP.NET MVC _Layout CSS Menü Active
May 2019 (0) Iptv 5/4/2024
ASP.NET MVC ile eğer bir proje geliştiriyor ve _Layout (ASP.NET'de ki Master.Page) yapısını kullanıyorsanız ihtiyaç duyacağınızı düşünüyorum. Hazırlamış olduğunuz web sitelerinin menülerinde ki farklılığı kullanıcılara rahatlıkla yansıtabilirsiniz. Bu işlem oldukça basit gerçekleşiyor. Kullanıcı menüye tıklıyor ve o anda seçili olan menü elamanı diğerlerinden biraz daha farklı görünmesini sağlıyor.
Şimdi gelelim bu işlemi en basit nasıl gerçekleştiririz. MVC'nin bize sunmuş olduğu kolaylıklarla bu işlemi oldukça basit bir şekilde gerçekleştireceğiz. MVC Helpers işimizi oldukça kolaylaştıracak.
Bu konuyu detaylıca bu adresten inceleyebilirsiniz.
Öncelikle Solution Explorer penceresinden Projemize sağ tıklayarak yeni bir klasör oluşturuyoruz.
Ben ismini Helpers yaptım.
Daha sonra oluşturduğumuz klasör üzerine sağ tıklayarak Add > New Item > Class ekliyoruz.
İsmini'de HtmlHelpers.cs yapıyoruz.
Kodları aynen bu şekilde yazıyoruz.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVCProject.Helpers
{
public static class HtmlHelpers
{
public static string ActivePage(this HtmlHelper helper, string controller, string action)
{
string classValue = "";
string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();
if (currentController == controller && currentAction == action)
{
classValue = "active";
}
return classValue;
}
}
}
Daha sonra _Layout sayfamıza gelerek. Sayfamızın en başına oluşturduğumuz Helpers'ı ekliyoruz.
@using MVCProject.Helpers; //MVCProject benim projemin ismi.
_Layout sayfasında ki menü kodlarına gelerek gerekli eklemeleri tamamlıyoruz.
<ul class="topnav">
<li><a href="/Home/Index" class="@Html.ActivePage("Home","Index")">Anasayfa</a></li>
<li><a href="/Home/About" class="@Html.ActivePage("Home","About")">Hakkımızda</a></li>
<li><a href="/Home/Contact" class="@Html.ActivePage("Home","Contact")">İletişim</a></li>
</ul>
Menü kodumuzun içinde ki class="active" kodunu kullanmaktansa her menü elemanının class'ına @Html.ActivePage("Home","Index") kod parçacığını yazıyoruz. Böylece kullanıcı hangi sayfada geziniyor iste o sayfanın class'ını active olarak ekliyor. Diğer class'lar boş kalacaktır.
@Html.ActivePage("Controller Adı","Action Adı") Burada ki ActivePage ise Helpers içinde oluşturmuş olduğumuz sınıf.
