Asp.Net Mvc वर्तमान पृष्ठ लिंक तकनीक को हाइलाइट करते हुए?

Question

मुझे मेनू में सक्रिय लिंक को हाइलाइट करने की आवश्यकता है। मेरा मेनू रास्ते में मास्टर पेज में है। मैं इसे लागू करने का सबसे अच्छा तरीका ढूंढ रहा हूं? कोई विचार?

Answer 1

इसे संभालने का सबसे अच्छा तरीका एक HTML सहायक लिखना है। वर्तमान में निष्पादित कार्रवाई प्राप्त करने और मेनू नाम की तुलना करने के लिए आप RouteData.Values["action"] का उपयोग कर सकते हैं और यदि वे मेल खाते हैं तो एक सीएसएस क्लास लागू करें जो इसे हाइलाइट करेगा।

public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper, 
    string action, 
    string text 
) 
{ 
    var menu = new TagBuilder("div"); 
    var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"]; 
    if (string.Equals(
      currentAction, 
      action, 
      StringComparison.CurrentCultureIgnoreCase) 
    ) 
    { 
     menu.AddCssClass("highlight"); 
    } 
    menu.SetInnerText(text); 
    return MvcHtmlString.Create(menu.ToString()); 
} 

और फिर मेनू आइटम प्रस्तुत करने के लिए इस सहायक का उपयोग करें:

<%: Html.MenuItem("about", "About us") %> 
<%: Html.MenuItem("contact", "Contact us") %> 
... 

Answer 2

मैं बहुत आप शुद्ध सीएसएस के साथ ऐसा कर सकते हैं यकीन है। इसमें बॉडी टैग के साथ क्लास चयनकर्ता और फफिंग शामिल है। मैं सप्ताह के हर दिन सहायक विधि के साथ जाऊंगा।

Answer 3

मैं इस समाधान का उपयोग करें: - आपके मेनू में विशेषता डेटा-menuPageId जोड़ने लिंक

<ul class="menu"> 
    <li data-menuPageId="home"> 
      @(Html.Link<HomeController>(x => x.Index(), "Home")) 
    </li> 
    <li data-menuPageId="products"> 
      @(Html.Link<ProductsController>(x => x.Index(), "Products")) 
    </li> 
</li> 

अगला -

पहले वर्तमान पृष्ठ के लिए छिपे हुए फ़ील्ड जोड़ने ईद

<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" /> 

Layout.cshtml को

होम पेज या उत्पाद

जैसे पृष्ठों पर ViewBag.Page प्रारंभिक जोड़ें जोड़ें

और अंत में आप yor Layout.cshtml से इस javascipt संदर्भ

$(function() { 
    var pageIdAttr = "data-menuPageId"; 
    var currentPage = $("#currentPageId").attr("value"); 

    var menu = $(".menu"); 

    $("a[" + pageIdAttr + "]").removeClass("selected"); 
    $("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected"); 
}); 

Answer 4

मैं हमेशा इस समाधान एचटीएमएल भाग

<ul> 
    @Html.ListItemAction("Home Page","Index","Home") 
    @Html.ListItemAction("Manage","Index","Home") 
</ul> 

हेल्पर भाग

public static class ActiveLinkHelper 
    { 
     public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName) 
     { 
     var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"]; 
     var currentActionName = (string)helper.ViewContext.RouteData.Values["action"]; 
     var sb = new StringBuilder(); 
     sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && 
              currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase) 
               ? " class=\"active\">" : ">")); 
     var url = new UrlHelper(HttpContext.Current.Request.RequestContext); 
     sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name); 
     sb.Append("</li>"); 
     return new MvcHtmlString(sb.ToString()); 
    } 
} 

Answer 5

में उपयोग कर रहा हूँ चाहिए लेआउट निम्न की तरह प्रयास करें:

@{ 
    string url = Request.RawUrl; 
} 
@switch (url) 
{ 
    case "/home/":     
     @Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" }) 
     @Html.ActionLink("Members", "../home/MembersList/") 
    break; 
    case "/home/MembersList/": 
     @Html.ActionLink("Home", "../home/") 
     @Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" }) 
    break; 
    default: 
      @Html.ActionLink("Home", "../home/") 
      @Html.ActionLink("Members", "../home/MembersList/") 
    break; 
} 

Answer 6

आप भी संलग्न करने के लिए नियंत्रक जानकारी कृपया इस लिंक

https://stackoverflow.com/a/20411015/875708