在 Blazor 中使用 Javascript 导航控件
Using Javascript navigation controls with Blazor
我正在处理我的第一个 Blazor 页面。我不是 UI 设计师,所以我主要了解 C#。我根本不知道Javascript。我已经下载了一个 HTML 模板来帮助我完成设计部分。此模板使用 Javascript 在顶部导航上做一些不错的效果。
是否可以访问此脚本并在页面初始化时加载它?我已将脚本放入 index.html 并在 html 代码中放入适当的参考 index.cshtml。
我已阅读并尝试使用 JSinterop 进行一些操作,但没有任何进展。
是否有一些相对简单的解决方案,或者它是否涉及很多复杂的代码 JSruntime 等?
Index.html:
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
Index.cshtml:
<!-- Navigation -->
<!-- Header -->
<div id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#pagetop">MyPage</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">Om Travblaze</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Verktøy</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
grayscale.js:
(function ($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 70)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 100
});
// Collapse Navbar
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
})(jQuery); // End of use strict
关于使用纯 JavaScript 编写的 TreeView 的类似问题在这里被问到。我建议应该用 C# 重写 TreeView,实际上,用户将 TreeView 转换为 Razor 组件,而没有使用一行 JavaScript。这是您应该做的...您不应该嵌入或使用 JavaScript 模板...相反,您应该将其转换为组件,这些组件通过 C# 相互交互。仅在不可避免时才使用 JSInterop。请记住,Blazor 的 objective 是使用 C# 而不是 JavaScript。现在 C#(Web Assembly)可以通过 JavaScript 与 DOM 通信,但这不会永远持续下去。预计在未来几年,Web Assembly 可能会直接与 DOM 通信,这将使 JavaScript 的使用变得过时。
目前还没有严格遵守如何构建 Blazor 应用程序的模式,但有一件事是不言而喻的:仅在不可避免时使用 JavaScript Inter-op...使用 C#、Razor 等创建组件。如果您认真学习 Razor 组件,按照我的建议去做,当你卡住时,不要犹豫,提出问题,展示你的代码。
顺便说一下,你不能在你的 Blazor 应用程序中使用 jQuery,即使它被 Boot Strap 使用。
希望这对您有所帮助...
我正在处理我的第一个 Blazor 页面。我不是 UI 设计师,所以我主要了解 C#。我根本不知道Javascript。我已经下载了一个 HTML 模板来帮助我完成设计部分。此模板使用 Javascript 在顶部导航上做一些不错的效果。
是否可以访问此脚本并在页面初始化时加载它?我已将脚本放入 index.html 并在 html 代码中放入适当的参考 index.cshtml。
我已阅读并尝试使用 JSinterop 进行一些操作,但没有任何进展。
是否有一些相对简单的解决方案,或者它是否涉及很多复杂的代码 JSruntime 等?
Index.html:
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
Index.cshtml:
<!-- Navigation -->
<!-- Header -->
<div id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#pagetop">MyPage</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">Om Travblaze</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Verktøy</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
grayscale.js:
(function ($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 70)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 100
});
// Collapse Navbar
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
})(jQuery); // End of use strict
关于使用纯 JavaScript 编写的 TreeView 的类似问题在这里被问到。我建议应该用 C# 重写 TreeView,实际上,用户将 TreeView 转换为 Razor 组件,而没有使用一行 JavaScript。这是您应该做的...您不应该嵌入或使用 JavaScript 模板...相反,您应该将其转换为组件,这些组件通过 C# 相互交互。仅在不可避免时才使用 JSInterop。请记住,Blazor 的 objective 是使用 C# 而不是 JavaScript。现在 C#(Web Assembly)可以通过 JavaScript 与 DOM 通信,但这不会永远持续下去。预计在未来几年,Web Assembly 可能会直接与 DOM 通信,这将使 JavaScript 的使用变得过时。 目前还没有严格遵守如何构建 Blazor 应用程序的模式,但有一件事是不言而喻的:仅在不可避免时使用 JavaScript Inter-op...使用 C#、Razor 等创建组件。如果您认真学习 Razor 组件,按照我的建议去做,当你卡住时,不要犹豫,提出问题,展示你的代码。
顺便说一下,你不能在你的 Blazor 应用程序中使用 jQuery,即使它被 Boot Strap 使用。
希望这对您有所帮助...