JavaScript [JSImport]/[JSExport] Interop mit einem WebAssembly Browser App Projekt

• Legen Sie den Zielframeworkmoniker fest (Platzhalter {TARGET FRAMEWORK}):

  <TargetFramework>{TARGET FRAMEWORK}</TargetFramework>
  

  .NET 7 (net7.0) oder höher wird unterstützt.

• Aktivieren Sie die AllowUnsafeBlocks-Eigenschaft, damit der Codegenerator im Roslyn-Compiler Zeiger für die JS-Interoperabilität verwenden kann:

  <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  

  Warnung

  Die JS-Interop-API erfordert die Aktivierung von AllowUnsafeBlocks. Seien Sie vorsichtig, wenn Sie Ihren eigenen unsicheren Code in .NET-Anwendungen implementieren, da dies zu Sicherheits- und Stabilitätsrisiken führen kann. Weitere Informationen finden Sie unter Unsicherer Code, Zeigertypen und Funktionszeiger.

Das folgende Beispiel zeigt eine Projektdatei (.csproj) nach der Konfiguration. Der Platzhalter {TARGET FRAMEWORK} ist das Zielframework:

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

  <PropertyGroup>
    <TargetFramework>{TARGET FRAMEWORK}</TargetFramework>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  </PropertyGroup>

</Project>

• Legen Sie den Zielframeworkmoniker fest:

  <TargetFramework>net7.0</TargetFramework>
  

  .NET 7 (net7.0) oder höher wird unterstützt.

• Geben Sie als Runtimebezeichner browser-wasm an:

  <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
  

• Geben Sie einen ausführbaren Ausgabetyp an:

  <OutputType>Exe</OutputType>
  

• Aktivieren Sie die AllowUnsafeBlocks-Eigenschaft, damit der Codegenerator im Roslyn-Compiler Zeiger für die JS-Interoperabilität verwenden kann:

  <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  

  Warnung

  Die JS-Interop-API erfordert die Aktivierung von AllowUnsafeBlocks. Seien Sie vorsichtig, wenn Sie Ihren eigenen unsicheren Code in .NET-Anwendungen implementieren, da dies zu Sicherheits- und Stabilitätsrisiken führen kann. Weitere Informationen finden Sie unter Unsicherer Code, Zeigertypen und Funktionszeiger.

• Geben Sie als WasmMainJSPath einen Verweis auf eine Datei auf dem Datenträger an. Diese Datei wird mit der App veröffentlicht, die Verwendung der Datei ist jedoch nicht erforderlich, wenn Sie .NET in eine vorhandene JS-App integrieren.

  Im folgenden Beispiel befindet sich die JS-Datei auf dem Datenträger main.js, es ist aber jeder JS-Dateiname zulässig:

  <WasmMainJSPath>main.js</WasmMainJSPath>
  

Beispielprojektdatei (.csproj) nach der Konfiguration:

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

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
    <OutputType>Exe</OutputType>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
    <WasmMainJSPath>main.js</WasmMainJSPath>
    <Nullable>enable</Nullable>
  </PropertyGroup>

</Project>

• setModuleImports ordnet einen Namen einem Modul von JS-Funktionen für den Import in .NET zu. Das JS-Modul enthält eine dom.setInnerText-Funktion, die den Elementselektor und die Zeit zum Anzeigen der aktuellen Stoppuhrzeit auf der Benutzeroberfläche akzeptiert. Der Name des Moduls kann eine beliebige Zeichenfolge sein (es muss kein Dateiname sein), aber er muss mit dem Namen übereinstimmen, der für das JSImportAttribute verwendet wird (Eine Erläuterung finden Sie weiter unten in diesem Artikel.). Die dom.setInnerText-Funktion wird in C# importiert und von der C#-Methode SetInnerText aufgerufen. Die SetInnerText-Methode wird später in diesem Abschnitt beschrieben.

• exports.StopwatchSample.Reset() führt Aufrufe in .NET (StopwatchSample.Reset) von JS durch. Die C#-Methode Reset startet die Stoppuhr neu, wenn sie ausgeführt wird, oder setzt sie zurück, wenn sie nicht ausgeführt wird. Die Reset-Methode wird später in diesem Abschnitt beschrieben.

• exports.StopwatchSample.Toggle() führt Aufrufe in .NET (StopwatchSample.Toggle) von JS durch. Die C#-Methode Toggle startet oder unterbricht die Stoppuhr, je nachdem, ob sie derzeit ausgeführt wird. Die Toggle-Methode wird später in diesem Abschnitt beschrieben.

