Question

我已经看过很多在MVC中使用Tabs的例子（主要是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>

有没有＆＃34;工作＆＃34;在VS2012，VS2013或VS2015中使用带有MVC 4视图的jquery选项卡的示例

2 个答案: