Bagaimana untuk Menggayakan Pautan Navigasi Aktif dengan Berkesan dalam ASP.NET MVC?

Menggayakan Elemen Navigasi dengan Kelas "aktif" dalam ASP.NET MVC

Pengenalan

Dalam aplikasi ASP.NET MVC, pembantu Html.ActionLink biasanya digunakan untuk membuat pautan navigasi. Apabila menggabungkan penggayaan Bootstrap, adalah penting untuk menggunakan kelas "aktif" pada elemen navigasi yang sepadan. Artikel ini akan membimbing anda melalui penambahan kelas "aktif" pada pautan navigasi menggunakan pembantu Html.ActionLink dan menyediakan penyelesaian yang lebih elegan menggunakan sambungan pembantu HTML.

Memohon Kelas "aktif" dengan Html.ActionLink

Pertimbangkan senario berikut:

<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>

Kod ini menjana navigasi pautan, tetapi kelas "aktif" digunakan pada tag, membawa kepada struktur Bootstrap yang tidak sah. Untuk membetulkannya, gunakan kelas "aktif" pada

sebaliknya elemen:

<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>

Ini akan menggunakan kelas "aktif" dengan betul pada elemen navigasi semasa berdasarkan halaman aktif.

Menggunakan Sambungan Pembantu HTML untuk Penggayaan Dinamik

Untuk menyediakan penyelesaian yang lebih fleksibel dan boleh digunakan semula, anda boleh membuat sambungan pembantu HTML seperti ini:

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;
}

Kaedah sambungan ini memerlukan tiga parameter: pengawal, tindakan dan kelas CSS pilihan. Ia menyemak sama ada tindakan semasa dan pengawal sepadan dengan nilai yang ditentukan dan mengembalikan cssClass jika ada, atau rentetan kosong sebaliknya.

Penggunaan Sambungan Pembantu HTML

Untuk menggunakan sambungan ini, tambahkan menggunakan pernyataan ke halaman:

@using YourNamespace;

Kemudian, dalam paparan, anda boleh menggunakan kelas "aktif" sebagai berikut:

<ul>
    <li>@Html.ActionLink("Home", "Home", "Default", null, new {@class="@Html.IsSelected(actions: "Home", controllers: "Default")"})</li>
    <li>@Html.ActionLink("About", "About", "Default", null, new {@class="@Html.IsSelected(actions: "About", controllers: "Default")"})</li>
</ul>

Kesimpulan

Dengan menggunakan kelas "aktif" pada elemen HTML yang betul dan memanfaatkan sambungan pembantu HTML yang disediakan, anda boleh mengurus keadaan aktif pautan navigasi dalam ASP dengan berkesan Aplikasi .NET MVC, memastikan ketekalan dan organisasi kod yang lebih bersih.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Pautan Navigasi Aktif dengan Berkesan dalam ASP.NET MVC?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!