কীভাবে "সক্রিয়" ক্লাসটি এএসপি.নেট এমভিসিতে এইচটিএমএল.অ্যাকশনলিঙ্কে যুক্ত করবেন

128

আমি এমভিসিতে আমার বুটস্ট্র্যাপ নববারে একটি "সক্রিয়" শ্রেণি যুক্ত করার চেষ্টা করছি, তবে নিম্নলিখিতগুলি যখন এই জাতীয় লেখা হয় তখন সক্রিয় শ্রেণিটি দেখায় না:

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

এটি সঠিকভাবে ফর্ম্যাট করা শ্রেণীর মতো দেখতে কী সমাধান করে তবে কাজ করে না:

<a class="active" href="/">Home</a>

বুটস্ট্র্যাপ ডকুমেন্টেশনে এটি উল্লেখ করেছে যে 'এ' ট্যাগগুলি নববারে ব্যবহার করা উচিত নয়, তবে উপরের দিক থেকে আমি বিশ্বাস করি যে এইচটিএমএল.অ্যাকশনলিঙ্কে কোনও শ্রেণি যুক্ত করার সঠিক উপায়। এই কাজটি করার মতো আর কোনও উপায় আছে?

asp.net  css  asp.net-mvc  twitter-bootstrap 
— গিলেস্পি
সূত্র
3
যে কোডটি সমাধান করে তার ক্লাস = এতে সক্রিয় রয়েছে। আপনি কি আপনার প্রশ্নে যা চান তা কি তাই নয়? আপনার কোডটি কীভাবে রয়েছে আমি কীভাবে ক্লাস যুক্ত করব
— ম্যাট বডিলি
আপনি খুব পরিষ্কার না !!! নাভিতে এটিকে যুক্ত করতে সমস্যা কী তা আমি ঠিক বুঝতে পারি না, যদিও আমার অনুভূতি হয়,
— জে সি লিজার্ড
1
সমাধান হওয়া কোড নিয়ে সমস্যা কী? আপনি কি আশা করছেন? "কাজ করে বলে মনে হচ্ছে না" তার চেয়েও আপনি আরও নির্দিষ্ট হতে পারেন? আপনার প্রশ্ন এখনই আপনাকে সাহায্য করার জন্য যথেষ্ট পরিষ্কার নয়।
— ডোম
সম্পাদিত! দুঃখিত, আমি যা বোঝাতে চেয়েছি তা হল "সক্রিয়" শ্রেণিটি একেবারেই প্রদর্শিত হচ্ছে না
— গিলিস্পি
2
শুধু বুটস্ট্র্যাপ এর ডক্সে glanced এবং আমার মনে হয় যোগ করতে হবে activeক্লাসের liউপাদান না a। এখানে প্রথম উদাহরণটি দেখুন: getbootstrap.com/components/#navbar
— dom

উত্তর:

300

বুটস্ট্র্যাপে activeক্লাসটি <li>এলিমেন্টে প্রয়োগ করা উচিত এবং না <a>। এখানে প্রথম উদাহরণটি দেখুন: http://getbootstrap.com/components/#navbar

আপনি কীভাবে সক্রিয় আছেন বা না তা ভিত্তিতে আপনার ইউআই স্টাইলটি যেভাবে পরিচালনা করবেন তার সাথে এএসপি.নেট এমভিসি এর সহায়কটির কোনও সম্পর্ক নেই ActionLink। বুটস্ট্র্যাপ ফ্রেমওয়ার্কটি কীভাবে তৈরি করা হয়েছিল তা অনুসরণের এটি যথাযথ সমাধান।

<ul class="nav navbar-nav">
    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

সম্পাদনা:

যেহেতু আপনি সম্ভবত একাধিক পৃষ্ঠায় আপনার মেনুটি পুনরায় ব্যবহার করছেন, সুতরাং নির্বাচিত শ্রেণিকে স্বয়ংক্রিয়ভাবে বর্তমান পৃষ্ঠার উপর ভিত্তি করে মেনুটিকে একাধিক বার অনুলিপি করার পরিবর্তে ম্যানুয়ালি করার উপায় আছে বুদ্ধিমানের কাজ হবে।

সবচেয়ে সহজ উপায় হ'ল অন্তর্ভুক্ত থাকা মানগুলি ViewContext.RouteData, যথা নামগুলি Actionএবং Controllerমানগুলি simply আপনার কাছে বর্তমানে যা আছে তার সাথে আমরা এটি তৈরি করতে পারি:

<ul class="nav navbar-nav">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

এটি কোডে খুব সুন্দর নয়, তবে এটি কাজটি সম্পন্ন করবে এবং আপনি যদি চান তবে আপনার আংশিক দৃশ্যে আপনার মেনুটি বের করার অনুমতি দেবে। এটি আরও পরিচ্ছন্ন উপায়ে করার উপায় রয়েছে তবে আপনি যেহেতু সবে শুরু করছেন আমি এটিকেই ছেড়ে দেব। ভাগ্যক্রমে ASP.NET MVC শেখার!