• runMain() führt Program.Main aus.

• setModuleImports ordnet einen Namen einem Modul von JS-Funktionen für den Import in .NET zu. Das JS-Modul enthält eine window.location.href-Funktion, die die aktuelle Seitenadresse (URL) zurückgibt. Der Name des Moduls kann eine beliebige Zeichenfolge sein (es muss kein Dateiname sein), aber er muss mit dem Namen übereinstimmen, der für das JSImportAttribute verwendet wird (Eine Erläuterung finden Sie weiter unten in diesem Artikel.). Die window.location.href-Funktion wird in C# importiert und von der C#-Methode GetHRef aufgerufen. Die GetHRef-Methode wird später in diesem Abschnitt beschrieben.

• exports.MyClass.Greeting() führt Aufrufe in .NET (MyClass.Greeting) von JS durch. Die C#-Methode Greeting gibt eine Zeichenfolge zurück, die das Ergebnis des Aufrufs der window.location.href-Funktion enthält. Die Greeting-Methode wird später in diesem Abschnitt beschrieben.

• dotnet.run() führt Program.Main aus.

import { dotnet } from './_framework/dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig, runMain } = await dotnet
  .withApplicationArguments("start")
  .create();

setModuleImports('main.js', {
  dom: {
    setInnerText: (selector, time) => 
      document.querySelector(selector).innerText = time
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);

document.getElementById('reset').addEventListener('click', e => {
  exports.StopwatchSample.Reset();
  e.preventDefault();
});

const pauseButton = document.getElementById('pause');
pauseButton.addEventListener('click', e => {
  const isRunning = exports.StopwatchSample.Toggle();
  pauseButton.innerText = isRunning ? 'Pause' : 'Start';
  e.preventDefault();
});

await runMain();

import { dotnet } from './_framework/dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
  .withDiagnosticTracing(false)
  .withApplicationArgumentsFromQuery()
  .create();

setModuleImports('main.js', {
  window: {
    location: {
      href: () => globalThis.window.location.href
    }
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById('out').innerHTML = text;
await dotnet.run();

import { dotnet } from './dotnet.js'

const is_browser = typeof window != "undefined";
if (!is_browser) throw new Error(`Expected to be running in a browser`);

const { setModuleImports, getAssemblyExports, getConfig } = 
  await dotnet.create();

setModuleImports("main.js", {
  window: {
    location: {
      href: () => globalThis.window.location.href
    }
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById("out").innerHTML = text;
await dotnet.run();

Im folgenden Beispiel wird die dom.setInnerText-Funktion aus dem Modul main.js aufgerufen, wenn die SetInnerText-Methode aufgerufen wird:

[JSImport("dom.setInnerText", "main.js")]
internal static partial void SetInnerText(string selector, string content);

Im folgenden Beispiel wird die window.location.href-Funktion aus dem Modul main.js aufgerufen, wenn die GetHRef-Methode aufgerufen wird:

[JSImport("window.location.href", "main.js")]
internal static partial string GetHRef();

Im folgenden Beispiel wird jede Methode in JS exportiert und kann aus JS-Funktionen aufgerufen werden:

• Die Toggle-Methode startet oder unterbricht die Stoppuhr je nach Ausführungsstatus.
• Die Reset-Methode startet die Stoppuhr neu, wenn sie ausgeführt wird, oder setzt sie zurück, wenn sie nicht ausgeführt wird.
• Die IsRunning-Methode gibt an, ob die Stoppuhr ausgeführt wird.

[JSExport]
internal static bool Toggle()
{
    if (stopwatch.IsRunning)
    {
        stopwatch.Stop();
        return false;
    }
    else
    {
        stopwatch.Start();
        return true;
    }
}

[JSExport]
internal static void Reset()
{
    if (stopwatch.IsRunning)
        stopwatch.Restart();
    else
        stopwatch.Reset();

    Render();
}

[JSExport]
internal static bool IsRunning() => stopwatch.IsRunning;

Im folgenden Beispiel gibt die Greeting-Methode eine Zeichenfolge zurück, die das Ergebnis des Aufrufs der GetHRef-Methode enthält. Wie zuvor gezeigt, ruft die C#-Methode GetHref die window.location.href-Funktion in JS aus dem Modul main.js auf. window.location.href gibt die aktuelle Seitenadresse (URL) zurück:

[JSExport]
internal static string Greeting()
{
    var text = $"Hello, World! Greetings from {GetHRef()}";
    Console.WriteLine(text);
    return text;
}