ASP .NET MVC 5在View.cshtml文件中编写javascript [英] ASP .NET MVC 5 Write javascript in View.cshtml file

问题描述

我是ASP .NET的新手，并且在MVC中使用JavaScript苦苦挣扎. 我在View文件夹中有一个IndexView.cshtml文件，并想在其中写一个简短的javascript部分，以通过按钮将网站移回顶部. 它在普通的html中完美地工作，就是这样. 通常，每当我从网站顶部向下滚动时，就会显示一个按钮，而当我回到顶部时，该按钮就会消失.在这里它根本不显示. 我该怎么做才能使其正常工作? 预先感谢！

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!

所以这是在</body>标记之前在IndexView.cshtml中我的身体的尽头.

So this is at the end of my body in IndexView.cshtml right before </body> tag.

<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的一部分

And this it the part of move-top.js inside Scripts folder /Scripts/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);

推荐答案

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

Looks like your js code is dependent on the jQuery library. That means you need to load jQuery code before execcuting this code.

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

In the Layout file, @RenderSection("scripts", required: false) is called at the very bottom after loading jQuery library.

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

在您看来，您应该在Scripts部分中包含所有与jQuery相关的脚本，以便在页面完全呈现后将其添加到底部(在加载其他类似jQuery的库之后) ;

And in your view, you should be including any script which is dependent of jQuery inside the Scripts section so that when the page is fully rendered, it will be added to the bottom ( After other libraries like jQuery is loaded);

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

这篇关于ASP .NET MVC 5在View.cshtml文件中编写javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！