দেরীতে সম্পাদনা:

এই প্রশ্নটি কিছুটা ট্র্যাফিকই পেয়েছে বলে মনে হচ্ছে আমি একটি HtmlHelperএক্সটেনশন ব্যবহার করে আরও মার্জিত সমাধানে ফেলেছি ।

03-24-2015 সম্পাদনা করুন: নির্বাচিত আচরণকে ট্রিগারকারী একাধিক ক্রিয়া এবং নিয়ন্ত্রণকারীদের অনুমতি দেওয়ার জন্য এই পদ্ধতিটি পুনরায় লিখতে হয়েছিল, পাশাপাশি যখন শিশু অ্যাকশনটির আংশিক দৃষ্টিভঙ্গি থেকে পদ্ধতিটি আহ্বান করা হয়েছিল তখন পরিচালনা করার জন্য, ভাবছিলাম আমি আপডেটটি ভাগ করব!

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

নেট কোর সহ কাজ করে:

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

নমুনা ব্যবহার:

<ul>
    <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
        <a href="@Url.Action("Home", "Default")">Home</a>
    </li>
    <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
        <a href="@Url.Action("List", "Default")">List</a>
    </li>
</ul>
— ডোম
সূত্র
ধন্যবাদ, যেমনটি আমি উল্লেখ করেছি যে এটি মূলত আমি কীভাবে করেছি, তবে আমি নির্বাচিত বস্তুর মধ্যে "সক্রিয়" শ্রেণিটি পরিবর্তন করার কোডটি জুড়ে একটি পদ্ধতি আছে বলে আশা করি।
— গিলস্পি
2
@ গিলসপি কোন উদ্বেগ নেই! আমি আমার উত্তর সম্পাদনা করেছি এমন কিছু তথ্য যুক্ত করতে যা আপনাকে আরও কিছুটা সহায়তা করতে পারে।
— ডোম
5
প্রথম সম্পাদনার ক্ষেত্রে, এটি কেবলমাত্র সূচক পৃষ্ঠার জন্য কাজ করেছিল। কারণটি দেখে মনে হচ্ছে যে এটি তুলনা করার সময়, এটি ভিউকন্টেক্সট হিসাবে ব্যর্থ হয়েছিল ou রুটডাটা.ভ্যালুগুলি ["অ্যাকশন"] কোনও স্ট্রিং টাইপ অবজেক্ট ফেরত দেয় না (এখনও এটি জানেন না যে এটি প্রথম পৃষ্ঠার জন্য কীভাবে কাজ করেছে ....) । আমি যখন সমস্ত ViewContext.RouteData.Values ​​["ক্রিয়াকলাপ"] ভিউ কনটেক্সট.রৌটডেটা.ভ্যালুয়াস ["অ্যাকশন"] তে পরিবর্তন করেছি তখন। স্ট্রিং (), এটি সমস্ত পৃষ্ঠার জন্য কাজ করেছিল। কেউ যদি একই সমস্যা ভোগ করে তবে আপনার সমাধানে এটি যুক্ত করতে পারে।
— ব্যবহারকারী 3281466
2
@ লোনলিপিক্সেল সম্ভবত এই উত্তরটি আপনার পক্ষে কাজ করে?
— ডোম
1
ভিবি.এনইটি ব্যবহারকারীদের জন্য: <লি ক্লাস = "@ (যদি (ভিউকন্টেক্সট.রৌটডাটা.ভ্যালু (" অ্যাকশন ")) To হোম "," সূচী "," হোম ") </ li>
— আন্দ্রে আন্টোনঙ্গেলি
28

এক্সটেনশান:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)
{
    var context = html.ViewContext;
    if (context.Controller.ControllerContext.IsChildAction)
        context = html.ViewContext.ParentActionViewContext;
    var routeValues = context.RouteData.Values;
    var currentAction = routeValues["action"].ToString();
    var currentController = routeValues["controller"].ToString();

    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",
        currentAction.Equals(action, StringComparison.InvariantCulture) &&
        currentController.Equals(controller, StringComparison.InvariantCulture) ?
        " class=\"active\"" :
        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()
    );
    return new MvcHtmlString(str);
}

ব্যবহার:

<ul class="nav navbar-nav">
    @Html.LiActionLink("About", "About", "Home")
    @Html.LiActionLink("Contact", "Contact", "Home")
