javascript - 如何在 ASP.Net MVC 应用程序中正确放置脚本文件

Question

我是 MVC/.net 新手，目前正在做一些简单的练习。我有这个 javascript 代码，我尝试在其中注册我的服务 worker ，但由于某种原因，它没有运行。我遵循了我能找到的所有教程，对此进行了搜索，但仍然不起作用。所以我在这里迷路了。感谢您的帮助。

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

Answer 1

假设您编写的脚本逻辑是 LayOut 文件所需的，您需要将代码替换为以下内容:

<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

请注意:如果您在布局文件中，则不需要添加

@section pageScripts{
}

顺便说一句，在布局文件中添加脚本的顺序

    ....   
    ....
   </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>

现在，如果特定 View 专门需要脚本，那么..

例如:Index.csthml

...
</div>

@section pageScripts
{
  // Your script logic
}