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 


<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


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




window.blazorInterop = {
    showModal: function (dialogId) {
        window.alert('see after this the page title'+dialogId);
        return true;
    },
    setPageTitle: function(title) {
        document.title = title;
    },    
};



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




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

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