RSCG – GoLive.Generator.BlazorInterop

RSCG – GoLive.Generator.BlazorInterop
 
 

name GoLive.Generator.BlazorInterop
nuget https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/
link https://github.com/surgicalcoder/BlazorInteropGenerator
author surgicalcoder

Generating interop from C# to javascript for Blazor

 

This is how you can use GoLive.Generator.BlazorInterop .

The code that you start with is

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
 
  <ItemGroup>
    <PackageReference Include="GoLive.Generator.BlazorInterop" Version="2.0.7">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0-rc.2.24474.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0-rc.2.24474.3" PrivateAssets="all" />
  </ItemGroup>
     
    <ItemGroup>
        <AdditionalFiles Include="BlazorInterop.json" />
    </ItemGroup>
    <PropertyGroup>
        <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
        <CompilerGeneratedFilesOutputPath>$(BaseIntermediateOutputPath)\GX</CompilerGeneratedFilesOutputPath>
    </PropertyGroup>
 
 
</Project>

The code that you will use is

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
{
  "Files": [
    {
      "Output_DeleteThis_ToHave_InYourProject": "JSInterop.cs",
      "ClassName": "JSInterop",
      "Source": "wwwroot\\blazorinterop.js",
      "Namespace": "GoLive.Generator.BlazorInterop.Playground.Client",
      "ObjectToInterop": "window.blazorInterop",
      "Init": ["window={}"]
    }
  ],
  "InvokeVoidString": "await JSRuntime.InvokeVoidAsync(\"{0}\", {1});",
  "InvokeString": "return await JSRuntime.InvokeAsync<T>(\"{0}\",{1});"
}
?
1
2
3
4
5
6
7
8
9
window.blazorInterop = {
    showModal: function (dialogId) {
        window.alert('see after this the page title'+dialogId);
        return true;
    },
    setPageTitle: function(title) {
        document.title = title;
    },   
};
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
@page "/"
 
@inject IJSRuntime JS
 
<PageTitle>Home</PageTitle>
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
 
    private async Task IncrementCount()
    {
        currentCount++;
        var res= await JS.showModalAsync<bool>(currentCount);
        await JS.setPageTitleVoidAsync($" after {currentCount}  the result is " + res);
    }
}
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyTestBlazoe</title>
    <base href="/" />
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="MyTestBlazoe.styles.css" rel="stylesheet" />
    <script src="blazorinterop.js" ></script>
</head>
 
<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>
 
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
 
</html>

 

The code that is generated is

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
using System.Threading.Tasks;
using Microsoft.JSInterop;
 
namespace GoLive.Generator.BlazorInterop.Playground.Client
{
    public static class JSInterop
    {
        public static string _window_blazorInterop_showModal => "window.blazorInterop.showModal";
 
        public static async Task showModalVoidAsync(this IJSRuntime JSRuntime, object @dialogId)
        {
            await JSRuntime.InvokeVoidAsync("window.blazorInterop.showModal", @dialogId);
        }
 
        public static async Task<T> showModalAsync<T>(this IJSRuntime JSRuntime, object @dialogId)
        {
            return await JSRuntime.InvokeAsync<T>("window.blazorInterop.showModal", @dialogId);
        }
 
        public static string _window_blazorInterop_setPageTitle => "window.blazorInterop.setPageTitle";
 
        public static async Task setPageTitleVoidAsync(this IJSRuntime JSRuntime, object @title)
        {
            await JSRuntime.InvokeVoidAsync("window.blazorInterop.setPageTitle", @title);
        }
 
        public static async Task<T> setPageTitleAsync<T>(this IJSRuntime JSRuntime, object @title)
        {
            return await JSRuntime.InvokeAsync<T>("window.blazorInterop.setPageTitle", @title);
        }
    }
}

Code and pdf at

https://ignatandrei.github.io/RSCG_Examples/v2/docs/GoLive.Generator.BlazorInterop