</ul>
— অধ্যাপক
সূত্র
1
এটি একটি সুন্দর দক্ষ এক্সটেনশন। নিখুঁতভাবে কাজ করে এবং বেশ মার্জিত। আপনাকে হ্যাটস অফ প্রফেসর! আমার একমাত্র গ্রিপ সেই সাথেই রয়েছে role="presentation", যা প্রাথমিক নেভিগেশনাল মেনুতে ( john.foliot.ca/aria-hided/#pr ) মোটেই উপযুক্ত নয় । আনঅর্ডারার্ড তালিকাটি সম্পর্কিত লিঙ্কগুলির একটি সেটের জন্য একটি উপযুক্ত ধারক, কারণ এটি তাদেরকে যৌক্তিক উপায়ে একত্রিত করে।
— রেনি কেবিস
@ রেনা কাবিস এটি বুটস্ট্র্যাপ নেগাইজের জন্য পান getbootstrap.com/components/#nav-tabs
— প্রফেসর
1
যখন ব্যবহারকারী ম্যানুয়ালি ছোট কেস লেটার বা বড় হাতের অক্ষরে যেমন url ইনপুট করে তখন এটি কাজ করে না। "ডোমেইন / লোগিন " এবং "ডোমেইন / লোগিন "। সমাধানের জন্য, var str = String.Format("<li role=\"presentation\"{0}>{1}</li>", currentAction.toLower().Equals(action.toLower(), StringComparison.InvariantCulture) && currentController.toLower().Equals(controller.toLower(), StringComparison.InvariantCulture) ? " class=\"active\"" : String.Empty, html.ActionLink(text, action, controller).ToHtmlString() );
— স্কাই91 11
20

আমি asp.net এমভিসিতে একটি ভিউ ব্যাগের প্যারামিটার যুক্ত করে এটি করার ব্যবস্থা করেছিলাম। এখানে আমি কি করেছি

যোগ করা হয়েছে ViewBag.Current = "Scheduler";প্রতিটি পৃষ্ঠার মধ্যে পরামিতি মত

বিন্যাস পৃষ্ঠায়

<ul class="nav navbar-nav">
     <li class="@(ViewBag.Current == "Scheduler" ? "active" : "") "><a href="@Url.Action("Index","Scheduler")" target="_self">Scheduler</a></li>
 </ul>

এটি আমার সমস্যার সমাধান করেছে।

— Damith
সূত্র
সহজ এবং সহজ সমাধান।
— জাপানে সোফেই
13

একটু দেরি হতে পারে। তবে আশা করি এটি সাহায্য করবে।

public static class Utilities
{
    public static string IsActive(this HtmlHelper html, 
                                  string control,
                                  string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }
}

এবং অনুসরণ হিসাবে ব্যবহার:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class='@Html.IsActive("Home", "Index")'>
            @Html.ActionLink("Home", "Index", "Home")
        </li>
        <li class='@Html.IsActive("Home", "About")'>
            @Html.ActionLink("About", "About", "Home")
        </li>
        <li class='@Html.IsActive("Home", "Contact")'>
            @Html.ActionLink("Contact", "Contact", "Home")
        </li>
    </ul>
</div>

Http://www.codingeverything.com/2014/05/mvcbootstrapactivenavbar.html থেকে রেফারেন্স পান

— বিরাগ দিলীপ দেশাই
সূত্র
1
খুব একক এবং মার্জিত সমাধান। সমস্ত নিয়ামক ক্রিয়াকলাপের জন্য একটি মেনু হাইলাইট করতে আমি এখানে gist.github.com/jean-rakotozafy/… কিছু উন্নতি করেছি ।
— জান রাকটো
5

আমি জানি এই প্রশ্নটি পুরানো, তবে আমি এখানে আমার ভয়েস যুক্ত করতে চাই। আমি বিশ্বাস করি যে কোনও লিঙ্ক দর্শকের নিয়ামকের কাছে সক্রিয় রয়েছে কিনা তা সম্পর্কে জ্ঞান ছেড়ে দেওয়া ভাল ধারণা।

আমি নিয়ামক ক্রিয়ায় প্রতিটি দৃশ্যের জন্য একটি অনন্য মান সেট করব set উদাহরণস্বরূপ, আমি যদি হোম পৃষ্ঠার লিঙ্কটি সক্রিয় করতে চাই, আমি এই জাতীয় কিছু করব:

public ActionResult Index()
{            
    ViewBag.Title = "Home";
    ViewBag.Home = "class = active";
    return View();
}

তারপরে আমার দৃষ্টিতে আমি এই জাতীয় কিছু লিখব:

<li @ViewBag.Home>@Html.ActionLink("Home", "Index", "Home", null, new { title = "Go home" })</li>

আপনি যখন কোনও ভিন্ন পৃষ্ঠাতে নেভিগেট করেন, প্রোগ্রামগুলি বলুন, ভিউব্যাগ H হোম উপস্থিত নেই (পরিবর্তে ভিউব্যাগ P প্রোগ্রামগুলি করে); সুতরাং, কিছুই রেন্ডার করা হয় না, এমনকি শ্রেণি = ""ও হয় না। আমি মনে করি এটি রক্ষণাবেক্ষণযোগ্যতা এবং পরিষ্কার-পরিচ্ছন্নতার জন্য উভয়ই পরিষ্কার। আমি সবসময় যুক্তি যতটা পারি তার থেকে দূরে রাখতে চাই to

— mapussah
সূত্র
4

দামিথ কী পোস্ট করেছে তা বিবেচনা করে, আমি ভাবতে চাই যে আপনি কেবল ভিউবাগ.টাইটেল দ্বারা সক্রিয় যোগ্য হতে পারেন (সেরা অনুশীলন হ'ল এটি আপনার সামগ্রী পৃষ্ঠাগুলিতে আপনার পাতাকে _Layout.cshtmlআপনার লিঙ্ক বারগুলি ধরে রাখতে দেয় ) allowing এছাড়াও মনে রাখবেন যে আপনি যদি সাব-মেনু আইটেমগুলি ব্যবহার করেন তবে এটিও দুর্দান্ত কাজ করে:

<li class="has-sub @(ViewBag.Title == "Dashboard 1" || ViewBag.Title == "Dashboard 2" ? "active" : "" )">
    <a href="javascript:;">
        <b class="caret"></b>
        <i class="fa fa-th-large"></i>
        <span>Dashboard</span>
    </a>
    <ul class="sub-menu">
        <li class="@(ViewBag.Title == "Dashboard 1" ? "active" : "")"><a href="index.html">Dashboard v1</a></li>
        <li class="@(ViewBag.Title == "Dashboard 2" ? "active" : "")"><a href="index_v2.html">Dashboard v2</a></li>
    </ul>
</li>
— রাফ স্মিথ
সূত্র
পরিষ্কার এবং দক্ষ!
— মিগ্রাগ্রাসেসিক
3

আমি ডোমের "সুন্দর নয়" উত্তরটি সংশোধন করে এটিকে আরও খারাপ করে তুলেছি। কখনও কখনও দুটি নিয়ামকের বিরোধী ক্রিয়াকলাপের নাম থাকে (অর্থাত্ সূচক) তাই আমি এটি করি:

<ul class="nav navbar-nav">
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "HomeIndex" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "AboutIndex" ? "active" : "")">@Html.ActionLink("About", "Index", "About")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ContactHome" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
— DeveloperDan
সূত্র
3

আপনি এটি চেষ্টা করতে পারেন: আমার ক্ষেত্রে আমি ভূমিকা ভিত্তিক অ্যাক্সেসের ভিত্তিতে ডাটাবেস থেকে মেনু লোড করছি, আপনার প্রতিটি দৃশ্যে কোডটি লিখুন আপনার মেনুতে আপনার ভিউয়ের উপর ভিত্তি করে সক্রিয় করতে চান। 

<script type="text/javascript">
        $(document).ready(function () {         
            $('li.active active-menu').removeClass('active active-menu');
            $('a[href="https://stackoverflow.com/MgtCustomer/Index"]').closest('li').addClass('active active-menu');
        });
</script>
— আতিক সরকার
সূত্র
3

এই সমাধানটি Asp.net MCV 5 এর জন্য সহজ।

  1. উদাহরণস্বরূপ একটি স্ট্যাটিক ক্লাস তৈরি করুন Utilitarios.cs।

  2. শ্রেণীর অভ্যন্তরে একটি স্থিতিশীল পদ্ধতি তৈরি করুন:

    public static string IsLinkActive(this UrlHelper url, string action, string controller)
{
    if (url.RequestContext.RouteData.Values["controller"].ToString() == controller &&
        url.RequestContext.RouteData.Values["action"].ToString() == action)
    {
        return "active";
    }

    return "";
}

  3. এই মত কল

    <ul class="sidebar-menu" data-widget="tree">
    <li class="header">HEADER</li>
    <li class="@Url.IsLinkActive("Index", "Home")">
        <a href="@Url.Action("Index", "Home")"><i class="fa fa-link"></i> <span>Home</span></a>
    </li>
    <li class="@Url.IsLinkActive("About", "Home")">
        <a href="@Url.Action("About", "Home")"><i class="fa fa-link"></i><span>About</span></a>
    </li>
</ul>
— দেবী জাভিয়ের সাভেদর গার্সিয়া
সূত্র
3

এএসপি.নেট কোর এবং বুটস্ট্র্যাপ 4

সর্বাধিক আপ টু ডেট উত্তর

আমি এক্সটেনশন পদ্ধতির ভিত্তিতে এই সমস্যাটি সমাধান করার জন্য একটি আপডেটেড, এএসপি.নেট কোর এবং বুটস্ট্র্যাপ 4 সুসংগত উপায়ের জন্য @ ক্রাশের ঝরঝরে সমাধান পুনরায় কাজ করেছিIHtmlHelper :

public static class LinkExtensions
{
    public static IHtmlContent ActiveActionLink(this IHtmlHelper html, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        return ActiveActionLink(html, linkText, actionName, controllerName, new RouteValueDictionary(routeValues), HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static IHtmlContent ActiveActionLink(this IHtmlHelper html, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes)
    {
        var routeData = html.ViewContext.RouteData;
        var routeAction = (string)routeData.Values["action"];
        var routeController = (string)routeData.Values["controller"];

        var active = controllerName.Equals(routeController) && actionName.Equals(routeAction);

        using (var writer = new StringWriter())
        {
            writer.WriteLine($"<li class='nav-item {(active ? "active" : "")}'>");
            html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes).WriteTo(writer, HtmlEncoder.Default);
            writer.WriteLine("</li>");
            return new HtmlString(writer.ToString());
        }
    }
}

ব্যবহার

<nav class="navbar">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            @Html.ActiveActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })
            @Html.ActiveActionLink("About", "About", "Home", null, new { @class = "nav-link" })
            @Html.ActiveActionLink("Contact", "Contact", "TimeTracking", null, new { @class = "nav-link" })
        </ul>
    </div>
