我有一个正在使用模板怪物的模板。在这些文件中，有一个 javascript 页面，其中包含运行页面所需的所有脚本。我已将其添加到呈现脚本的页面底部。它似乎没有访问该文件。它位于页面上，当我在“检查对象”下查看它时会出现。当我将代码片段直接放入 Razor 页面时，它就可以工作了。有什么想法为什么它不会从 javascript 文件中提取它吗？感谢您的帮助。 编辑 它位于 _Layout 页面中。菜单在哪里。
插入 Razor 页面时，以下内容有效。
<script type="text/javascript">
$(document).ready(function () {
$(".sticky-menu").sticky({ topSpacing: 0 });
});
$(window).on('load', function () {
function fadeOut(el) {
el.style.opacity = 0.4;
var last;
var tick = function () {
el.style.opacity = +el.style.opacity - (new Date() - last) / 600;
last = +new Date();
if (+el.style.opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 100);
} else {
el.style.display = "none";
}
};
tick();
}
var pagePreloaderId = document.getElementById("page-preloader");
setTimeout(function () {
fadeOut(pagePreloaderId)
}, 1000);
});
</script>
这是我在 Razor 页面中不起作用的内容
@Scripts.Render("~/Scripts/scripts.js")
顶级代码位于“scripts.js”文件中。
这个文件中有很多代码，但似乎都不起作用。这意味着它就像没有访问脚本。页面中加载的所有脚本的顺序与模板中常规 HTML 的顺序相同。模板 HTML 文件可以工作。
更新 -
我通过将其从脚本页面移至布局页面来使其工作。我仍然不确定为什么或是什么导致此代码片段无法在脚本页面中工作。这似乎是唯一不起作用的部分。
在脚本文件中是这样写的:
(function($) {
'use strict';
jQuery(document).on('ready', function() {
////// Other snippets //////
$(".sticky-menu").sticky({
topSpacing: 0
});
////// Other snippets //////
});
在 _Layout 页面中，它看起来像这样:
<script type="text/javascript">
$(document).ready(function () {
$(".sticky-menu").sticky({ topSpacing: 0 });
var hub = $.connection.notificationHub;
$.connection.hub.start()
.done(function () {
console.log("Hub Connected!");
})
.fail(function () {
console.log("Could not Connect!");
});
});
</script>
我仍然不知道为什么这在脚本文件中不起作用......
更新 - 2019 年 4 月 26 日
我已经发现问题了。该模板是使用早期版本的 jQuery 创建的。我发现当我删除时脚本文件会加载并部分工作
jQuery(document).on('ready', function () {
整个文件如下所示
(function($) {
'use strict';
jQuery(document).on('ready', function () {
---> All the jQuery Code
});
})(jQuery);
我将上面的行更改为:
}(jQuery));
我看到其他一些实现也是这样的。
然而，使用 jQuery 3.3.1 有一些不正确的地方..如果有人知道如何正确格式化它，以便它可以工作，那会有很大帮助。
最佳答案
你改变了
@Scripts.Render("~/Scripts/scripts.js")
到
<script src="~/Scripts/scripts.js"></script>
它会起作用
您可以引用此链接来了解 Script.Render 与 script 标签之间的区别
What is the difference between "@Script.Render" and "<script>"?
更新:
如果你有一个像这样的 _Layout.cshtml View
<html>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
然后你就可以有一个像这样的index.cshtml内容 View
@section scripts {
<script type="text/javascript" src="~/Scripts/scripts.js"></script>
}
关于javascript - 正确地将 JavaScript 添加到 Razor 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55821618/