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

确定。这是我的第一个答案，我对此非常了解，但我花了很长时间才弄明白这一点。我希望这有助于每个人。

解决此问题的最佳方法是首先将所有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"));

现在进入views文件夹中的_Layout.cshtml页面。请注意，您也可以在此处添加脚本标记，但我要显示的是您是否要链接js文件。

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

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

您可以将多个js文件添加到捆绑包中，并使用这一行代码调用它们。来吧，运行程序，你应该是坚实的。谢谢大家请告诉我这是否适合您。

Answer 2

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

看看_Layout.cshtml。请注意，页面的底部有一行专门用于呈现名为＆＃34;脚本＆＃34;

的部分

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

因此，您需要在视图.cshtml页面中添加新部分。将其命名为＃34;脚本＆＃34;。您应该在初始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 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>

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

3 个答案: