Asp.net MVC5怎么使用Bootstrap的滚动监听(Scrollspy)插件?

发布时间: 2017/12/29 15:22:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在MVC 5应用程序中使用Bootstrap ScrollSpy滚动监听插件。
ScrollSpy可以很好地使用纯html和jquery,但是我想在MVC 5中实现同样的功能。

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

上面的代码运行良好,但是当我尝试在MVC中实现相同的东西时,我莫名其妙地感到困惑。

<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,或者我可能做错了什么。

怎么解决?

解决方法 1:

 Bootstrap scrollspy 运行要求可滚动的元素必须与链接的ID相匹配.

这里 <li><a href="#contact" class="hidden-xs">Contact</a></li> 应该匹配div的id <div id="contact">

简易用法:

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

高端用法:

创建自定义 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>


官方微信
官方QQ群
31647020