将脚本文件添加到 MVC4 应用程序和 _Layout.cshtml 混淆

Question

这可能是我记错了，但是...

我正在创建一个 MVC4 应用程序并在索引页面中添加两个 .js 文件：

    <script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
    <script type="text/javascript" src="~/Scripts/moment.js"></script>

这会添加文件，但不会对它们做任何事情。我唯一一次得到想要的结果是我将文件添加到_Layout.cshtml。

我确信在过去的项目中我可以将 .js 文件添加到页面并且效果很好，为什么从头开始项目时我需要将所有内容都放在 _Layout.cshtml 文件中？我做错了吗？

编辑： index.cshtml文件中唯一的代码是：

<link rel='stylesheet' href='~/Content/fullcalendar.css'>
<script type="text/javascript" src="/Scripts/fullcalendar.js"></script>
<script type="text/javascript" src="/Scripts/moment.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
            left: 'prev, next today',
            center: 'title',
            right: 'month, agendaWeek, agendaDay'
        },
        defaultView: 'month',
        firstDay: 1,
        editable: true,
        selectable: true,
        slotMinutes: 60
    });
});
</script>
<body>
    <div id='calendar'></div>
</body>

当脚本也在 `_Layout.cshtml' 中时呈现良好，但不在时呈现良好。

Answer 1

只是想在上面的答案中添加一点。如果希望将自定义 JavaScript 添加到特定视图，并且您使用的是来自 Microsoft 的标准 MVC4 模板，则所有捆绑的 jQuery 和 BootStrap javascript 都位于页面底部。这样做的原因是这些将在 DOM（文档对象模型，基本上是包含所有 html 内容的页面）在浏览器中呈现后加载。

查看 _Layout.cshtml。请注意，页面底部有一行专门用于呈现名为“脚本”的部分

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

所以您需要做的是在您的视图 .cshtml 页面中添加新部分。将其命名为“脚本”。您应该在初始 ViewBag 部分之后添加它。

ExampleView.cshtml：

@{
     ViewBag.Title = "Example View";
}

@section scripts{
    <script type="text/javascript">
        //Here is the custom javascript just for this view.
        alert("I will only say hello on view.");    
    </script>
}

当您启动视图时，此自定义 JavaScript 将仅在此视图上运行。

希望这会有所帮助。

Answer 2

好的。这是我的第一个答案，我对此感到非常兴奋，但我花了很长时间才弄清楚这一点。我希望这对每个人都有帮助。

解决此问题的最佳方法是首先将所有 js 文件放在解决方案资源管理器中 MVC 应用程序的 Script 文件夹中。确保它们以 .js 结尾，并且不在 Scripts 文件夹的其他子文件夹中。

将该文件添加到 Scripts 文件夹后，转到 App_Start 文件夹。您将看到类文件 BundleConfig.cs 打开该文件。这是您将 js 文件添加到包中的地方

代码应如下所示：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/Your.JavaScript.File.js"));

现在进入视图文件夹中的 _Layout.cshtml 页面。请注意，您也可以在此处添加脚本标签，但我展示的是如果您希望链接 js 文件。

在结束正文标记上方添加此代码。

@Scripts.Render("~/bundles/jquery")
</body>
</html>

您可以将多个 js 文件添加到包中，并使用这行代码将它们全部调用。 继续运行程序，你应该很稳定。谢谢大家如果这对你有用，请告诉我。

Answer 3

如果您将脚本文件附加到您的 _Layout.cshtml 页面，这意味着您的所有视图源都包含这些脚本文件，无论任何特定视图是否需要它们。实际上，您在 _Layout.cshtml 页面中附加的所有脚本都会转到每个视图。但是，如果您特别在视图中附加了脚本文件，则意味着这些文件仅附加到该视图中。

这里你犯了一个小错误。从 _Layout.cshtml 页面中删除您的脚本文件并尝试以下操作：

在_Layout.cshtml中：

<head>
@RenderSection("myStyles", false);             // section (for css) which layout fetch from view
@RenderSection("myScripts", false);            // section (for jscript) which layout fetch from view
</head>

在你看来：

@section myStyles{
<link rel='stylesheet' href='~/Content/fullcalendar.css'>
}

@section myScripts{

<script type="text/javascript" src="/Scripts/fullcalendar.js"></script>
<script type="text/javascript" src="/Scripts/moment.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
            left: 'prev, next today',
            center: 'title',
            right: 'month, agendaWeek, agendaDay'
        },
        defaultView: 'month',
        firstDay: 1,
        editable: true,
        selectable: true,
        slotMinutes: 60
    });
});
</script>

}

<body>
//do whatever you want
</body>