我想发现Blazor，我正试图将一个项目从.NET Core MVC转移到Blazor WebAssembly。我配置了基本的HTML和CSS设计，一切正常。现在，我有一个页面，我需要使用一些jQuery函数，其中一个是通过jQuery.vmap的国家地图，在简单的html和MVC中都可以工作，但在blazor no中。我把所有脚本都放在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");
}
我做错了什么？谢谢你的回答！
您正在调用一个异步方法而不等待它。首先，我会解决这个问题。
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
await JsRuntime.InvokeVoidAsync("vmap.initialize");
}
您可以在这里看到一个调用InvokeVoidSync的互操作示例
如果您仍然需要帮助，请尝试在BlazorFiddle中发布一个工作示例，这样我们可以更轻松地帮助您。
感谢您的回答！这不是我的解决方案，使用await需要执行异步任务，但它是一个查找问题的索引。问题出在声明jQuery的正确性上，以及我在razor中正确定义声明jQuery之后。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await JSRuntime.InvokeAsync<object>("vMap");
}