自定义脚本在 Blazor 服务器端工作出错
[英]Custom script working wrong in Blazor server side
问题描述
我首先使用 MudBlazor 的 Blazor 服务器端项目，组件工作正常（我专注于文本字段）。 然后我将 Black Dashboard 模板 ( https://www.creative-tim.com/product/black-dashboard ) 添加到我的项目中。 问题来了。
这是我的 _Host.cshtml
@page "/"
@namespace PPJ_Internal_Website_BlazorServer.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PPJ_Internal_Website_BlazorServer</title>
<base href="~/" />
@*<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />*@
<link href="PPJ_Internal_Website_BlazorServer.styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
</head>
<body>
<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>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="assets/js/core/jquery.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
@*<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>*@
<script src="assets/js/plugins/chartjs.min.js"></script>
<script src="assets/js/black-dashboard.min.js?v=1.0.0"></script>
@*<script src="js/customjs.js"></script>*@
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script src="_framework/blazor.server.js"></script>
<script>
$(document).ready(function () {
$().ready(function () {
$sidebar = $('.sidebar');
$navbar = $('.navbar');
$main_panel = $('.main-panel');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
sidebar_mini_active = true;
white_color = false;
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
$('.fixed-plugin a').click(function (event) {
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .background-color span').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data', new_color);
}
if ($main_panel.length != 0) {
$main_panel.attr('data', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data', new_color);
}
});
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function () {
var $btn = $(this);
if (sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
sidebar_mini_active = false;
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
} else {
$('body').addClass('sidebar-mini');
sidebar_mini_active = true;
blackDashboard.showSidebarMessage('Sidebar mini activated...');
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function () {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function () {
clearInterval(simulateWindowResize);
}, 1000);
});
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function () {
var $btn = $(this);
if (white_color == true) {
$('body').addClass('change-background');
setTimeout(function () {
$('body').removeClass('change-background');
$('body').removeClass('white-content');
}, 900);
white_color = false;
} else {
$('body').addClass('change-background');
setTimeout(function () {
$('body').removeClass('change-background');
$('body').addClass('white-content');
}, 900);
white_color = true;
}
});
$('.light-badge').click(function () {
$('body').addClass('white-content');
});
$('.dark-badge').click(function () {
$('body').removeClass('white-content');
});
});
});
</script>
<script>
$(document).ready(function () {
// Javascript method's body can be found in assets/js/demos.js
demo.initDashboardPageCharts();
});
</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-free"
});
</script>
</body>
</html>
当我删除<script src="_framework/blazor.server.js"></script> ，我的自定义脚本标签工作正常，我可以更改主题、sidbar 背景但 MudBlazor 文本字段工作不佳。 当我添加
<script src="_framework/blazor.server.js"></script> ，Mud 组件运行良好，但自定义脚本不起作用，我无法更改侧边栏背景或主题。
我怎样才能解决这个问题？
1 个解决方案
解决方案1
0 2021-10-24 01:27:53
Blazor 不像服务器端呈现的页面那样与 JavaScript 交互。 组件仅在 Blazor 可以判断状态已更改时重绘（并且具有各种自动和手动调用方式）。 这就是为什么当 Blazor 服务器 js 被排除在外时它可以工作，而在包含时却不起作用。
您需要通过连接自己的方法来手动调用这些 JavaScript 函数，编写自己的 Blazor 代码来为您执行此操作，或者找到具有奇偶校验功能的库。
在客户端使用自定义验证程序？ 脚本错误时显示错误消息？
[英]Use Custom Validator at client side ? Shown ErrorMessage when script is wrong?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.