dotnet · guardrex · Jul 15, 2021 · Jul 12, 2021 · Jul 13, 2021 · Jul 14, 2021
@@ -1,9 +1,9 @@
-@page "/call-js-example-9"
+@page "/call-js-example-10"
 @using System.Runtime.InteropServices
 @using Microsoft.JSInterop
 @inject IJSRuntime JS
 
-<h1>Call JS Example 9</h1>
+<h1>Call JS Example 10</h1>
 
 @if (callResultForBoolean)
 {

@@ -1,9 +1,9 @@
-@page "/call-js-example-9"
+@page "/call-js-example-10"
 @using System.Runtime.InteropServices
 @using Microsoft.JSInterop
 @inject IJSRuntime JS
 
-<h1>Call JS Example 9</h1>
+<h1>Call JS Example 10</h1>
 
 @if (callResultForBoolean)
 {

@@ -1,3 +1,6 @@
+---
+no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
+---
 *This section only applies to Blazor Server apps. In Blazor WebAssembly, the framework doesn't impose a limit on the size of JavaScript (JS) interop inputs and outputs.*
 
 In Blazor Server, JS interop calls are limited in size by the maximum incoming SignalR message size permitted for hub methods, which is enforced by <xref:Microsoft.AspNetCore.SignalR.HubOptions.MaximumReceiveMessageSize?displayProperty=nameWithType> (default: 32 KB). JS to .NET SignalR messages larger than <xref:Microsoft.AspNetCore.SignalR.HubOptions.MaximumReceiveMessageSize> throw an error. The framework doesn't impose a limit on the size of a SignalR message from the hub to a client.

@@ -404,9 +404,64 @@ Objects that contain circular references can't be serialized on the client for e
 * .NET method calls.
 * JavaScript method calls from C# when the return type has circular references.
 
+::: moniker range=">= aspnetcore-6.0"
+
+## Byte array support
+
+Blazor supports optimized byte array JS interop that avoids encoding/decoding byte arrays into Base64. The following example uses JS interop to pass a byte array to .NET.
+
+Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server), provide a `sendByteArray` JS function. The function is called by a button in the component and doesn't return a value:
+
+```html
+<script>
+  window.sendByteArray = () => {
+    const data = new Uint8Array([0x45,0x76,0x65,0x72,0x79,0x74,0x68,0x69,
+      0x6e,0x67,0x27,0x73,0x20,0x73,0x68,0x69,0x6e,0x79,0x2c,
+      0x20,0x43,0x61,0x70,0x74,0x69,0x61,0x6e,0x2e,0x20,0x4e,
+      0x6f,0x74,0x20,0x74,0x6f,0x20,0x66,0x72,0x65,0x74,0x2e]);
+    DotNet.invokeMethodAsync('BlazorSample', 'ReceiveByteArray', data)
+      .then(str => {
+        alert(str);
+      });
+  };
+</script>
+```
+
+`Pages/CallDotNetExample7.razor`:
+
+```razor
+@page "/call-dotnet-example-7"
+@using System.Text
+
+<h1>Call .NET Example 7</h1>
+
+<p>
+    <button onclick="sendByteArray()">Send Bytes</button>
+</p>
+
+<p>
+    Quote &copy;2005 <a href="https://www.uphe.com">Universal Pictures</a>:
+    <a href="https://www.uphe.com/movies/serenity">Serenity</a><br>
+    <a href="https://www.imdb.com/name/nm0821612/">Jewel Staite on IMDB</a>
+</p>
+
+@code {
+    [JSInvokable]
+    public static Task<string> ReceiveByteArray(byte[] receivedBytes)
+    {
+        return Task.FromResult(
+            Encoding.UTF8.GetString(receivedBytes, 0, receivedBytes.Length));
+    }
+}
+```
+
+For information on using a byte array when calling JavaScript from .NET, see <xref:blazor/js-interop/call-javascript-from-dotnet#byte-array-support>.
+
+::: moniker-end
+
 ## Size limits on JavaScript interop calls
 
-[!INCLUDE[](~/blazor/includes/js-interop-size-limits.md)]
+[!INCLUDE[](~/blazor/includes/js-interop/size-limits.md)]
 
 ::: moniker range=">= aspnetcore-5.0"
 

@@ -643,9 +643,68 @@ In the preceding example:
 
 ::: moniker-end
 
+::: moniker range=">= aspnetcore-6.0"
+
+## Byte array support
+
+Blazor supports optimized byte array JS interop that avoids encoding/decoding byte arrays into Base64. The following example uses JS interop to pass a byte array to Javascript.
+
+Inside the closing `</body>` tag of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server), provide a `receiveByteArray` JS function. The function is called with <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A> and doesn't return a value:
+
+```html
+<script>
+  window.receiveByteArray = (bytes) => {
+    let utf8decoder = new TextDecoder();
+    let str = utf8decoder.decode(bytes);
+    return str;
+  };
+</script>
+```
+
+`Pages/CallJsExample9.razor`:
+
+```razor
+@page "/call-js-example-9"
+@inject IJSRuntime JS
+
+<h1>Call JS Example 9</h1>
+
+<p>
+    <button @onclick="SendByteArray">Send Bytes</button>
+</p>
+
+<p>
+    @result
+</p>
+
+<p>
+    Quote &copy;2005 <a href="https://www.uphe.com">Universal Pictures</a>:
+    <a href="https://www.uphe.com/movies/serenity">Serenity</a><br>
+    <a href="https://www.imdb.com/name/nm0821612/">Jewel Staite on IMDB</a>
+</p>
+
+@code {
+    private string result;
+
+    private async Task SendByteArray()
+    {
+        var bytes = new byte[] { 0x45, 0x76, 0x65, 0x72, 0x79, 0x74, 0x68, 0x69,
+            0x6e, 0x67, 0x27, 0x73, 0x20, 0x73, 0x68, 0x69, 0x6e, 0x79, 0x2c,
+            0x20, 0x43, 0x61, 0x70, 0x74, 0x69, 0x61, 0x6e, 0x2e, 0x20, 0x4e,
+            0x6f, 0x74, 0x20, 0x74, 0x6f, 0x20, 0x66, 0x72, 0x65, 0x74, 0x2e };
+
+        result = await JS.InvokeAsync<string>("receiveByteArray", bytes);
+    }
+}
+```
+
+For information on using a byte array when calling .NET from JavaScript, see <xref:blazor/js-interop/call-dotnet-from-javascript#byte-array-support>.
+
+::: moniker-end
+
 ## Size limits on JavaScript interop calls
 
-[!INCLUDE[](~/blazor/includes/js-interop-size-limits.md)]
+[!INCLUDE[](~/blazor/includes/js-interop/size-limits.md)]
 
 ::: moniker range=">= aspnetcore-5.0"
 
@@ -697,9 +756,9 @@ Place the following `<script>` block in `wwwroot/index.html` (Blazor WebAssembly
 > * The function is likely to be renamed.
 > * The function itself might be removed in favor of automatic conversion of strings by the framework.
 
-`Pages/CallJsExample9.razor`:
+`Pages/CallJsExample10.razor`:
 
-[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/call-js-from-dotnet/CallJsExample9.razor)]
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/call-js-from-dotnet/CallJsExample10.razor)]
 
 If an <xref:Microsoft.JSInterop.IJSUnmarshalledObjectReference> instance isn't disposed in C# code, it can be disposed in JS. The following `dispose` function disposes the object reference when called from JS: