Location>code7788 >text

Extract the interoperability library of .Net and Javascript in BlazorWebview

Popularity：280 ℃/2025-04-01 15:58:00

The purpose of doing this is to use Javascript in Blazor to interoperate with C#, but there is no need to load the entire Blazor class library. In addition, the BlazorWebView component does not support loading web pages directly through the Http protocol. When debugging, you need to write the back-end interface first, then package the front-end, and then debug it together. It feels very troublesome, so you can separate the interoperability function. Later, I studied the source code of core about this part and found that it was feasible, so I extracted this part of the function. Since this nuget package does not support .Net Framework, it was also ported to the .Net Framework platform. It has been in normal use for nearly 1 year. Now write an article to record and recall it, and also provide research for friends in need.

1. How to use

WebView with interoperability already supports WPF and Android in MAUI under .Net Framework. These two are needed at work, and other platforms do not support them for the time being. On the official nuget repository, the latest version of WPF has been uploaded.

1. Installation

Search using nuget package managerThen install it.

2. Introduce Webview components

Open a xaml file and introduce the component namespace

xmlns:wpf="clr-namespace:;assembly="

Usage Components

<Window
    x:Class=""
    xmlns="/winfx/2006/xaml/presentation"
    xmlns:x="/winfx/2006/xaml"
    xmlns:d="/expression/blend/2008"
    xmlns:local="clr-namespace:TestWVF"
    xmlns:mc="/markup-compatibility/2006"
    xmlns:wpf="clr-namespace:;assembly="
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <wpf:WebView Source="http://localhost:5173" />
    </Grid>
</Window>

If it is in development mode, Source fills in your front-end server address and production environment, then generally fill in ithttp://0.0.0.0/. Add a new wwwroot directory to the project, then edit the project file and add the following nodes to embed the web page file into the assembly.

<?xml version="1.0" encoding="utf-8"?>
<Project>
    <!--...-->
    <ItemGroup>
    <EmbeddedResource Include="wwwroot\**\*">
    </EmbeddedResource>
    </ItemGroup>
    <!--...-->
</Project>

If your web page start page iswwwroot\, the corresponding Source is http://0.0.0.0/.

II. Principle

Just straight to the point, with the help of the @microsoft/dotnet-js-interop package on the front end, you can interoperate between Javascript and C#. These two packets define all necessary information except the information delivery channel. Therefore, we only need to supplement the transmission channel and it can work normally. Directly use the IPC communication of the Webview2 component, that is, and ("message", (e: any)) to send and receive messages.

1、Javascript

Introduce the @microsoft/dotnet-js-interop package in the front-end. Create dispatcher with .

import { DotNet } from "@microsoft/dotnet-js-interop";

let dispatcher: ;
dispatcher = ({
  sendByteArray: sendByteArray,
  beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
  endInvokeJSFromDotNet: endInvokeJSFromDotNet,
});

It mainly implements three functions, which use postMessage to send messages to the .Net end.

  • sendByteArray (called this when the passed parameter contains an array of bytes)
  • beginInvokeDotNetFromJS (call .Net method from JS)
  • endInvokeJSFromDotNet (called JS from .Net, after JS processing, you need to call this method to inform .Net to complete the call)

sendByteArray

function sendByteArray(id: number, data: Uint8Array): void {
  const dataBase64Encoded = base64EncodeByteArray(data);
  (window as any).([
    "ReceiveByteArrayFromJS",
    id,
    dataBase64Encoded,
  ]);
}

beginInvokeDotNetFromJS

function beginInvokeDotNetFromJS(
  callId: number,
  assemblyName: string | null,
  methodIdentifier: string,
  dotNetObjectId: number | null,
  argsJson: string
): void {
  ("beginInvokeDotNetFromJS");
  (window as any).([
    "beginInvokeDotNetFromJS",
    callId ? () : null,
    assemblyName,
    methodIdentifier,
    dotNetObjectId || 0,
    argsJson,
  ]);
}

endInvokeJSFromDotNet

function endInvokeJSFromDotNet(
  callId: number,
  succeeded: boolean,
  resultOrError: any
): void {
  ("beginInvokeDotNetFromJS");
  (window as any).([
    "endInvokeJSFromDotNet",
    callId ? () : null,
    succeeded,
    resultOrError,
  ]);
}

Tool functions

function base64EncodeByteArray(data: Uint8Array) {
  // Base64 encode a (large) byte array
  // Note `btoa((null, data as unknown as number[]));`
  // isn't sufficient as the `apply` over a large array overflows the stack.
  const charBytes = new Array();
  for (var i = 0; i < ; i++) {
    charBytes[i] = (data[i]);
  }
  const dataBase64Encoded = btoa((""));
  return dataBase64Encoded;
}

