एएसपी.नेट एमवीसी में हाइलाइट के साथ नेविगेशन मेनू?

Question

यह एक आसान सवाल है। के साथ पर हम किस पृष्ठ पर हैं, इस पर हाइलाइट एमवीसी में स्टैक ओवरफ्लो अपना मेनू कैसे करता है।

Answer 1

इस उद्देश्य के लिए, मैंने कुछ कोड नीचे लिखा है, कुछ भाग हैं जो भाषा जैसे मेरे कस्टम एक्सटेंशन का उपयोग करते हैं, आगे बढ़ते हैं और इसका उपयोग करते हैं, केवल मामूली हिस्से को अनदेखा करते हैं।

यह मैं अपने आंशिक के शीर्ष पर रखता हूं जिसमें मेनू और कार्रवाई करने के लिए मेनू होता है, ताकि मैं इसे एक्सटेंशन में पास कर सकूं।

<% string currentAction = ViewContext.RouteData.Values["action"].ToString(); 
    string currentController = ViewContext.RouteData.Values["controller"].ToString(); %> 

यह, साइडबार आइटम है मूल रूप से यह संकेत मिलता है कि क्या लिंक वर्तमान पृष्ठ/हाइलाइट में प्रयोग किया जाता है के लिए एक कड़ी और अपने कस्टम वर्ग के साथ एक "ली" टैग उत्पन्न होगा।

public static string SidebarItem(this System.Web.Mvc.HtmlHelper html, string currentAction, string currentController, string action, string controller, string languageKey, params object[] args) 
{ 
    TagBuilder tb = new TagBuilder("li"); 
    if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) && string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase)) 
    { 
     tb.GenerateId("activemenu"); 
    } 
    string text = html.Language(languageKey, args); 
    string link = html.ActionLink(text, action, controller).ToHtmlString(); 
    tb.SetInnerText("{0}"); 
    return String.Format(tb.ToString(), "<span>"+link+"</span>"); 
} 

और यहाँ

<%= Html.SidebarItem(currentAction, currentController, "index", "home", "index") %> 

Answer 2

अर्थात इस URL

http://stackoverflow.com/questions के लिए देखें यह इंगित करता है कि शायद प्रश्न नियंत्रक इस पेज को संभालती है। तो यह एक हाइलाइट किए गए मेनू आइटम को प्रदर्शित करने के लिए देखें।

Answer 3

शायद कोई एमवीसी विशेष जादू नहीं है जो ऐसा होता है।

मुझे यकीन है:

if(HttpContext.Current.Request.Path == "some some menu url") 

या

if(ViewContext_Or_ControllerContext.RouteData.Values["controller"] == "some value") 

किसी ऐसे स्थान पर प्रयोग किया जाता है।

आप इस कोड को लगभग तीन अलग-अलग स्थानों (देखें (.aspx), ViewModel, कस्टम HtmlHelper) में डाल सकते हैं और उन्हें सभी को उसी कोड की आवश्यकता होगी।

Answer 4

यदि आप पृष्ठ स्रोत देखते हैं, तो उन्होंने पृष्ठभूमि रंग बदलने के लिए <li> तत्व में एक सीएसएस क्लास जोड़ा है। मैं कोड का अनुमान लगा रहा हूं कि उपयोगकर्ता किस नियंत्रक तक पहुंच रहा है (प्रश्न, उपयोगकर्ता, आदि) और वर्ग को उस अनुभाग के <li> टैग में जोड़ता है।

Answer 5

आप एक HTML हेल्पर इस्तेमाल कर सकते हैं मेनू बनाने के लिए ऊपर दिए गए कोड का वास्तविक उपयोग है। इस तरह सभी कोड एक ही स्थान पर हैं।

SiteMap HtmlHelper ASP.NET MVC में उपलब्ध एक घटक के बारे में कुछ जानकारी है।

Answer 6

1.First विस्तार

