asp.net mvC语言 是否有在VS2012,VS2013或VS2015中使用带有MVC 4视图的jquery选项卡的"working"示例



我看过很多在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>

我知道引用和脚本应该通过助手完成,但我想看到一个完整的工作代码,以防我做任何打字错误。

除了使用偏导数,这不是我的本意,我唯一能找到的是http://getbootstrap.com/javascript/#tabs。

要使其工作,必须安装Bootstrap,最简单的方法是通过NuGet。

甚至更好:如何在asp.net MVC4视图页面中包含javascript代码?

全页代码为:

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

最新更新