如何将JQuery UI导入Blazor WebAssembly？_Jquery_.net_Asp.net Core_Blazor_Blazor Webassembly

如何将JQuery UI导入Blazor WebAssembly？

jquery .net asp.net-core blazor

如何将JQuery UI导入Blazor WebAssembly？,jquery,.net,asp.net-core,blazor,blazor-webassembly,Jquery,.net,Asp.net Core,Blazor,Blazor Webassembly,我想发现Blazor，我正试图将一个项目从.NET核心MVC转移到Blazor WebAssembly。我配置了基本的HTML和CSS设计，一切正常。现在，我有一个页面，我需要使用一些jQuery函数，其中一个是通过jQuery.vmap的国家地图，在简单的html中，MVC正在工作，但在blazor no中。我将所有脚本放在Index.html和razor视图中的标记中。我的Index.html页面： <html> <head> <meta chars

我想发现Blazor，我正试图将一个项目从.NET核心MVC转移到Blazor WebAssembly。我配置了基本的HTML和CSS设计，一切正常。现在，我有一个页面，我需要使用一些jQuery函数，其中一个是通过jQuery.vmap的国家地图，在简单的html中，MVC正在工作，但在blazor no中。我将所有脚本放在Index.html和razor视图中的标记中。我的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">You're calling an async method without awaiting it.  I would fix that, for starters.
protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender) 
            await JsRuntime.InvokeVoidAsync("vmap.initialize");
    }


RVT_观察员
jQuery（文档）.ready（函数（）{
jQuery（“#vmap”）.vectorMap({
地图：“摩尔多瓦”，
背景颜色：空，
颜色：'#d2d4d5'，
悬停颜色：'#006ed6'，
enableZoom:false，
showTooltip:true，
onRegionClick：函数（事件、代码、区域）{
开关（代码）{
案例代码：
window.location.replace（“/Map/RM/”+代码）；
}
}
});
});
\
您正在调用一个异步方法而不等待它。首先，我会解决这个问题
protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
           await JSRuntime.InvokeAsync<object>("vMap");
       
   }

您可以看到一个调用InvokeVoidAsync的互操作示例
如果您仍然需要帮助，请尝试在中发布一个工作示例，以便我们可以更轻松地帮助您。
谢谢您的回答！这不是我的解决方案，使用wait来执行异步任务，而是查找问题的索引。问题在于正确地声明jQuery，以及在razor中正确定义声明jQuery之后
AfterRenderAsync（bool firstRender）上的受保护重写异步任务
{
if（firstRender）
等待JSRuntime.InvokeAsync（“vMap”）；
}