एएसपी.नेट एमवीसी - नेविगेशन में हाइलाइटिंग वर्तमान पृष्ठ

Question

मुझे आश्चर्य है कि एएसपी.नेट एमवीसी 3 का उपयोग करते समय आपके नेविगेशन में वर्तमान पृष्ठ पर सीएसएस क्लास को जोड़ना संभव है?

<p>@Html.ActionLink("Product Search", "Index", new { controller = "Home" }, new { @class = "current" }) 
       | @Html.ActionLink("Orders", "Index", new { controller = "Orders" }) 
       | @Html.ActionLink("My Account", "MyAccount", new { controller = "Account" }) 
       | @Html.ActionLink("Logout", "LogOff", new { controller = "Account" })</p> 

आप मैं पहली बार एक CSS वर्ग "वर्तमान" यह करने के लिए लागू होने के साथ मेरे नेविगेशन में 4 लिंक देख सकते हैं, मैं होना चाहते हैं: यहाँ मेरी _Layout.cshtml फ़ाइल में मेरे नेविगेशन है मेरे नेविगेशन में अलग-अलग लिंक पर इस वर्ग को जोड़ने/निकालने में सक्षम है, इस पर निर्भर करता है कि उपयोगकर्ता किस पृष्ठ पर है। क्या यह संभव है?

चीयर्स

Answer 1

लेता है मैं इस के लिए एक विस्तार विधि का उपयोग कर की सिफारिश करेंगे। कुछ की तरह:

@using MyExtensionNamespace; 

... 

    @Html.NavigationLink("Product Search", "Index", "Home") 
| @Html.NavigationLink("Orders", "Index", "Orders") 
| @Html.NavigationLink("My Account", "MyAccount", "Account") 
| @Html.NavigationLink("Logout", "LogOff", "Account") 

यह अपना रेजर एक छोटे से क्लीनर रखने को लाभ मिलता है और:

public static HtmlString NavigationLink(
    this HtmlHelper html, 
    string linkText, 
    string actionName, 
    string controllerName) 
{ 
    string contextAction = (string)html.ViewContext.RouteData.Values["action"]; 
    string contextController = (string)html.ViewContext.RouteData.Values["controller"]; 

    bool isCurrent = 
     string.Equals(contextAction, actionName, StringComparison.CurrentCultureIgnoreCase) && 
     string.Equals(contextController, controllerName, StringComparison.CurrentCultureIgnoreCase); 

    return html.ActionLink(
     linkText, 
     actionName, 
     controllerName, 
     routeValues: null, 
     htmlAttributes: isCurrent ? new { @class = "current" } : null); 
} 

तो फिर आप अपने विस्तार के नाम स्थान सहित और सिर्फ अपने विधि को फोन करके अपने दृश्य में उपयोग कर सकते हैं अन्य विचारों में आसानी से पुन: प्रयोज्य है।

Answer 2

आप अपने HTML में अपने वर्ग विशेषता में फिर इस

@{ 
    var currentController = ViewContext.RouteData.Values["controller"] as string ?? "Home"; 
    var currentAction = ViewContext.RouteData.Values["action"] as string ?? "Index"; 
    var currentPage = (currentController + "-" + currentAction).ToLower(); 
} 

@Html.ActionLink("Product Search", "Index", "Home", null, 
       new { @class = currentPage == "home-index" ? "current" : "" }) 
@Html.ActionLink("MyAccount", "MyAccount", "Account", null, 
        new { @class = currentPage == "account-myaccount" ? "current" : "" }) 

Answer 3

@{ 
    var controller = ViewContext.RouteData.Values["controller"].ToString(); 
    var action = ViewContext.RouteData.Values["action"].ToString(); 
    var isActiveController = new Func<string, string, string, string, string>((ctrl, act, activeStyle, inactiveStyle) => controller == ctrl && action == act ? activeStyle : inactiveStyle); 
} 

कर सकते हैं आप कर सकते हैं:

class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")" 

बस एक के अन्य तरीके से @dknaack उसकी उत्तर .. आपके कोड में दोहराने के लिए थोड़ा अधिक सामान्य और कम कार्यक्षमता।

Answer 4

मैं इस करवाने के लिए इस ट्यूटोरियल में प्रयोग किया जाता है, यह बहुत आसान है समझने के लिए और 2 मिनट Hightlight Active menu item

Answer 5

मेरे मामले में, मान लें कि मेरे पास होम पेज और मेनू है। फिर अपने li वर्ग के लिए एक शर्त के रूप में यह सक्रिय है या नहीं करने के लिए

@{ 
    ViewBag.Title = "Home"; 
    ViewBag.Active = "Home"; 
} 

यह जगह:

एक ViewBag.Active एक प्लेसहोल्डर के रूप होम पेज में इस तरह जोड़े

<li class="@(ViewBag.Active=="Home"? "active" : "")"> 
     <a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a> 
</li>