Adding a javascript to a razor page properly

Question

I have a template that I am using from template monster. In the files there is a javascript page that has all of the scripts needed to run the pages. I have added this to the bottom of the page where the scripts are rendered. It does not seem to be accessing the file. It is on the page and comes up when I am viewing it under the "Inspect object". When I put the code snippet directly in the razor page it works. Any ideas why it would not be pulling it from the javascript file? Thanks for your help. EDIT This resides in the _Layout page. Where the Menu is.

The below works when inserted in the razor page.

<script type="text/javascript">
    $(document).ready(function () {

        $(".sticky-menu").sticky({ topSpacing: 0 });

    });

    $(window).on('load', function () {
        function fadeOut(el) {
            el.style.opacity = 0.4;
            var last;
            var tick = function () {
                el.style.opacity = +el.style.opacity - (new Date() - last) / 600;
                last = +new Date();
                if (+el.style.opacity > 0) {
                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 100);
                } else {
                    el.style.display = "none";
                }
            };
            tick();
        }
        var pagePreloaderId = document.getElementById("page-preloader");
        setTimeout(function () {
            fadeOut(pagePreloaderId)
        }, 1000);
    });

</script>

This is what I have in the razor page that does not work

 @Scripts.Render("~/Scripts/scripts.js")

The Top code resides in the "scripts.js" file.

There is a lot of code in this file and it seems like none of it is working. Meaning it is like it is not accessing the script. All the scripts that are loaded in the page are in the same order as the Regular HTML in the template. The template HTML file works.

UPDATE -

I got this to work by moving this out of the script page and onto the layout page. I am still not sure why or what was causing this snippet not to work in the script page. It seems like the only part that wasnt working.

In the script file it is written like this:

(function($) {
'use strict';

jQuery(document).on('ready', function() {
  ////// Other snippets //////

      $(".sticky-menu").sticky({
        topSpacing: 0
       });
  ////// Other snippets //////

 });

In the _Layout page it looks like this:

 <script type="text/javascript">
        $(document).ready(function () {

            $(".sticky-menu").sticky({ topSpacing: 0 });

            var hub = $.connection.notificationHub;
            $.connection.hub.start()
                .done(function () {
                    console.log("Hub Connected!");

                })
                .fail(function () {
                    console.log("Could not Connect!");
                });
        });
 </script>

I still do not know why this does not work from the Script file...

UPDATE - 4-26-2019

I have found the problem. The Template was created with a earlier version of jQuery. I have found that the Script file loads and partially works when I remove

jQuery(document).on('ready', function () {

The entire file looks like this

(function($) {
'use strict';

    jQuery(document).on('ready', function () { 

    ---> All the jQuery Code

    });

 })(jQuery);

I changed the above line to be:

 }(jQuery));

I saw some other implementations that had it this way.

However there is something not right with this using jQuery 3.3.1.. if anyone knows how to properly format this so it works that would help alot.

In visual studio you can drag and drop your script file on to the page in the editor and it will automatically create the mark-up for you. — E McG, Apr 24 '19 at 17:19
Yes but that would be for a page itself. Not necessarily for the _Layout page. Where I am using @Scripts.Render("") — S.Purtan, Apr 24 '19 at 18:33
if you are using that same script on all pages, then adding with a — E McG, Apr 26 '19 at 19:27

Hien Nguyen · Answer 1 · 2019-04-24T02:51:57.493

2

You change from

@Scripts.Render("~/Scripts/scripts.js")

to

<script src="~/Scripts/scripts.js"></script>

It will work

You can refer this link to understand different between Script.Render vs script tag

What is the difference between "@Script.Render" and "<script>"?

Update:

If you have a _Layout.cshtml view like this

<html>
    <body>
        @RenderBody()
        @RenderSection("scripts", required: false)
    </body>
</html>

then you can have an index.cshtml content view like this

@section scripts {
     <script type="text/javascript" src="~/Scripts/scripts.js"></script>
}

edited Apr 24 '19 at 02:51

answered Apr 24 '19 at 02:47

Hien Nguyen

24,551
7
52
62

I tried that, however I did not do that to all of the 16 scripts being loaded on the page. Any reason why the normal Razor way to do it, doesn't work? – S.Purtan Apr 24 '19 at 02:49
you can use section script in layout – Hien Nguyen Apr 24 '19 at 02:52
This is actually in the _Layout page. The layout page has a menu and it is supposed to stick to the top when you scroll. that is what the code is supposed to do. – S.Purtan Apr 24 '19 at 03:01
did you try ctrl+f5 to clean up the cache? – Hien Nguyen Apr 24 '19 at 04:30
I have cleaned cache, cleaned the solution, and rebuilt the solution. Still does not work. Could it be that I am using a newer version of jQuery than what came with the template? – S.Purtan Apr 24 '19 at 14:11
No that is not it either. I downgraded the jQuery and it is the same thing. – S.Purtan Apr 24 '19 at 14:30

Adding a javascript to a razor page properly

1 Answers1