// /a/21797381
// TODO: If the data is large, consider switching over to the native decoder as in /a/54123275
// But don't force it to be async all the time. Yielding execution leads to perceptible lag.
function base64ToArrayBuffer(base64: string): Uint8Array {
  const binaryString = atob(base64);
  const length = ;
  const result = new Uint8Array(length);
  for (let i = 0; i < length; i++) {
    result[i] = (i);
  }
  return result;
}

Receive messages from .Net and process them

(window as any).("message", (e: any) => {
   var ob = ();

   switch (ob[0]) {
     case "EndInvokeDotNet": {
       (ob[1], ob[2], ob[3]);
       break;
     }
     case "BeginInvokeJS": {
       (ob[1], ob[2], ob[3], ob[4], ob[5]);
       break;
     }
     case "SendByteArrayToJS": {
       let id = ob[1];
       let base64Data = ob[2];
       const data = base64ToArrayBuffer(base64Data);
       (id,data);
       break;
     }
     default: {
       (`Unsupported message type ${}`);
     }
   }
 });

Add properties to window object

(window as any)["DotNet"] = DotNet;
export { DotNet };

Complete code

import { DotNet } from "@microsoft/dotnet-js-interop";

 let dispatcher: ;
 dispatcher = ({
   sendByteArray: sendByteArray,
   beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
   endInvokeJSFromDotNet: endInvokeJSFromDotNet,
 });


 function sendByteArray(id: number, data: Uint8Array): void {
     const dataBase64Encoded = base64EncodeByteArray(data);
     (window as any).([
       "ReceiveByteArrayFromJS",
       id,
       dataBase64Encoded,
     ]);
   }

 function beginInvokeDotNetFromJS(
   callId: number,
   assemblyName: string | null,
   methodIdentifier: string,
   dotNetObjectId: number | null,
   argsJson: string
 ): void {
   ("beginInvokeDotNetFromJS");
   (window as any).([
     "beginInvokeDotNetFromJS",
     callId ? () : null,
     assemblyName,
     methodIdentifier,
     dotNetObjectId || 0,
     argsJson,
   ]);
 }

 function endInvokeJSFromDotNet(
   callId: number,
   succeeded: boolean,
   resultOrError: any
 ): void {
   ("beginInvokeDotNetFromJS");
   (window as any).([
     "endInvokeJSFromDotNet",
     callId ? () : null,
     Succeeded,
     resultOrError,
   ]);
 }


 function base64EncodeByteArray(data: Uint8Array) {
   // Base64 encode a (large) byte array
   // Note `btoa((null, data as unknown as number[]));`
   // isn't sufficient as the `apply` over a large array overflows the stack.
   const charBytes = new Array();
   for (var i = 0; i < ; i++) {
     charBytes[i] = (data[i]);
   }
   const dataBase64Encoded = btoa((""));
   return dataBase64Encoded;
 }
 // /a/21797381
 // TODO: If the data is large, consider switching over to the native decoder as in /a/54123275
 // But don't force it to be async all the time. Yielding execution leads to perceptible lag.
 function base64ToArrayBuffer(base64: string): Uint8Array {
     const binaryString = atob(base64);
     const length = ;
     const result = new Uint8Array(length);
     for (let i = 0; i < length; i++) {
       result[i] = (i);
     }
     return result;
   }
 (window as any).("message", (e: any) => {
     var ob = ();

     switch (ob[0]) {
       case "EndInvokeDotNet": {
         (ob[1], ob[2], ob[3]);
         break;
       }
       case "BeginInvokeJS": {
         (ob[1], ob[2], ob[3], ob[4], ob[5]);
         break;
       }
       case "SendByteArrayToJS": {
         let id = ob[1];
         let base64Data = ob[2];
         const data = base64ToArrayBuffer(base64Data);
         (id,data);
         break;
       }
       default: {
         (`Unsupported message type ${}`);
       }
     }
   });

 (window as any)["DotNet"] = DotNet;
 export { DotNet };

2.Net

Similar to the .Net side, WebMessageReceived event and PostWebMessageAsString method of WebView2 are used to communicate with the front-end. The back-end uses WebMessageReceived to process the front-endbeginInvokeDotNetFromJS、endInvokeJSFromDotNet、ReceiveByteArrayFromJSThe message is then processed through BeginInvokeDotNet, EndInvokeJS, and ReceiveByteArray in the static class DotNetDispatcher. By inheriting JSRuntime, the BeginInvokeJS, EndInvokeDotNet, and SendByteArray methods are implemented, and data is sent to the front end through PostWebMessageAsString. No code is given here, please check it directly if you are interested/HekunX/wvfstorehouse.

<Previous