How to use C# WebAssemly from JavaScript without Blazor web components - Stack Overflow

admin管理员组

文章数量:1321441

To pile C# into WebAssemly and interop with JS it's required to use Blazor WebAssembly ASP.NET framework, which is designed for SPA and contains lot of overhead in case you just want to use a C# library from JS.

What is the minimum setup to just pile a DLL to WebAssembly and use it from JavaScript?

To pile C# into WebAssemly and interop with JS it's required to use Blazor WebAssembly ASP.NET framework, which is designed for SPA and contains lot of overhead in case you just want to use a C# library from JS.

What is the minimum setup to just pile a DLL to WebAssembly and use it from JavaScript?

• javascript
• c#
• interop
• webassembly
• blazor-webassembly

Share Improve this question Follow asked Oct 27, 2021 at 17:44 ElringusElringus 6791010 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Update: Starting with .NET 7 the use case has first-party support: https://devblogs.microsoft./dotnet/use-net-7-from-any-javascript-app-in-net-7/ Below is still relevant for older .NET versions or in case you'd like to dig deeper and/or implement custom interop layer.

---

Create a new empty C# project with the following configuration (via .csproj):

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <LangVersion>10</LangVersion>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
    </ItemGroup>

</Project>

Initialize Blazor JS runtime and specify the bindings:

namespace WasmTest;

public class Program
{
    private static IJSRuntime js;

    private static async Task Main (string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        var host = builder.Build();
        js = host.Services.GetRequiredService<IJSRuntime>();
        await host.RunAsync();
    }

    [JSInvokable]
    public static async Task<string> BuildMessage (string name)
    {
        var time = await GetTimeViaJS();
        return $"Hello {name}! Current time is {time}.";
    }

    public static async Task<DateTime> GetTimeViaJS ()
    {
        return await js.InvokeAsync<DateTime>("getTime");
    }
}

Publish with dotnet publish and use the C# library from JS:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>
    window.getTime = () => {
        return new Date().toJSON();
    };
    window.onload = async function () {
        await Blazor.start();
        const msg = await DotNet.invokeMethodAsync("WasmTest", "BuildMessage", "John");
        console.log(msg);
    };
</script>

Alternatively, here is a solution, that allows piling C# project into single-file UMD library, which can be consumed in any JavaScript environment: browsers, node, and custom restricted environments, such as VS Code's web extensions: https://github./Elringus/DotNetJS

本文标签： How to use C WebAssemly from JavaScript without Blazor web componentsStack Overflow