如何將 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