是否有在 VS2012、VS2013 或 VS2015 中将 jquery 选项卡与 MVC 4 视图一起使用的 "working" 示例

Question

我见过很多在 MVC 中使用选项卡的示例（主要是 VS2010），但我无法让它们中的任何一个在使用较新版本的 VS IDE 的视图中实际工作。那么有没有包含在 VS2013 中有效的引用的示例？

我在 HTML 中工作但在 MVC 中不工作的代码是：

@{
    ViewBag.Title = "Edit1";
}

<h2>Edit1</h2>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
<script>
        $(function () {
            $("#tabs").tabs();
        });
</script>
<div id="tabs">

    <ul>
        <li><a href="#tabs-1">Tab Header 1</a></li>
        <li><a href="#tabs-2">Tab Header 2</a></li>
        <li><a href="#tabs-3">Tab Header 3</a></li>
    </ul>

    <div id="tabs-1">
        Content for Tab 1 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

    <div id="tabs-2">
        Content for Tab 2 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

    <div id="tabs-3">
        Content for Tab 3 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

</div>

我知道引用和脚本应该通过助手来完成，但我希望看到完整的工作代码以防我出现任何错字。

Answer 1

除了使用部分，这不是我的意图，我唯一能找到的是 http://getbootstrap.com/javascript/#tabs .

要使其正常工作，必须安装 Bootstrap，最简单的方法是通过 NuGet 完成。

Answer 2

更好：How to include javascript code in asp.net MVC4 View page?

完整页面代码为：

 @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Foo</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
    <div id="sections">
        <ul>
            <li><a href="#section-1">section-1 </a></li>
            <li><a href="#section-2">section-2 </a></li>
        </ul>
        <div id="section-1">
            section-1 content............  
        </div>
        <div id="section-2">
            section-2 content............ 
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    <script type="text/javascript">
        $("#sections").tabs();
    </script>
</body>
</html>

是否有在 VS2012、VS2013 或 VS2015 中将 jquery 选项卡与 MVC 4 视图一起使用的 "working" 示例

Is there a "working" example of using jquery tabs with MVC 4 views in VS2012, VS2013 or VS2015

asp.net-mvc

jquery

tabs

asp.net-mvc-4

visual-studio-2013