Blazor - JavaScript/引导动画和脚本在 blazor 组件中不起作用
[英]Blazor - JavaScript/Bootstrap animations and scripts not working in blazor component
问题描述
I have a Blazor site, I am using an HTML template that has CSS and JS for styling.
我有一个 Blazor 站点，我正在使用一个 HTML 模板，该模板具有 CSS 和 JS 用于样式设置。
I have imported the assets into the wwwroot, and I have made a reference to them in the _Host.cshtml file;我已将资产导入 wwwroot，并在 _Host.cshtml 文件中对它们进行了引用； The styling and certain elements seem to be working... However I've noticed the animations and other portions of the javascript are not working as intended...样式和某些元素似乎正在工作......但是我注意到 javascript 的动画和其他部分没有按预期工作......
For example, I have an accordion, and it doesn't expand or close.例如，我有一个手风琴，它不会展开或关闭。
I made the same page in an HTML format and put that in the wwwroot... When I run the code and navigate to that page, it seems to be working just fine.我以 HTML 格式制作了相同的页面，并将其放入 wwwroot ...当我运行代码并导航到该页面时，它似乎工作得很好。 But on my razor page, it is not...但是在我的 razor 页面上，它不是...
This is it on the.razor component这是它在.razor组件上
This is it on the.html file I made in the wwwroot这是我在wwwroot中制作的.html文件
Here is the code...
这是代码...
_Host.cshtml _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Template Mo">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<title>Online Quoting Tool</title>
<link rel="stylesheet" type="text/css" href="~/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/owl-carousel.css">
</head>
<body>
<!-- ***** Preloader Start ***** -->
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- ***** Preloader End ***** -->
<component type="typeof(App)" render-mode="ServerPrerendered" />
<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>
<!-- ***** Footer Start ***** -->
<!-- jQuery -->
<script type="text/javascript" src="~/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="~/assets/js/popper.js"></script>
<script type="text/javascript" src="~/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script type="text/javascript" src="~/assets/js/owl-carousel.js"></script>
<script type="text/javascript" src="~/assets/js/scrollreveal.min.js"></script>
<script type="text/javascript" src="~/assets/js/waypoints.min.js"></script>
<script type="text/javascript" src="~/assets/js/jquery.counterup.min.js"></script>
<script type="text/javascript" src="~/assets/js/imgfix.min.js"></script>
<!-- Global Init -->
<script type="text/javascript" src="~/assets/js/custom.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
custom.js (accordion functions) custom.js（手风琴函数）
const Accordion = {
settings: {
// Expand the first item by default
first_expanded: false,
// Allow items to be toggled independently
toggle: false
},
openAccordion: function(toggle, content) {
if (content.children.length) {
toggle.classList.add("is-open");
let final_height = Math.floor(content.children[0].offsetHeight);
content.style.height = final_height + "px";
}
},
closeAccordion: function(toggle, content) {
toggle.classList.remove("is-open");
content.style.height = 0;
},
init: function(el) {
const _this = this;
// Override default settings with classes
let is_first_expanded = _this.settings.first_expanded;
if (el.classList.contains("is-first-expanded")) is_first_expanded = true;
let is_toggle = _this.settings.toggle;
if (el.classList.contains("is-toggle")) is_toggle = true;
// Loop through the accordion's sections and set up the click behavior
const sections = el.getElementsByClassName("accordion");
const all_toggles = el.getElementsByClassName("accordion-head");
const all_contents = el.getElementsByClassName("accordion-body");
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const toggle = all_toggles[i];
const content = all_contents[i];
// Click behavior
toggle.addEventListener("click", function(e) {
if (!is_toggle) {
// Hide all content areas first
for (let a = 0; a < all_contents.length; a++) {
_this.closeAccordion(all_toggles[a], all_contents[a]);
}
// Expand the clicked item
_this.openAccordion(toggle, content);
} else {
// Toggle the clicked item
if (toggle.classList.contains("is-open")) {
_this.closeAccordion(toggle, content);
} else {
_this.openAccordion(toggle, content);
}
}
});
// Expand the first item
if (i === 0 && is_first_expanded) {
_this.openAccordion(toggle, content);
}
}
}
};
(function() {
// Initiate all instances on the page
const accordions = document.getElementsByClassName("accordions");
for (let i = 0; i < accordions.length; i++) {
Accordion.init(accordions[i]);
}
})();
1 个解决方案
解决方案1
3 已采纳 2021-02-10 18:19:49
Good afternoon,下午好，
From my experience calling Javascript in a Blazor Component requires use of the IJS runtime.根据我在 Blazor 组件中调用 Javascript 的经验，需要使用 IJS 运行时。 Here is the Microsoft Blazor Documentation for this issue:这是针对此问题的 Microsoft Blazor 文档：
https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0 https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
Essentially you use the IJS runtime to call specific methods from your custom JS documents.本质上，您使用 IJS 运行时从您的自定义 JS 文档中调用特定方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.