8. Active Nav Link

আজকের লেকচারে স্বাগতম!

কোথায় আছি আমরা? আপনি বর্তমানে Section 25: Identity-তে আছেন। গত লেকচারে আমরা ইউজার লগইন থাকলে মেনুবারের UI কীভাবে ডাইনামিক করতে হয় তা দেখেছি। আজকে আমরা শিখবো কীভাবে মেনুবারের Active Link হাইলাইট করতে হয়। অর্থাৎ, ইউজার বর্তমানে যে পেজে অবস্থান করছে, মেনুবারে সেই পেজের লিংকের নিচে একটি আন্ডারলাইন (Underline) দেখাবে।

---

📝 Quick Summary for Revision

ভবিষ্যতে দ্রুত রিভিশন দেওয়ার জন্য পুরো লেকচারের মূল বিষয়গুলো নিচে লিস্ট করা হলো:

• Goal: বর্তমানে যে পেজ ওপেন আছে, মেনুবারে সেই পেজের লিংকের নিচে আন্ডারলাইন বা হাইলাইট করা।
• Step 1 (Set URL in Views): অ্যাপ্লিকেশনের প্রতিটি View-তে (যেমন: Index, Register, Upload) ViewBag.CurrentUrl এর মাধ্যমে বর্তমান পেজের URL সেট করা।
• Step 2 (Check in Layout): _Layout.cshtml ফাইলে if-else কন্ডিশন ব্যবহার করে চেক করা যে ViewBag.CurrentUrl বর্তমান লিংকের সাথে মিলছে কিনা।
• Step 3 (Apply CSS): যদি URL মিলে যায়, তাহলে লিংকের সাথে nav-active নামক CSS ক্লাস যুক্ত করে দেওয়া, যা লিংকের নিচে আন্ডারলাইন তৈরি করে।

---

🧠 Comprehensive Breakdown

এখানে লেকচারের প্রতিটি বিষয় বিস্তারিতভাবে এবং ধাপে ধাপে ব্যাখ্যা করা হলো:

১. The Requirement: Highlighting Active Nav Link (Priority: 8/10)

যেকোনো প্রফেশনাল ওয়েবসাইটে ইউজার যখন কোনো লিংকে ক্লিক করে নতুন পেজে যায়, তখন মেনুবারে সেই লিংকটি অন্য কালার বা আন্ডারলাইন দিয়ে হাইলাইট করা থাকে। এতে ইউজার সহজে বুঝতে পারে সে বর্তমানে ওয়েবসাইটের কোন সেকশনে আছে। আমাদের কাজ হলো এই লজিকটি ইমপ্লিমেন্ট করা।

২. Step 1: Setting Current URL in ViewBag (Priority: 10/10)

আমাদের প্রথমে ঠিক করতে হবে প্রতিটি পেজ যেন নিজে থেকেই Layout-কে বলে দিতে পারে, “আমি এখন ওপেন আছি!”। এর জন্য আমরা প্রতিটি View ফাইলের একেবারে উপরে ViewBag ব্যবহার করে বর্তমান URL-টি একটি ভ্যারিয়েবলে স্টোর করবো।

💻 Code Implementation:

• Views/Account/Register.cshtml:

@{
    ViewBag.Title = "Register";
    ViewBag.CurrentUrl = "~/Account/Register"; // বর্তমান URL সেট করা হলো
}
 

• Views/Persons/Index.cshtml:

@{
    ViewBag.Title = "Persons";
    ViewBag.CurrentUrl = "~/Persons/Index"; 
}
 

(একইভাবে Create, Edit, Delete, Upload সব ভিউতে এই লাইনটি কপি-পেস্ট করে শুধু URL-টি পাল্টে দিতে হবে)

৩. Step 2 & 3: Conditional Styling in _Layout.cshtml (Priority: 10/10)

