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

ASP .NET MVC 5 Write javascript in View.cshtml file

本文关键字：javascript 文件 cshtml NETMVC View ASP      更新时间：2023-09-26

我是ASP.NET的新手，在MVC中与javascript作斗争。我在View文件夹中有一个IndexView.cshtml文件，我想在里面写一个简短的javascript部分，用按钮将网站移回顶部。它在普通html中工作得很好，所以就是这样。通常，每当我从网站顶部向下滚动时，就会出现一个按钮，当我回到最顶部时，按钮就会消失。在这里，它根本没有出现。我该怎么做才能让它发挥作用？提前感谢！

因此，这是在IndexView.cshtml中</body>标记之前的正文末尾。

<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-to-p.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代码。

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

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

@TheGalax你记得引用你的javascript文件吗？

--添加jQuery--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/Scripts/move-top.js"></script>
相关文章：