सक्रिय मेनू आइटम-asp.net mvc3 मास्टर पेज




asp.net-mvc asp.net-mvc-3 (4)

मैं मास्टर पेज से मेनू आइटम में "सक्रिय / वर्तमान" कक्षा असाइन करने के लिए उचित समाधान खोजने की कोशिश कर रहा हूं। इस क्लाइंट बनाम सर्वर पक्ष को करने के संबंध में लाइन को बीच में विभाजित किया गया है।

सच में मैं जावास्क्रिप्ट और एमवीसी दोनों के लिए नया हूं इसलिए मेरे पास कोई राय नहीं है। मैं इसे "स्वच्छतम" और सबसे उपयुक्त तरीके से करना पसंद करूंगा।

मेरे पास "सक्रिय" वर्ग को <li> आइटम को असाइन करने के लिए निम्न jQuery कोड है ... केवल समस्या "इंडेक्स" या डिफ़ॉल्ट दृश्य मेनू आइटम को सक्रिय कक्षा असाइन की जाएगी, क्योंकि यूआरएल हमेशा एक सबस्ट्रिंग होता है अन्य मेनू लिंक का:

(default) index = localhost/
link 1 = localhost/home/link1
link 2 = localhost/home/link1

$(function () {
 var str = location.href.toLowerCase();
  $('#nav ul li a').each(function() {
   if (str.indexOf(this.href.toLowerCase()) > -1) {
    $(this).parent().attr("class","active"); //hightlight parent tab
   }
});

क्या ऐसा करने का कोई बेहतर तरीका है, दोस्तों? क्या कोई कम से कम मुझे क्लाइंट-साइड संस्करण बुलेटप्रूफ प्राप्त करने में मदद करेगा? ताकि "इंडेक्स" या डिफ़ॉल्ट लिंक हमेशा "सक्रिय" हो? क्या इंडेक्स विधि में फर्जी एक्सटेंशन असाइन करने का कोई तरीका है? बस बेस यूआरएल की बजाय यह localhost/home/dashboard ताकि यह हर लिंक का सबस्ट्रिंग न हो?

सच में, मैं वास्तव में इस सर्वर-पक्ष को करने के तरीकों का पालन नहीं करता, यही कारण है कि मैं इसे jQuery के साथ क्लाइंट साइड करने की कोशिश कर रहा हूं ... किसी भी मदद की सराहना की जाएगी।


क्षेत्रों के लिए समर्थन जोड़ा गया:

public static class MenuExtensions
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, string text, string action, string controller, string area = null)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;

        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        var currentArea = routeData.DataTokens["area"] as string;

        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentArea, area, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("active");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }
}

यहां इस मुद्दे का मेरा समाधान है।

मैंने HtmlHelpers क्लास के निम्न एक्सटेंशन विधि बनाई:

public static class HtmlHelpers
{
    public static string SetMenuItemClass(this HtmlHelper helper, string actionName)
    {
        if (actionName == helper.ViewContext.RouteData.Values["action"].ToString())
            return "menu_on";
        else
            return "menu_off";
    }

तब मेरे पास मेनबुलॉक है। यह इस तरह दिख रहा है:

<div id="MenuBlock">
    <div class="@Html.SetMenuItemClass("About")">
        <a>@Html.ActionLink("About", "About", "Home")</a></div>
    <img height="31" width="2" class="line" alt="|" src="@Url.Content("~/Content/theme/images/menu_line.gif")"/>
    <div class="@Html.SetMenuItemClass("Prices")">
        <a>@Html.ActionLink("Prices", "Prices", "Home")</a></div>
</div>

तो मेरी विधि गृह नियंत्रक की वर्तमान कार्रवाई के अनुसार प्रत्येक div को कक्षा का नाम देता है। आप गहराई से जा सकते हैं और विधि में एक पैरामीटर जोड़ सकते हैं, जो समस्याओं से बचने के लिए नियंत्रक का नाम निर्दिष्ट करता है, जब आपके पास समान नाम के साथ कार्रवाई होती है लेकिन विभिन्न नियंत्रकों के होते हैं।


मैं आमतौर पर जो करता हूं वह पथ टैग पर आधारित बॉडी टैग को कक्षा निर्दिष्ट करता है। तो, अगर आप स्ट्रिंग करते हैं। / ब्लॉग / पोस्ट / 1 को क्लास = "ब्लॉग पोस्ट 1" में बदलने के लिए पथ पर बदलें।

फिर, आप इसे संभालने के लिए सीएसएस नियम असाइन कर सकते हैं। उदाहरण के लिए, यदि आपके पास "ब्लॉग" के लिए मेनू आइटम है, तो आप बस एक नियम कर सकते हैं

BODY.blogs li.blogs { /* your style */}

या यदि आप एक विशेष शैली चाहते हैं, तो यदि आप ब्लॉग रूट पेज पर हैं तो पोस्ट पर केवल एक ही उपाध्यक्ष

BODY.blogs.posts li.blogs {/* your style */}

JQuery के माध्यम से आप ऐसा कर सकते हैं:

$(document).ready(function () {
    highlightActiveMenuItem();
});

highlightActiveMenuItem = function () {
    var url = window.location.pathname;
    $('.menu a[href="' + url + '"]').addClass('active_menu_item');
};

.active_menu_item {
    color: #000 !important;
    font-weight: bold !important;
}

मूल: http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item हाइलाइट-active-menu- http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item







master-pages