[英]Blazor - JavaScript/Bootstrap animations and scripts not working in blazor component
我有一個 Blazor 站點,我正在使用一個 HTML 模板,該模板具有 CSS 和 JS 用於樣式設置。
我已將資產導入 wwwroot,並在 _Host.cshtml 文件中對它們進行了引用; 樣式和某些元素似乎正在工作......但是我注意到 javascript 的動畫和其他部分沒有按預期工作......
例如,我有一個手風琴,它不會展開或關閉。
我以 HTML 格式制作了相同的頁面,並將其放入 wwwroot ...當我運行代碼並導航到該頁面時,它似乎工作得很好。 但是在我的 razor 頁面上,它不是...
這是它在.razor組件上
這是我在wwwroot中制作的.html文件
_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(手風琴函數)
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]);
}
})();
下午好,
根據我在 Blazor 組件中調用 Javascript 的經驗,需要使用 IJS 運行時。 這是針對此問題的 Microsoft Blazor 文檔:
https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
本質上,您使用 IJS 運行時從您的自定義 JS 文檔中調用特定方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.