Arbeiten mit bootstrap scrollspy in MVC 5

Question

Ich benutze Bootstrap ScrollSpy in MVC 5-Anwendung.
ScrollSpy arbeitet mit einfachem HTML und jquery gut, aber ich möchte die gleiche Sache in MVC 5.

<li><a href="#about" class="hidden-xs">About</a></li> 
<li><a href="#contact" class="hidden-xs">Contact</a></li> 

der obige Code funktioniert gut, implementieren, aber wenn ich die gleiche Sache in MVC zu implementieren versucht, bekomme ich irgendwie verwirrt.

<li> @Html.ActionLink("About", null, null, null, new { @class = "hidden-xs" })</li> 
<li> @Html.ActionLink("Contact", null,null, null, new { @class = "hidden-xs" })</li> 

Dies funktioniert nicht wie erwartet als Versuch zu bestimmtem Aktionsnamen zu umleiten oder ich kann etwas falsch sein.
Schlagen Sie etwas vor.

Answer 1

Voraussetzung für Bootstrapscrollspy zu arbeiten, müssen die rollbaren Elemente, die die ID der Verbindungen entsprechen.

Hier <li><a href="#contact" class="hidden-xs">Contact</a></li> sollte div übereinstimmen mit der ID <div id="contact">

Mit Mvc:

<li> @Html.ActionLink("Contact", "Index", "Home", null, null, "contact", null, null)</li> 

<li> <a href="@Url.Action("Index", "Home")#contact">Contact</a></li> 

Preisdifferenz zwischen HTML.ActionLink vs Url.Actionhere.

So endlich in Server-Seite beid url vor hash(#) mit Schrägstrich erzeugt, wie unten dargestellt:

<a href="/#contact">Contact</a> 

Und so obigen Link mit der ID <div id="contact"> wegen / vor #

nicht div überein Lösung Verwenden von Mvc:

Benutzerdefiniert erstellen UrlHelper

Erstellen Sie einen Ordner Helpers Namen und eine Klasse hinzufügen namens UrlExtensions schließlich unter Code hinzu:

public static class UrlExtensions 
{ 

    public static string HashAnchorLinks(this UrlHelper url, string hashLinkName) 
    { 

    string hashAnchorLink = string.Format("#{0}", hashLinkName); 

    return hashAnchorLink; 

    } 

} 

In Aussicht:

@using YourProjectName.Helpers; 

<li> <a href="@Url.HashAnchorLinks("about")">About</a></li> 
<li> <a href="@Url.HashAnchorLinks("contact")">Contact</a></li> 

Hinweis:

beste Lösung wäre, mit plain html wie zuvor, anstatt den Server zu verwenden, um den Hash-Link zurückzugeben.

Referenzen:

1.

2.

3.

Answer 2

Sie geben die richtigen Parameter nicht in die ActionLink() ein.

@Html.ActionLink("About", "Home", "About", new object { }, new { @class = "hidden-xs"}) 
@Html.ActionLink("Contact", "Home", "Contact", new object { }, new { @class = "hidden-xs"}) 

Here is a explanation of the function.