blazor - 如何使用 Blazor 服务器端应用程序加载 JavaScript 库
问题描述
我有一个现有的html主题,其中包含一些我想合并到Blazor 服务器端应用程序中的JavaScript。
为了合并现有的html主题,我在文件上添加了JavaScript标签,复制了文件上的所有主题html标签,并将所有&库文件放在文件夹下。只要我注释掉文件中的行,网页就会按预期工作。但是,如果保留此行取消注释某些JavaScript库不会被加载。如果我将标签放在_Host.cshtml
Index.razor
css
js
wwwroot
<script src="_framework/blazor.server.js"></script>
_Host.cshtml
<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>
解决方案
我通过从文件的<body>
标签中删除所有这些行来让它工作_Host.cshtml
。
<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>
推荐阅读
- python - 更新 a 中的文本
HTML 中的标签,其中包含使用 Beautifulsoup的标签
- mysql - 在 MySQL 中选择最后一个重复行
- android - Android Kotlin:没有为 EditText 触发 onTextChanged
- sql - 通过SAS(SQL Explicit Passthrough)连接Teradata,拉取数据,是否推荐使用execute语句?
- node.js - 在 Node.js 中,为什么我无法将类别的 id 放入嵌套结构中?
- post - Post Https SOAP 请求,用于使用机器人框架在应用程序中执行操作
- google-apps-script - 打印后更改 Sheet 的颜色
- spring - 如何在 Zuul 中获取响应体?
- html - CSS:当 div 的 css 属性改变时播放动画
- android - Android下OKHttp获取http transferStart时间和transferDone tiem