Wiederverwendbare Blazor-Komponenten außerhalb der Blazor-Anwendung

@using BlazorComponents.Pages

      

@inherits LayoutComponentBase
@inject IJSRuntime js

private DotNetObjectReference<Counter> jsToDotNetBridgeReference;
protected override async Task OnInitializedAsync()
{
jsToDotNetBridgeReference = DotNetObjectReference.Create(this);
await js.InvokeVoidAsync(“SetDotNetReference”, jsToDotNetBridgeReference);
}

<script>
window.SetDotNetReference = function (pDotNetReference) {
DotNetReference = pDotNetReference;
}
</script>

<script src=”~/_framework/blazor.webassembly.js”></script>

      

<div class=”jumbotron”>
<div class=”row”>
<div id=”counter”></div>
</div>
</div>

      

<system.webServer>
<staticContent>
<remove fileExtension=”.blat” />
<remove fileExtension=”.dat” />
<remove fileExtension=”.dll” />
<remove fileExtension=”.json” />
<remove fileExtension=”.wasm” />
<remove fileExtension=”.woff” />
<remove fileExtension=”.woff2" />
<mimeMap fileExtension=”.blat” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.dll” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.dat” mimeType=”application/octet-stream” />
<mimeMap fileExtension=”.json” mimeType=”application/json” />
<mimeMap fileExtension=”.wasm” mimeType=”application/wasm” />
<mimeMap fileExtension=”.woff” mimeType=”application/font-woff” />
<mimeMap fileExtension=”.woff2" mimeType=”application/font-woff” />
</staticContent>
</system.webServer>

      

SetDotNetReference = function (pDotNetReference) {
DotNetReference = pDotNetReference;
};

LoadBlazorComponent = function () {
Blazor.start().then(() => {
console.log(‘Blazor Initialized’);
})
}

[JSInvokable]
public void CustomIncrement(int counter)
{
currentCount = currentCount + counter;
StateHasChanged();
}

<button class=”btn btn-primary” onclick=”CustomIncrement(2)”> Custom Increment (2) </button>

CustomIncrement = function (counter) {
DotNetReference.invokeMethod(‘CustomIncrement’, counter);
}