Question

110

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

rated 0 times [ 116] [ 6] / answers: 1 / hits: 44498 / 9 Years ago, tue, december 29, 2015, 12:00:00

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!

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>

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alfonsok

Add To Favorites

Follow

Total Points: 386

Total Questions: 101

Total Answers: 90

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

answered 9 Years ago stacie · Accepted Answer

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

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)

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>

}