自定义脚本在 Blazor 服务器端工作错误
Posted
技术标签:
【中文标题】自定义脚本在 Blazor 服务器端工作错误【英文标题】：Custom script working wrong in Blazor server side 【发布时间】：2021-12-09 23:30:49 【问题描述】：我首先有带有 MudBlazor 的 Blazor 服务器端项目，组件工作正常（我专注于文本字段）。 然后我将黑色仪表板模板 (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】：Blazor 与 JavaScript 交互的方式与服务器端呈现页面的交互方式不同。组件仅在 Blazor 可以判断状态已更改时重绘（并且具有各种自动和手动调用此功能的方式）。这就是为什么当 Blazor 服务器 js 被忽略时，它可以工作，而在包含时则不起作用。
您需要手动调用这些 JavaScript 函数，方法是连接您自己的调用它们的方法，编写自己的 Blazor 代码来为您执行此操作，或者查找具有奇偶校验功能的库。
【讨论】：
以上是关于自定义脚本在 Blazor 服务器端工作错误的主要内容，如果未能解决你的问题，请参考以下文章
IJSRuntime 忽略服务器端 Blazor 项目中的自定义 json 序列化程序
使用 IdentityServer4、Asp.Net Core Identity 和自定义提供程序进行 Blazor WebAssembly 身份验证，无需实体框架