如何使用 Blazor 服务器端应用程序加载 JavaScript 库答案

【问题标题】：How to load JavaScript libraries using a Blazor server-side application如何使用 Blazor 服务器端应用程序加载 JavaScript 库
【发布时间】：2020-10-18 09:35:04
【问题描述】：

我有一个现有的 html 主题，其中包含一些 JavaScripts，我想将它们合并到 Blazor 服务器端 应用程序中。
为了合并现有的 html 主题，我在 _Host.cshtml 文件上添加了 JavaScript 标签，复制了 @987654322 上的所有主题 html 标签@ 文件并将所有 css 和 js 库文件放在 wwwroot 文件夹下。

只要我注释掉
<script src="_framework/blazor.server.js"></script> 行中的_Host.cshtml 文件。但是，如果保留此行取消注释某些 JavaScripts 库不会被加载。我是否将<script> 标签放在<head> 一侧或<body> 一侧或<script src="_framework/blazor.server.js"></script> 行之前或之后都没有关系。

有没有办法加载 JavaScript 库？

_Host.cshtml 文件如下所示：

        @page "/"
        @namespace TPAGE.Pages
        @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
        @{
            Layout = null;
        }

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>Test Page</title>
          <meta content="width=device-width, initial-scale=1.0" name="viewport">

          <!-- Favicon -->
          <link href="img/favicon.png" rel="icon">

          <!-- Google Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">

          <!-- Bootstrap CSS File -->
          <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

          <!-- Libraries CSS Files -->
          <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
          <link href="lib/animate/animate.min.css" rel="stylesheet">
          <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
          <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
          <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

          <!-- Main Stylesheet File -->
          <link href="css/style.css" rel="stylesheet">     
            
        </head>
        <body>
            
            <app>
                <component type="typeof(App)" render-mode="ServerPrerendered" />
            </app>

            <div id="blazor-error-ui">
                <environment include="Staging,Production">
                    An error has occurred. This application may no longer respond until reloaded.
                </environment>
                <environment include="Development">
                    An unhandled exception has occurred. See browser dev tools for details.
                </environment>
                <a href="" class="reload">Reload</a>
                <a class="dismiss">????</a>
            </div>

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

            <!-- JavaScript Libraries -->
            <script src="lib/jquery/jquery.min.js"></script> 
            <script src="lib/jquery/jquery-migrate.min.js"></script>
            <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
            <script src="lib/easing/easing.min.js"></script>
            <script src="lib/mobile-nav/mobile-nav.js"></script>
            <script src="lib/wow/wow.min.js"></script>
            <script src="lib/waypoints/waypoints.min.js"></script>
            <script src="lib/counterup/counterup.min.js"></script>
            <script src="lib/owlcarousel/owl.carousel.min.js"></script>
            <script src="lib/isotope/isotope.pkgd.min.js"></script>
            <script src="lib/lightbox/js/lightbox.min.js"></script>
            <!-- Contact Form JavaScript File -->
            <script src="contactform/contactform.js"></script>

            <!-- Template Main Javascript File -->
            <script src="js/main.js"></script>
            
        </body>
        </html>

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

我通过从_Host.cshtml 文件的<body> 标记中删除所有这些行来使其正常工作。

            <app>
                <component type="typeof(App)" render-mode="ServerPrerendered" />
            </app>

            <div id="blazor-error-ui">
                <environment include="Staging,Production">
                    An error has occurred. This application may no longer respond until reloaded.
                </environment>
                <environment include="Development">
                    An unhandled exception has occurred. See browser dev tools for details.
                </environment>
                <a href="" class="reload">Reload</a>
                <a class="dismiss">?</a>
            </div>

然后我在那个地方添加了 HTML 主题标签。所以<body> 看起来像这样：

<body>

    <PASTE ALL THE THEME HTML TAGS GO HERE>

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

    <!-- JavaScript Libraries -->
    <script src="theme/lib/jquery/jquery.min.js"></script>
    <script src="theme/lib/jquery/jquery-migrate.min.js"></script>
    <script src="theme/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="theme/lib/easing/easing.min.js"></script>
    <script src="theme/lib/mobile-nav/mobile-nav.js"></script>
    <script src="theme/lib/wow/wow.min.js"></script> 
    <script src="theme/lib/waypoints/waypoints.min.js"></script>
    <script src="theme/lib/counterup/counterup.min.js"></script>
    <script src="theme/lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="theme/lib/isotope/isotope.pkgd.min.js"></script>
    <script src="theme/lib/lightbox/js/lightbox.min.js"></script>
    <!-- Contact Form JavaScript File -->
    <script src="contactform/contactform.js"></script>

    <!-- Template Main Javascript File -->
    <script src="theme/js/main.js"></script>
</body>

【讨论】：