public class Extention 
{ 
    public static Dictionary<Menu, Menu> GetDictionary() 
    { 
     Dictionary<Menu, Menu> urls = new Dictionary<Menu, Menu>(); 
     urls.Add(new Menu { Controller = "AppHome", Action = "Index" }, new Menu { Controller = "AppHome", Action = "Index" }); 
     urls.Add(new Menu { Controller = "Home", Action = "Index" }, new Menu { Controller = "Home", Action = "Index" }); 

     return urls; 
    } 
} 
public static class HtmlExtensions 
{ 
    public static MvcHtmlString ActionMenu(this HtmlHelper helper,String linkText,string actionName,String controllerName) 
    { 
     var tag= new TagBuilder("li"); 
     if(helper.ViewContext.RequestContext.IsCurrentRoute(null,controllerName,actionName)|| 
      helper.ViewContext.RequestContext.IsParentRoute(controllerName,actionName)) 
     { 
      tag.AddCssClass("active"); 
     } 
     else 
     { 
      tag.AddCssClass("inactive"); 
     } 
     tag.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString(); 
     return MvcHtmlString.Create(tag.ToString()); 
    } 
} 
public static class RequestExtentions 
{ 
    public static bool IsCurrentRoute(this RequestContext context, String areaName) 
    { 
     return context.IsCurrentRoute(areaName, null, null); 
    } 
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName) 
    { 
     return context.IsCurrentRoute(areaName, controllerName, null); 
    } 
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName, params String[] actionNames) 
    { 
     var routeData = context.RouteData; 
     var routeArea = routeData.DataTokens["area"] as String; 
     var current = false; 

     if (((String.IsNullOrEmpty(routeArea) && String.IsNullOrEmpty(areaName)) || (routeArea == areaName)) && 
      ((String.IsNullOrEmpty(controllerName)) || (routeData.GetRequiredString("controller") == controllerName)) && 
      ((actionNames == null) || actionNames.Contains(routeData.GetRequiredString("action")))) 
     { 
      current = true; 
     } 
     return current; 
    } 
    public static bool IsParentRoute(this RequestContext context, String controller, String action) 
    { 
     var routeData = context.RouteData; 
     Menu returnUrl = null; 
     Menu requestUrl = new Menu { Action = routeData.GetRequiredString("action"), Controller = routeData.GetRequiredString("controller") }; 
     Menu linkUrl = new Menu { Action = action, Controller = controller }; 

     var urls = Extention.GetDictionary(); 
     urls.TryGetValue(requestUrl, out returnUrl); 

     if (returnUrl != null && returnUrl.Equals(linkUrl)) 
      return true; 
     else 
      return false; ; 
    } 
} 

Answer 7

सबसे अच्छा तरीका बना सकते हैं - में नई सुविधा के बारे में याद - MVC सहायक (पिछले जवाब देखें) लेकिन अगर आप यह करने के लिए नहीं करना चाहते हैं और जल्दी करना चाहते हैं बनाने एचटीएमएल टैग के सेट विशेषताओं के साथ एमवीसी 4.0 (विशेषता अगर यह शून्य हो जाती है तो इससे बचें):

 @{ 
      string currentAction = ViewContext.RouteData.Values["action"].ToString().ToLower(); 

      string classUpcomingTime = null; 
      string classArchive = null; 
      string classReporting = null; 

      switch (currentAction) 
      { 
       case "upcomingtime": 
        classUpcomingTime = "active"; 
        break; 
       case "archive": 
        classArchive = "active"; 
        break; 
       case "reporting": 
        classReporting = "active"; 
        break; 
      } 

      <ul class="nav navbar-nav"> 
       <li class="@classUpcomingTime"> 
        <a href="/Vacancy/UpcomingTime">Open Vacancies</a> 
       </li> 
       <li class="@classArchive"> 
        <a href="/Vacancy/Archive">Archive</a> 

       <li class="@classReporting"> 
        @*<a href="#">Reporting</a>*@ 
        <a href="/Vacancy/Reporting">Reporting</a> 
       </li> 
      </ul> 
     }