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
Leave a Reply