ASP .NET MVC 5 在 View.cshtml 文件中编写 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34519342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP .NET MVC 5 Write javascript in View.cshtml file
提问by TheGalax
I'm new to ASP .NET and I am struggling with javascript in MVC. I have a IndexView.cshtml file inside View folder and would like to write a short javascript section inside to move site back to top with a button. It works perfectly in normal html so there is that. Normally a button shows up whenever I scroll down from top of a site and disappears when I go back up to the very top. Here it does not show up at all. What could I do to make it work? Thanks in advance!
我是 ASP .NET 的新手，我正在 MVC 中使用 javascript。我在 View 文件夹中有一个 IndexView.cshtml 文件，我想在里面写一个简短的 javascript 部分，用一个按钮将站点移回顶部。它在普通 html 中完美运行，所以就是这样。通常，每当我从网站顶部向下滚动时，就会出现一个按钮，当我回到最顶部时，按钮就会消失。在这里它根本不显示。我该怎么做才能让它发挥作用？提前致谢！
So this is at the end of my body in IndexView.cshtml right before </body>tag.
所以这是在 IndexView.cshtml 中我正文的末尾，就在</body>标记之前。
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop"><span id="toTopHover"> </span></a>
And this it the part of move-top.js inside Scripts folder /Scripts/move-top.js
这是 Scripts 文件夹 /Scripts/move-top.js 中的 move-top.js 的一部分
(function ($) {
$.fn.UItoTop = function (options) {
var defaults = {
text: 'To Top', min: 200, inDelay: 600, outDelay: 400, containerID: 'toTop', containerHoverID: 'toTopHover',
scrollSpeed: 1200, easingType: 'linear'
}, settings = $.extend(defaults, options), containerIDhash = '#' + settings.containerID, containerHoverIDHash = '#' + settings.containerHoverID;
$('body').append('<a href="#" id="' + settings.containerID + '">' + settings.text + '</a>');
$(containerIDhash).hide().on('click.UItoTop', function ()
{
$('html, body').animate({ scrollTop: 0 }, settings.scrollSpeed, settings.easingType);
$('#' + settings.containerHoverID, this).stop().animate({ 'opacity': 0 }, settings.inDelay, settings.easingType); return false;
}).prepend('<span id="' + settings.containerHoverID + '"></span>').hover(function ()
{ $(containerHoverIDHash, this).stop().animate({ 'opacity': 1 }, 600, 'linear'); }, function ()
{ $(containerHoverIDHash, this).stop().animate({ 'opacity': 0 }, 700, 'linear'); });
$(window).scroll(function () {
var sd = $(window).scrollTop();
if (typeof document.body.style.maxHeight === "undefined")
{
$(containerIDhash).css({
'position': 'absolute', 'top': sd + $(window).height() - 50
});
}
if(sd>settings.min)
$(containerIDhash).fadeIn(settings.inDelay);else
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery);
回答by Shyju
Looks like your js code is dependent on the jQuery library. That means you need to load jQuery code before execcuting this code.
看起来您的 js 代码依赖于 jQuery 库。这意味着您需要在执行此代码之前加载 jQuery 代码。
In the Layout file, @RenderSection("scripts", required: false)is called at the very bottom after loading jQuery library.
在 Layout 文件中， @RenderSection("scripts", required: false)在加载 jQuery 库后在最底部调用。
<div id="pageContent">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
And in your view, you should be including any script which is dependent of jQuery inside the Scriptssection so that when the page is fully rendered, it will be added to the bottom ( After other libraries like jQuery is loaded);
在您看来，您应该在该Scripts部分中包含任何依赖于 jQuery 的脚本，以便当页面完全呈现时，它将被添加到底部（在加载其他库如 jQuery 之后）；
<h2>This is my View</h2>
@section Scripts
{
<script>
$(function(){
alert("All good");
});
</script>
}
回答by Harleyz
@TheGalax did you remember to reference your javascript file?
@TheGalax 你记得引用你的 javascript 文件吗？
-- Added jQuery --
-- 添加了 jQuery --
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/Scripts/move-top.js"></script>
