如何在 asp.net MVC4 查看页面中包含 javascript 代码？答案

【问题标题】：How to include javascript code in asp.net MVC4 View page?如何在 asp.net MVC4 查看页面中包含 javascript 代码？
【发布时间】：2012-10-17 10:43:41
【问题描述】：

我是 asp.net MVC4 架构的新手，我遇到了以下问题，请帮助我。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

<script type="text/javascript">
$(function () {
    $("#sections").tabs();
    //here i am getting error that Object[object object] has not method tabs    
});
</script>

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

提前致谢......

【问题讨论】：

标签： asp.net-mvc-4

【解决方案1】：

您可能已经包含了两次 ~/bundles/jquery 捆绑包。签出您的 ~/Views/Shared/_Layout.cshtml 文件。最后你可能有以下内容：

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

所以 jQuery 包已经包含在您的页面中。您不应该再次将它包含在您的视图中。您只需要 ~/bundles/jqueryui 捆绑包：

@Scripts.Render("~/bundles/jqueryui")

<script type="text/javascript">
$(function () {
    $("#sections").tabs();
    //here i am getting error that Object[object object] has not method tabs    
});
</script>

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

更新：

以下是视图结构的完整示例：

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

【讨论】：

感谢您的回复...但是当我删除 @Scripts.Render("~/bundles/jqueryui") 这一行时，它说 $ 未定义...
您不应删除@Scripts.Render("~/bundles/jqueryui") 行。如果@Scripts.Render("~/bundles/jquery") 已经存在于您的_Layout.cshtml 中，您应该删除它。是这样吗？我已经用您的视图可能看起来如何的示例更新了我的答案。
当您不使用捆绑程序时，您如何做到这一点？（或任何其他缩小。）我得到与 OP 相同的行为。它包含在 _Layout 中，但我还必须将它包含在我想使用 JavaScript 的每个页面中。否则我会得到 $ 未定义。