Question 414638 in Javascript Question posted in
A very good W3school tutorial can be found here.

I have a problem with <script src="_framework/blazor.server.js"></script> when I use it in the _Layout.cshtml file along with JavaScript

I have a problem that I am facing while working with Blazor Server in .NET 8. My JavaScript scripts stop working correctly when I try to load the script <script src="_framework/blazor.server.js"></script> in the _Layout.cshtml file.
When I include this script, my own JavaScript scripts stop working (they actually work for a fraction of a second, then the screen flickers and the scripts stop working). However, when I remove the references to .js files in _Layout.cshtml and place them directly in files like page1.razor, everything works fine.

File _Layout.cshtml:

<base href="~/" />

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <script src="js/test/custom.js"></script>
    <script src="js/test/swiper.js"></script>
    <script src="js/test/gallery.js"></script>
    <script src="js/test/Pager.js"></script>
    <script src="js/test/picture.js"></script>
    <script src="js/main.js"></script>

    <script src="_framework/blazor.server.js"></script>

I would like all my references to JavaScript files to be contained in the _Layout.cshtml file so that they are global and work correctly across the entire page. My JavaScript scripts are intended to trigger interactions, such as .

I have already searched through threads related to similar issues, including one on StackOverflow: Why can't I load any js after my blazor.server.js?, but I couldn’t find a solution to my problem.

Has anyone encountered a similar issue and could help me? Maybe someone knows the solution to correctly load blazor.server.js in _Layout.cshtml so that my JavaScript scripts work properly across the entire page?"

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Unfortunately, it’s not working. When I use your code, the scripts are not visible in the developer tools -> network. However, I modified your code to:

    
<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <base href="~/" />
    <link rel="stylesheet" href="css/swiper.js">
    <link rel="stylesheet" href="css/picture.js">

    <link rel="stylesheet" href="css/Pager.js">


    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <!-- Load Blazor first -->
    <script src="_framework/blazor.server.js"></script>

    <!-- Wait for Blazor, then load your scripts -->
   
<script> 
    document.addEventListener('DOMContentLoaded', function () {
        loadScripts([
            'js/test/custom.js',
            'js/test/swiper.js',
            'js/test/gallery.js',
            'js/test/Pager.js',
            'js/test/picture.js',
            'js/main.js'
        ]);
    });

    function loadScripts(srcs) {
        srcs.forEach(src => {
            const script = document.createElement('script');
            script.src = src;
            document.body.appendChild(script);
        });
    }
</script>
</body>
</html>

    Now the scripts are visible in the developer tools -> network, but they still don’t work. The issue remains the same: when I have <script src="_framework/blazor.server.js"></script> in the _Layout.cshtml file, my scripts stop working.


  2. 0

    Well the issue is because Blazor Server replaces the DOM content on initialization. So to fix it you’ll need to:

    1. Load blazor.server.js first
    2. Wait for the ‘blazor:start’ event
    3. Load your scripts programmatically once Blazor is loaded

    Like this:

    <!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <base href="~/" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <!-- Load Blazor first -->
    <script src="_framework/blazor.server.js"></script>

    <!-- Wait for Blazor, then load your scripts -->
    <script>
        window.addEventListener('blazor:start', function() {
            loadScripts([
                'js/test/custom.js',
                'js/test/swiper.js',
                'js/test/gallery.js',
                'js/test/Pager.js',
                'js/test/picture.js',
                'js/main.js'
            ]);
        });

        function loadScripts(srcs) {
            srcs.forEach(src => {
                const script = document.createElement('script');
                script.src = src;
                document.body.appendChild(script);
            });
        }
    </script>
</body>
</html>

    If you need to modify your existing scripts, wrap them in this:

    if (typeof window !== 'undefined') {
    // your initialization code here
}

    And if script order is critical (e.g., later scripts depend on earlier ones) you might need a more sequential loading approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search