ASP .NET MVC 5在View.cshtml文件中编写javascript

Question

我是ASP .NET的新手,我在MVC中苦苦挣扎.我在View文件夹中有一个IndexView.cshtml文件,想在里面写一个简短的javascript部分,用一个按钮将网站移回顶部.它在普通的html中完美运行,所以就有了.通常情况下,每当我从站点顶部向下滚动时,按钮就会显示,当我回到最顶层时,按钮会消失.这里根本没有显示出来.我能做些什么才能让它发挥作用？提前致谢!

所以这是我在</body>标签前的IndexView.cshtml中的结尾.

<script type="text/javascript">
        $(document).ready(function() {
            $().UItoTop({ easingType: 'easeOutQuart' });

        });
    </script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>

这就是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);

Answer 1

看起来你的js代码依赖于jQuery库.这意味着您需要在执行此代码之前加载jQuery代码.

在Layout文件中, @RenderSection("scripts", required: false)在加载jQuery库之后在最底层调用.

<div id="pageContent">
    @RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

在您的视图中,您应该在该Scripts部分中包含任何依赖于jQuery的脚本,这样当页面完全呈现时,它将被添加到底部(在加载其他库之后如jQuery);

<h2>This is my View</h2>
@section Scripts
{
    <script>
      $(function(){
         alert("All good");
      });
    </script>
}