</nav>
— WoIIe
সূত্র
1
খুব ভাল সমাধান। আপনার উদাহরণে, আমি কীভাবে 'পরিচিতি'টিকে ডিফল্টরূপে সক্রিয় হিসাবে সেট করতে পারি?
— মোঃ সুমন কবির
1
ধন্যবাদ. ভাল জিনিস আপনি একটি সক্রিয় উপাদান সেট করার প্রয়োজন হবে না। যত তাড়াতাড়ি 'যোগাযোগ' পৃষ্ঠা পরিদর্শন করা হয়, ActiveActionLink()সক্রিয় বর্গ প্রয়োগ করা হবে <li>:-)
— WoIIe
আপনি কোথায় চেক অঞ্চল?
— মোহাম্মদ
@ মোহাম্মদ আমি বুঝতে পারি না। আপনি কি দয়া করে আপনার প্রশ্নটি বিস্তারিতভাবে বর্ণনা করতে পারেন?
— ওউআইআই
লিংক এক্সটেনশন ক্লাসে আপনি রুটডাটা থেকে অঞ্চল পান নি!
— মোহাম্মদ
3

ইজি এএসপি.নেট কোর 3.0 এবং ট্যাগহেল্পার্স

[HtmlTargetElement("li", Attributes = "active-when")]
public class LiTagHelper : TagHelper
{
    public string ActiveWhen { get; set; }

    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContextData { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (ActiveWhen == null)
            return;

        var targetController = ActiveWhen.Split("/")[1];
        var targetAction = ActiveWhen.Split("/")[2];

        var currentController = ViewContextData.RouteData.Values["controller"].ToString();
        var currentAction = ViewContextData.RouteData.Values["action"].ToString();

        if (currentController.Equals(targetController) && currentAction.Equals(targetAction))
        {
            if (output.Attributes.ContainsName("class"))
            {
                output.Attributes.SetAttribute("class", $"{output.Attributes["class"].Value} active");
            }
            else
            {
                output.Attributes.SetAttribute("class", "active");
            }
        }
    }
}