এখন Layout ফাইল জানে কোন পেজটি ওপেন আছে। আমাদের কাজ হলো মেনুবার রেন্ডার করার সময় এই ViewBag.CurrentUrl চেক করা। যদি এটি লিংকের URL এর সাথে মিলে যায়, তবে আমরা লিংকে একটি এক্সট্রা CSS ক্লাস (nav-active) যুক্ত করবো।

💻 Code Implementation (Views/Shared/_Layout.cshtml):

<ul class="nav">
    
    @* --- Persons Link Check --- *@
    <li>
        @if (ViewBag.CurrentUrl == "~/Persons/Index")
        {
            @* URL মিলে গেলে nav-active ক্লাস যুক্ত হবে *@
            <a asp-controller="Persons" asp-action="Index" class="nav-active">Persons</a>
        }
        else
        {
            @* না মিললে রেগুলার লিংক *@
            <a asp-controller="Persons" asp-action="Index">Persons</a>
        }
    </li>
 
    @* --- Upload Link Check --- *@
    <li>
        @if (ViewBag.CurrentUrl == "~/Countries/UploadFromExcel")
        {
            <a asp-controller="Countries" asp-action="UploadFromExcel" class="nav-active">Upload</a>
        }
        else
        {
            <a asp-controller="Countries" asp-action="UploadFromExcel">Upload</a>
        }
    </li>
 
    @* --- Register Link Check (লগইন না থাকলে) --- *@
    @if (!User.Identity.IsAuthenticated)
    {
        <li>
            @if (ViewBag.CurrentUrl == "~/Account/Register")
            {
                <a asp-controller="Account" asp-action="Register" class="nav-active">Register</a>
            }
            else
            {
                <a asp-controller="Account" asp-action="Register">Register</a>
            }
        </li>
    }
</ul>
 

(নোট: CSS ফাইলে nav-active ক্লাসে আগে থেকেই border-bottom বা আন্ডারলাইনের স্টাইল লেখা আছে, তাই এটি অটোমেটিক কাজ করবে।)

---

🌟 Best Practices & Smarter Updates (.NET 10 Context)

• Avoid Hardcoding URLs (ViewBag approach limitation): লেকচারার যে পদ্ধতি দেখিয়েছেন তা কাজ করবে, কিন্তু এটি অনেক বেশি ম্যানুয়াল কাজ। প্রতিটি ভিউতে গিয়ে ViewBag সেট করা এবং Layout-এ বড় বড় if-else লেখা বেশ ঝামেলার এবং ভুল হওয়ার সম্ভাবনা থাকে।
• Smarter Approach (HTML Helper / Tag Helper): .NET 10 বা মডার্ন MVC অ্যাপ্লিকেশনে আমরা ViewBag-এর বদলে সরাসরি Controller এবং Action এর নাম চেক করতে পারি।
• বর্তমান রিকোয়েস্টের কনট্রোলার ও অ্যাকশন পাওয়া যায় ViewContext.RouteData.Values["controller"] এবং ["action"] থেকে।
• আপনি চাইলে একটি কাস্টম TagHelper বা Extension Method লিখতে পারেন, যা অটোমেটিকভাবে চেক করে নিবে যে লিংকের কনট্রোলার এবং অ্যাকশন বর্তমান পেজের সাথে মিলে কিনা, আর মিললে নিজ থেকেই active ক্লাস বসিয়ে দিবে। এতে কোনো ভিউ ফাইলে ViewBag লেখার প্রয়োজনই পড়বে না!

(যেহেতু আপনি কোর্সের ফ্লোতে আছেন, তাই লেকচারারের দেখানো পদ্ধতিটিই প্র্যাকটিস করুন। তবে মাথায় রাখবেন, রিয়েল-ওয়ার্ল্ড প্রজেক্টে এই কাজগুলো আরও ডাইনামিক উপায়ে করা যায়।)

পরবর্তী লেকচারে আমরা শিখবো কীভাবে Identity-র Password Complexity (যেমন: পাসওয়ার্ডে বড় হাতের অক্ষর, নাম্বার, বা স্পেশাল ক্যারেক্টার লাগবে কিনা) কনফিগার করতে হয়!