How to correctly place scripts files in ASP.Net MVC Application

Question

I'm new to MVC / .net and currently doing some simple exercises. I have this javascript code where I try to register my service-worker but for some reason, it's not running. I followed all the tutorial that I can find, searched up on this but still, it doesn't work. So I'm at lost here. Thank you for helping.

@RenderSection("pageScripts", required: false)
@section pageScripts{
    <script type="text/javascript" language="javascript">

        console.log('test script');

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js').
                then(function (registration) {
                    // Registration was successful
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                }).catch(function (err) {
                    // registration failed :(
                    console.log('ServiceWorker registration failed: ', err);
                });
        }

    </script>
}

@Shyju Nothing. The console.log didn't even print that test string. — azriebakri
– azriebakri, Commented Sep 23, 2017 at 16:09
Where is this code written? inside view? same view? layout page? partial view? please share your full code — Ziv Weissman
– Ziv Weissman, Commented Sep 23, 2017 at 17:03
In which file are you calling @RenderSection("pageScripts", required: false)? I tried your code, with @RenderSection("pageScripts", required: false) in the file _Layout.cshtml, and the @section in Index.chtml. The console.log call worked for me. — Jason Evans
– Jason Evans, Commented Sep 23, 2017 at 19:36
@JasonEvans placed these code in _Layout.cshtml before the </body> tag — azriebakri
– azriebakri, Commented Sep 23, 2017 at 20:45

Unbreakable · Accepted Answer · 2017-09-24 01:15:03Z

Assuming the script logic you have written is required by LayOut file you need to replace your code with below:

<script type="text/javascript" language="javascript">

            console.log('test script');

            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/service-worker.js').
                    then(function (registration) {
                        // Registration was successful
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    }).catch(function (err) {
                        // registration failed :(
                        console.log('ServiceWorker registration failed: ', err);
                    });
            }

        </script>
    @RenderSection("pageScripts", required: false) // NOTICE IT HAS COME DOWN

Kindly note that: If you are in Layout file then you DO NOT need to add

@section pageScripts{
}

On a side note, Sequence of adding scripts in your Layout file

    ....   
    ....
   </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("Any Third Party Script") 
    @Scripts.Render("Your own Custom Script file Required By Entire Application")
    <script>
       // ADD ANY Script related to LayOut Page here
        </script>
     @RenderSection("pageScripts", required: false)
</body>
</html>

Now if script is exclusively required by a particular view then..

For example: Index.csthml

...
</div>

@section pageScripts
{
  // Your script logic
}

Collectives™ on Stack Overflow

How to correctly place scripts files in ASP.Net MVC Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related