আপনার _ভিউআইম্পোর্টস সি-তে অন্তর্ভুক্ত করুন:

@addTagHelper *, YourAssemblyName

ব্যবহার:

 <li active-when="/Home/Index">
— গিলহার্ম ভি।
সূত্র
2

ASP.NET MVC এর সাথে তুলনা করতে উন্নত করতে '.ToString' যুক্ত করুন

<ul class="nav navbar-nav">
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>

-

দুটি ভিন্ন কন্ট্রোলারে একই ক্রিয়াকলাপের নাম থাকলে এটি কাজ করবে না। সূচক ক্রিয়া সহ এটি হোম এবং নিয়ন্ত্রণকারীদের সাথে পরীক্ষা করুন Test
— হাইড
আপনি রেজারের মতো ফাংশন সার্ভারটিকে ডিফেন্ড করতে পারেন: @functions { public bool IsActive(string action, string controller) { var actionRoute = ViewContext.RouteData.Values["Action"].ToString(); var controlRoute = ViewContext.RouteData.Values["Controller"].ToString(); return controller.Equals(controlRoute)&& actionRoute.Equals(actionRoute); } }এবং ব্যবহার: <li class="@(IsActive("Index", "Home")? "active": "")">
— হুয়া ট্রুং
2

আমরা UrlHelperঅনুরোধকন্টেক্সট থেকে তৈরি করতে পারি যা আমরা নিজেই এমভিসিহ্যান্ডলার থেকে পেতে পারি। অতএব আমি যে কারও জন্য এই যুক্তিটি রেজার টেম্পলেটগুলিতে নিম্নরূপে রাখতে চাইছি তার জন্য আমি বিনীত হব:

  1. প্রকল্পের রুটে একটি ফোল্ডার তৈরি করুন AppCode।
  2. নামে একটি ফাইল তৈরি করুন HtmlHelpers.cshtml

  3. সেখানে একটি সহায়ক তৈরি করুন:

    @helper MenuItem(string action, string controller)
{
     var mvcHandler = Context.CurrentHandler as MvcHandler;
     if (mvcHandler != null)
     {
         var url = new UrlHelper(mvcHandler.RequestContext);
         var routeData = mvcHandler.RequestContext.RouteData;
         var currentAction = routeData.Values["action"].ToString();
         var currentController = routeData.Values["controller"].ToString();
         var isCurrent = string.Equals(currentAction, action, StringComparison.InvariantCultureIgnoreCase) &&
                         string.Equals(currentController, controller, StringComparison.InvariantCultureIgnoreCase);

        <div class="@(isCurrent ? "active" : "")">
            <div>@url.Action(action, controller)</div>
        </div>
     }   
}

  4. তারপরে আমরা আমাদের মতামত এর মতো ব্যবহার করতে পারি:

    @HtmlHelpers.MenuItem("Default", "Home")

