如何将 JQuery UI 导入 Blazor WebAssembly？

Question

我想发现 Blazor 并且我正在尝试将项目从 .NET Core MVC 转移到 Blazor WebAssembly。 我配置了基本的 HTML 和 CSS 设计，一切正常。 Now, I have a page there I need to use some jQuery functions, one of them is map of a country via jquery.vmap, in simple html and on MVC is working, but in 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">🗙</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");
    }

我做错了什么？ 谢谢你的回答！

Answer 1

您正在调用异步方法而不等待它。 对于初学者，我会解决这个问题。

protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender) 
            await JsRuntime.InvokeVoidAsync("vmap.initialize");
    }

您可以在此处查看调用 InvokeVoidAsync 的互操作示例

如果您仍需要帮助，请尝试在BlazorFiddle中发布一个工作示例，以便我们更轻松地为您提供帮助。

Answer 2

感谢您的回答，这不是我的解决方案，要使用 await 您需要执行异步任务。 而是找到问题的索引。 问题出在正确的声明 jQuery 中，并且在我在剃须刀中正确定义了声明 jQuery 之后。

protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
           await JSRuntime.InvokeAsync<object>("vMap");
       
   }

如何将 JQuery UI 导入 Blazor WebAssembly？

问题描述

2 个解决方案

解决方案1
0 2020-12-15 21:41:01

解决方案2
0 2020-12-16 13:42:00

如何将 JQuery UI 导入 Blazor WebAssembly？

问题描述

2 个解决方案

解决方案1 0 2020-12-15 21:41:01

解决方案2 0 2020-12-16 13:42:00

解决方案1
0 2020-12-15 21:41:01

解决方案2
0 2020-12-16 13:42:00