How to import JQuery UI to Blazor WebAssembly?

2
votes

I want to discover Blazor and I'm trying to transfer a project from .NET Core MVC to Blazor WebAssembly. I configured basic HTML and CSS design and everything works normally. 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. I put all scripts in Index.html and tag in my razor view. My Index.html page:

<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>

My Razor page there I try to inject IJSRuntime, but also is not working:

@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");
    }

What I'm doing wrong? Thank you for you answer!

2
jquery.netasp.net-coreblazorblazor-webassembly

2 Answers

0
votes

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");
    }

You can see an interop example calling InvokeVoidAsync here

If you still need help, try posting a working example in BlazorFiddle so we can help you more easily.

0
votes

Thank you for answer! It wasn't my solution, to use await you need to perform an async Task, but was an index to find the problem. The problem was in declaration jQuery correctly and after I defined correctly declaration jQuery in razor.

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