আশা করি এটি কারও পক্ষে সহায়তা করবে।

— ওলেকসী আজা
সূত্র
এটা সত্যিই দুর্দান্ত। এখানে কি কোনও পারফরম্যান্সের ঘাটতি রয়েছে?
— পিষ্ট করুন
@ ক্রাশ, আমি এটি পরিমাপ করিনি, তবে আমি এটির কম পারফরম্যান্সের প্রভাবের প্রত্যাশা করব কারণ আমি মনে করি যে ফ্রেমওয়ার্কটি UrlHelperআপনার মধ্যে তৈরি করতে একইরকম যুক্তি ব্যবহার করে Controller.Url। কেবলমাত্র এটি হ'ল আমরা সম্ভবত UrlHelperপ্রতিটি কলের জন্য তৈরি চালিয়ে যেতে চাই না MenuItemতাই আমরা সহায়তার সাথে প্রথম কল করার পরে এটি HTTPContext আইটেমগুলিতে সংরক্ষণের একটি টিক প্রয়োগ করতে পারি তাই আমরা অনুরোধ অনুযায়ী কেবল একবার এটি করি।
— ওলেক্সি আজা
2

একটি ল্যাম্বদা ফাংশন দিয়ে সম্ভব

@{
string controllerAction = ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString();
    Func<string, string> IsSelected= x => x==controllerAction ? "active" : "";
}

তারপরে ব্যবহার

 @Html.ActionLink("Inicio", "Index", "Home", new { area = "" }, new { @class = IsSelected("HomeIndex")})
— হেনোক স্যালিনাস
সূত্র
2

আমি এমন একটি HtmlHelperএক্সটেনশন তৈরি করেছি যা ActiveActionLinkআপনারা যারা লিঙ্কটির <li>আশেপাশের পরিবর্তে লিঙ্কটিতে "সক্রিয়" শ্রেণি যুক্ত করতে চান তাদের জন্য একটি পদ্ধতি যুক্ত করে ।


public static class LinkExtensions
{
    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        return ActiveActionLink(html, linkText, actionName, controllerName, new RouteValueDictionary(routeValues), HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes)
    {
        const string activeClassName = "active";

        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeController = (string)routeData.Values["controller"];

        var active = controllerName.Equals(routeController) && actionName.Equals(routeAction);

        if (active)
        {
            var @class = (string)htmlAttributes["class"];

            htmlAttributes["class"] = string.IsNullOrEmpty(@class)
                ? activeClassName
                : @class + " active";
        }

        var link = html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes);

        return link;
    }
}

ব্যবহার নিম্নরূপ:

@Html.ActiveActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-item nav-link" })
— পিষা
সূত্র
1

@ ডোম্বেনয়েট এর উত্তর কাজ করে। যদিও এটি বজায় রাখার জন্য কিছু কোড প্রবর্তন করে। এই বাক্য গঠনটি পরীক্ষা করে দেখুন:

using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.NavBar).SetLinksActiveByControllerAndAction()))
{
    @nav.ActionLink("Link 1", "action1")
    @nav.ActionLink("Link 2", "action2")
    @nav.Link("External Link", "#")
}

.SetLinksActiveByControllerAndAction()পদ্ধতি ব্যবহার লক্ষ্য করুন ।

আপনি যদি ভাবছেন যে কী এই সিনট্যাক্সটিকে সম্ভব করে তোলে, টুইটারবুটস্ট্র্যাপ এমভিসি দেখুন

— দিমিত্রি এফিমেনকো
সূত্র
উত্তর দিমিত্রি জন্য ধন্যবাদ, আমি TwitterBootstrapMVC আউট পরীক্ষা করছি
— গিলেস্পি
1

আমি একটি সমাধানও খুঁজছিলাম এবং jQuery বেশ সাহায্য করেছিল। প্রথমত, আপনাকে অবশ্যই আপনার <li>উপাদানগুলিতে আইডি দিতে হবে ।

<li id="listguides"><a href='/Guides/List'>List Guides</a></li>

আপনার বিন্যাস পৃষ্ঠায় এটি করার পরে, আপনি jQuery কে বলতে পারবেন আপনার <li>দৃষ্টিতে কোন উপাদানটি 'নির্বাচন করা উচিত'।

@section Scripts{
    <script type="text/javascript">
        $('#listguides').addClass('selected');
    </script>
}

দ্রষ্টব্য: বিভাগটি যুক্ত করার জন্য ট্যাগের @RenderSection("scripts", required: false)ঠিক আগে আপনার লেআউট পৃষ্ঠায় থাকা দরকার </body>।

— দোআ জেনার
সূত্র
1

