jquery - 如何将 JQuery UI 导入 Blazor WebAssembly?
问题描述
我想发现 Blazor,我正在尝试将项目从 .NET Core MVC 转移到 Blazor WebAssembly。我配置了基本的 HTML 和 CSS 设计,一切正常。现在,我有一个页面,我需要使用一些 jQuery 函数,其中一个是通过 jquery.vmap 绘制的国家地图,在简单的 html 和 MVC 上工作,但在 blazor 中没有。我将所有脚本放在 Index.html 中,并在我的剃刀视图中标记。我的 Index.html 页面:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>RVT_Observer</title>
<base href="/" />
<link href="Maps/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="Maps/dist/jquery.vmap.js"></script>
<script type="text/javascript" src="Maps/dist/maps/jquery.vmap.moldova.js" charset="utf-8"></script>
<script>
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'moldova_md',
backgroundColor: null,
color: '#d2d4d5',
hoverColor: '#006ed6',
enableZoom: false,
showTooltip: true,
onRegionClick: function (event, code, region) {
switch (code) {
case code:
window.location.replace("/Map/RM/" + code);
}
}
});
});
</script>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="stylesheet" href="css/nicepage.css" media="screen">
<link rel="stylesheet" href="css/Page-1.css" media="screen">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link href="Maps/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />\
<script class="u-script" type="text/javascript" src="js/nicepage.js" defer=""></script>
</head>
<body class="u-body">
<app><div class="loader" /></app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script>
<footer class="u-clearfix u-footer u-grey-80" id="sec-cc6e">
</footer>
</bodyclass="u-body">
</html>
我的 Razor 页面在那里我尝试注入 IJSRuntime,但也无法正常工作:
@page "/election"
@using RVT_Observer.Shared
@inject HttpClient HttpClient
@inject IJSRuntime jsRuntime
<div id="vmap" style="width: 800px; height: 625px;"></div>
@code {
protected override async Task OnInitializedAsync()
{
await GetResults();
}
[Inject]
protected IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
JsRuntime.InvokeVoidAsync("vmap.initialize");
}
private async Task GetResults()
{
var response = await HttpClient.PostAsJsonAsync($"api/Results", "0");
}
我做错了什么?谢谢你的回答!
解决方案
谢谢你的答案!这不是我的解决方案,要使用 await 您需要执行异步任务,但它是查找问题的索引。问题出在正确声明 jQuery 中,并且在我在 razor 中正确定义了 jQuery 声明之后。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await JSRuntime.InvokeAsync<object>("vMap");
}
推荐阅读
- sql-server - 如何在 powershell 中向 SQL Server 发送正确的日期时间对象?
- php - 如何更新 php 中的 crud?
- python - 以有效的方式查找数组的元素
- mysql - UnicodeDecodeError 将 csv 导入 MySql DB
- javascript - JS如何取一个数字数组并返回最大的可传递组合数
- c# - Unity - 自定义检查器不可编辑数组
- mysql - 按人选择前 4 个分数,但至少需要两个位置
- php - PHP Simple Dom HTML Parser 的错误解析语法
- awk - awk - 选择行的操作
- python - 如何读取 YAML 文件中的组件,以便我可以使用 ruamel.yaml 编辑它的键值?