ASP .NET MVC 5 在 View.cshtml 文件中编写 javascript [关闭]答案

【问题标题】：ASP .NET MVC 5 Write javascript in View.cshtml file [closed]ASP .NET MVC 5 在 View.cshtml 文件中编写 javascript [关闭]
【发布时间】：2016-04-03 19:50:52
【问题描述】：

我是 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-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);

【问题讨论】：

我在这里没有看到问题。只是一个目标和一些代码。你有什么问题？
什么不起作用？与任何其他网站一样，ASP.NET MVC 视图基于 HTML。是什么阻止您像在 HTML 文件中一样将 JavaScript 放入其中？
哦对不起，它只是不工作;）。通常，每当我从顶部向下滚动时，我的页面按钮就会出现，但在这里却没有。看起来它甚至无法识别我的代码。
您应该尝试做基础知识，并描述您在帖子中检查的内容。例如，确保脚本正确加载、在开发者控制台中检查 JavaScript 错误、单步执行代码等。
@mason 现在我已经包含了我的其他脚本，它们完全在我的 cshtml 文件之外运行，例如，它们都工作得很好：

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案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>
}

【讨论】：

谢谢，我在脚本中添加了@section Scripts{}，它现在看起来可以工作了:) 现在唯一缺少的是按钮是透明的，看起来 .img 没有正确加载。

【解决方案2】：

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

【讨论】：

是的，我是这样做的：
发布完整的 cshtml 总是一个好主意，以便为您的问题提供更好的上下文。 @Shyju 有下一个最好的猜测 :) 见上面的编辑