是否有在VS2012，VS2013或VS2015中使用帶有MVC 4視圖的jquery選項卡的“工作”示例

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

更好的是：如何在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>

是否有在VS2012，VS2013或VS2015中使用帶有MVC 4視圖的jquery選項卡的“工作”示例

問題描述

2 個解決方案

解決方案1
0 2015-05-22 14:24:33

解決方案2
0 已采納 2015-05-22 14:36:41

是否有在VS2012，VS2013或VS2015中使用帶有MVC 4視圖的jquery選項卡的“工作”示例

問題描述

2 個解決方案

解決方案1 0 2015-05-22 14:24:33

解決方案2 0 已采納 2015-05-22 14:36:41

解決方案1
0 2015-05-22 14:24:33

解決方案2
0 已采納 2015-05-22 14:36:41