MVC 5でブートストラップscrollspyを操作する

Question

私はMVC 5アプリケーションでBootstrap ScrollSpyを使用しています。
上記のコードは正常に動作しますが、私はMVCで同じことを実現しようとしたとき、私は何とか取得

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

MVC 5にScrollSpyは、単純なHTMLとjQueryを使って正常に動作しますが、私は同じことを実現したいです混乱している。

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

その指定がactionNameのにリダイレクトしようとしているとして、予想通りこれは働いていないか、または私が何か間違ったことをやっていてもよいです。
提案する。

Answer 1

要件Bootstrapscrollspyが動作するために、スクロール可能な要素は、リンクのIDと一致する必要があります。

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

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

HTML.ActionLink対Url.Actionhere間のチェック差：ここ

<li><a href="#contact" class="hidden-xs">Contact</a></li>は、ID MVCを使用して<div id="contact">

でのdivと一致する必要があります。

だから、最終的には、サーバ側の両方で、以下に示すようhash(#)前にスラッシュを末尾にurlを生成します。

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

そしてこうしてリンク上記#

の前にあるため/のIDを<div id="contact">とdiv要素と一致していませんソリューションMvcを使用して：

カスタムを作成UrlHelper

Helpersという名前のフォルダを作成し、UrlExtensionsは、最終的には、コードの下に追加しますという名前のクラスを追加：ビューで

public static class UrlExtensions 
{ 

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

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

    return hashAnchorLink; 

    } 

} 

：

@using YourProjectName.Helpers; 

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

注：

ベストソリューションを使用していますがサーバを使用してハッシュリンクを返す代わりに、以前と同じようにプレーンhtmlを使用します。

参考文献：

1.

2.

3.

Answer 2

あなたは適切なパラメータをActionLink()に渡しません。

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