Fatal编程技术网
  • jquery/
  • Jquery 向MVC4应用程序和ulayout.cshtml添加脚本文件

Jquery 向MVC4应用程序和ulayout.cshtml添加脚本文件

jquery .net asp.net-mvc asp.net-mvc-4 razor

Jquery 向MVC4应用程序和ulayout.cshtml添加脚本文件,jquery,.net,asp.net-mvc,asp.net-mvc-4,razor,Jquery,.net,Asp.net Mvc,Asp.net Mvc 4,Razor,这可能是我记错了，但是 我正在创建一个MVC4应用程序，并在索引页面中添加两个.js文件： <script type="text/javascript" src="~/Scripts/fullcalendar.js"></script> <script type="text/javascript" src="~/Scripts/moment.js"></script> 当脚本也在“\u Layout.cshtml”中时，渲染效果良

这可能是我记错了，但是

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

    <script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
    <script type="text/javascript" src="~/Scripts/moment.js"></script>
当脚本也在“\u Layout.cshtml”中时，渲染效果良好，但当脚本不在“\u Layout.cshtml”中时，渲染效果不好。

如果您将脚本文件附加到\u 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>


@RenderSection（“myStyles”，false）；//从视图中获取布局的节（用于css）
@RenderSection（“myScripts”，false）；//从视图中获取布局的节（对于jscript）
在你看来：

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

@section myStyles{
}
@节myScripts{
$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
defaultView:'月份'，
第一天：1，
是的，
是的，
慢分钟：60
});
});
}
//你想干什么就干什么
好的。这是我的第一个答案，对此我真的很生气，但我花了很长时间才弄明白。我希望这对每个人都有帮助

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

将该文件添加到脚本文件夹后，转到应用程序启动文件夹。您将看到类文件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>

@Scripts.Render（“~/bundles/jquery”）
您可以将几个js文件添加到包中，并使用这一行代码调用它们。
继续运行这个程序，你应该是可靠的。谢谢各位，请让我知道这是否对你们有效。

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

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

@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@RenderSection（“脚本”，必需：false）
所以，您需要做的是在view.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>
}

@{
ViewBag.Title=“示例视图”；
}
@节脚本{
//以下是仅用于此视图的自定义javascript。
警惕（“我只会在观看时打招呼。”）；
}
启动视图时，此自定义JavaScript将仅在此视图上运行

希望这能有所帮助。

这要看情况而定。您的视图看起来像什么？它是否按照您的预期呈现HTML？已更新以包含视图代码。当脚本文件位于_Layout.cshtml中时，它会正常工作，但当我将其从中删除时，它不会正常工作。控制台上是否存在任何脚本错误？您似乎使用jQuery，但尚未链接库。你的布局包括这个吗？呈现的HTML有什么不同？没有脚本错误，Jquery包含在包中，因此不需要添加到页面中（我添加它是为了确保，但它没有什么不同）。它工作时的呈现方式类似于此的空白版本：当我从_Layout.cshtml中删除脚本标记时，它只是呈现为空白页面。这是从web服务器的根目录运行的吗？如果没有，您需要在文件路径中添加~号。谢谢，@atleasttherestast。你的建议对我有用。在我的例子中，我有一个特定的
.js
文件，我只想加载一个
.cshtml
文件。我将
.js
文件放入它自己的包（例如名为“foo”）中，而不是将它添加到包含jquery文件的包中。我在
.cshtml
文件中添加了
@Scripts.Render（“~/bundles/foo”）
。 
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

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