আমি এই সমাধানটি প্রস্তাব করতে চাই যা ডোমের উত্তরের প্রথম অংশের উপর ভিত্তি করে।

আমরা প্রথমে দুটি ভেরিয়েবল, "অ্যাকশন" এবং "কন্ট্রোলার" সংজ্ঞায়িত করি এবং সক্রিয় লিঙ্কটি নির্ধারণ করতে এগুলি ব্যবহার করি:

{ string controller = ViewContext.RouteData.Values["Controller"].ToString();
string action = ViewContext.RouteData.Values["Action"].ToString();}

এবং তারপর:

<ul class="nav navbar-nav">
    <li class="@((controller == "Home" && action == "Index") ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@((controller == "Home" && action == "About") ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@((controller == "Home" && action == "Contact") ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

এখন এটি আরও সুন্দর দেখাচ্ছে এবং আরও জটিল সমাধানের প্রয়োজন নেই।

— ওসামা
সূত্র
0

যদি এটি কিছুতেই না দেখানো হয় তবে কারণটি হল আপনার দুটি @ সাইন প্রয়োজন:

@@class

কিন্তু, আমি বিশ্বাস করি আপনার "লি" ট্যাগটিতে সক্রিয় শ্রেণি থাকতে হবে "এ" ট্যাগে নেই। খুব বুটস্ট্র্যাপ ডক্স অনুসারে ( http://getbootstrap.com/components/#navbar-default ):

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

সুতরাং আপনার কোডটি হবে:

<ul class="nav navbar-nav">
  <li class="active">@Html.ActionLink("Home", "Index", "Home", null)</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
— জিসি টিকটিকি
সূত্র
@@ ক্লাসে একটি ত্রুটি ছুঁড়েছে, আমার উপরে আপনার কোডের উদাহরণটি ছিল উপরে, যা কাজ করে তবে ঠিক অ্যাকশনলিঙ্কস "" হওয়া উচিত নয়?
— গিলস্পি
সম্পাদনা করা হয়েছে। @@ এর প্রয়োজন নেই। আপনাকে ক্লাসটি EA তে রাখতে হবে
— JC Lizard
0

আশা করি এটি সহায়তা করে, আপনার মেনুটি কীভাবে হতে পারে তা নীচে:

 <ul class="nav navbar-nav">
   <li><a href="@Url.Action("Index", "Home")" class="@IsMenuSelected("Index","Home", "active")">Home</a></li>
   <li><a href="@Url.Action("About", "Home")" class="@IsMenuSelected("About", "Home", "active")">About</a></li>
   <li><a href="@Url.Action("Contact", "Home")" class="@IsMenuSelected("Contact", "Home", "active")">Contact</a></li>
 </ul>

এবং এইচটিএমএল ট্যাগের নীচে এমভিসি সহায়তা ফাংশন যুক্ত করুন। 

 @helper IsMenuSelected(string actionName, string controllerName, string className)
    {
            var conname = ViewContext.RouteData.Values["controller"].ToString().ToLower();
            var actname = ViewContext.RouteData.Values["action"].ToString().ToLower();

            if (conname == controllerName.ToLower() && actname == actionName.ToLower())
        {
            @className;
        }
    }

আমি উত্তরটিকে জিজ্ঞাসা করেছি

— গণেশ তোদকর
সূত্র
0

আমি বুঝতে পারি যে এই সমস্যাটি আমাদের কারও জন্য একটি সাধারণ সমস্যা, তাই আমি নুগেট প্যাকেজটি ব্যবহার করে নিজের সমাধান প্রকাশ করেছি published এটি কীভাবে কাজ করে তা নীচে আপনি দেখতে পারেন। আমি আশা করি এটি কার্যকর হবে।

দ্রষ্টব্য: এই নুগেট প্যাকেজটি আমার প্রথম প্যাকেজ। সুতরাং আপনি যদি কোনও ভুল দেখতে পান তবে দয়া করে প্রতিক্রিয়া জানান। ধন্যবাদ.

  1. প্যাকেজ ইনস্টল করুন বা উত্স কোড ডাউনলোড করুন এবং আপনার প্রকল্প যুক্ত করুন

    -Install-Package Betalgo.MvcMenuNavigator

  2. আপনার পৃষ্ঠাগুলি একটি এনামে যুক্ত করুন

    public enum HeaderTop
{
    Dashboard,
    Product
}
public enum HeaderSub
{
    Index
}

  3. আপনার কন্ট্রোলার বা কর্মের উপরে ফিল্টার রাখুন Put

    [MenuNavigator(HeaderTop.Product, HeaderSub.Index)]
public class ProductsController : Controller
{
    public async Task<ActionResult> Index()
    {
        return View();
    }

    [MenuNavigator(HeaderTop.Dashboard, HeaderSub.Index)]
    public async Task<ActionResult> Dashboard()
    {
        return View();
    }
}

  4. এবং এটি আপনার হেডার লেআউটে এটি ব্যবহার করুন use 

    @{
var headerTop = (HeaderTop?)MenuNavigatorPageDataNavigatorPageData.HeaderTop;
var headerSub = (HeaderSub?)MenuNavigatorPageDataNavigatorPageData.HeaderSub;
}
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
    <li class="@(headerTop==HeaderTop.Dashboard?"active selected open":"")">
        <a href="@Url.Action("Index","Home")">Dashboard</a>
    </li>
    <li class="@(headerTop==HeaderTop.Product?"active selected open":"")">
        <a href="@Url.Action("Index", "Products")">Products</a>
    </li>
</ul>

আরও তথ্য: https://github.com/betalgo/MvcMenuNavigator

— টোলগা কাহান
সূত্র
0

আমি বিশ্বাস করি নির্বাচিত মেনুটি "সক্রিয়" হওয়ার জন্য এখানে একটি ক্লিনার এবং ছোট্ট কোড রয়েছে:

 <ul class="navbar-nav mr-auto">
                <li class="nav-item @Html.IfSelected("Index")">
                    <a class="nav-link" href="@Url.Action("Index", "Home")">Home</a>
                </li>
                <li class="nav-item @Html.IfSelected("Controls")">
                    <a class="nav-link" href="@Url.Action("Controls", "Home")">MVC Controls</a>
                </li>
                <li class="nav-item @Html.IfSelected("About")">
                    <a class="nav-link" href="@Url.Action("About", "Home")">About</a>
                </li>
</ul>
 public static string IfSelected(this HtmlHelper html, string action)
        {
            return html
                       .ViewContext
                       .RouteData
                       .Values["action"]
                       .ToString() == action
                            ? " active"
                            : "";
        }
— গ্যাব্রিয়েল মারিয়াস পপেস্কু
সূত্র
দুর্দান্ত, যদিও সম্ভবত কিছু ক্ষেত্রে নিয়ামক এবং ক্ষেত্রের জন্য বাড়ানো দরকার
— গ্রহক্লেয়ার
-1

আমি উপরে উত্তরগুলির সংমিশ্রণ করেছি এবং আমার সমাধান করেছি।

তাই ..

রেজার ব্লকে প্রথমে একটি স্ট্রিং ভেরিয়েবল তৈরি করুন যা নিয়ামক এবং ক্রিয়াকলাপের নাম মান ব্যবহার করবে যা ব্যবহারকারী দ্বারা ডাকা হয়। 

    @{
        string controllerAction =  ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString(); 
    }

তারপরে এইচটিএমএল এবং রেজার কোডের সংমিশ্রণটি ব্যবহার করুন: 

    <ul class="nav navbar-nav">
        <li class="@(controllerAction == "HomeIndex" ? "active" : "" )">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(controllerAction == "AboutIndex" ? "active" : "" )">@Html.ActionLink("About", "Index", "About")</li>
        <li class="@(controllerAction == "HomeContact" ? "active" : "" )">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

আমি মনে করি, এটি ভাল কারণ আপনার নিয়ামকের নাম এবং ক্রিয়াকলাপের জন্য প্রতিটি বার "ভিউকনটেক্সট.রউটিডাটা.ভ্যালুগুলি" অ্যাক্সেস করার দরকার নেই।

— নিহাদ ডেলিক
সূত্র
-1

এই সমস্যার আমার সমাধানটি হ'ল 

<li class="@(Context.Request.Path.Value.ToLower().Contains("about") ? "active " : "" ) nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
            </li>

লিঙ্কের সাথে তুলনা করার জন্য বর্তমানের পথে ফিরে আসার জন্য আরও ভাল উপায় কোনও এইচটিএমএল এক্সটেনশন পদ্ধতি যুক্ত করা হতে পারে

— মুদাসার রউফ
সূত্র
-1

আমি এটা করেছি:

মেনু আংশিক দৃশ্যে একটি সহায়ক তৈরি

 @helper RouterLink(string action, string controller)
{
    var IsActive = ViewContext.RouteData.Values["Controller"].ToString() == controller && ViewContext.RouteData.Values["Action"].ToString() == action;
    <text>href="@Url.Action(action, controller)"</text>if (IsActive){ <text>class="active"</text>}
}

তারপরে এটি অ্যাঙ্কর ট্যাগটিতে এটি ব্যবহার করুন:

<li><a @RouterLink("Index","Home")>Home</a></li>

আমার আবেদনের কোনও ক্ষেত্র ছিল না তবে এটি সহায়ক ফাংশনে অন্য পরিবর্তনশীল হিসাবেও অন্তর্ভুক্ত করা যেতে পারে। এবং আমার ভিউটিতে অ্যাঙ্কর ট্যাগটিতে সক্রিয় ক্লাসটি পাস করতে হয়েছিল। তবে liএটির মতো কনফিগারও করা যায়।

— অনুপ শর্মা
সূত্র
1
আপনি দেখুন, ডাউনভোট সত্যিকার অর্থে সহায়তা করে না যদি আপনি কারণটির উল্লেখ না করেন।
— অনুপ শর্মা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.