From 7a8a2ed72dc5200ba323dc228c5f19e7a1f5153f Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 14 Apr 2025 11:07:52 -0400 Subject: [PATCH 1/7] [Pre4] New JavaScript interop features --- .../call-javascript-from-dotnet.md | 134 +++++++++++++++++- .../javascript-interoperability/index.md | 19 +++ .../aspnetcore-10/includes/blazor.md | 70 +++++++++ 3 files changed, 221 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index e7146908f3a2..8381823a80e0 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -453,6 +453,113 @@ IJSRuntime JS { get; set; } [!INCLUDE[](~/blazor/includes/js-interop/synchronous-js-interop-call-js.md)] +:::moniker range=">= aspnetcore-10.0" + + + +## Create an instance of a JS object using a constructor function + +Create an instance of a JS object using a constructor function and get the / .NET handle for referencing the instance with the following API. + +.NET API call examples for `InvokeNewAsync`/`InvokeNew` in this section use the following JS constructor function example (`TestClass`): + +```javascript +class TestClass { + constructor(text) { + this.text = text; + } + + getTextLength() { + return this.text.length; + } +} + +window.jsInteropTests = { + TestClass: TestClass +}; +``` + +### Asynchronous `InvokeNewAsync` + +Use `InvokeNewAsync(string identifier, object?[]? args)` on and to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an . + +```csharp +var classRef = await JSRuntime.InvokeNewAsync("jsInteropTests.TestClass", + "text value"); +var text = await classRef.GetValueAsync("text"); +var textLength = await classRef.InvokeAsync("getTextLength"); +``` + +An overload is available that takes a argument or timeout argument. + +### Synchronous `InvokeNew` + +Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an . + +```csharp +var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); +var classRef = inProcRuntime.InvokeNew("jsInteropTests.TestClass", "text value"); +var text = await classRef.GetValueAsync("text"); +var textLength = await classRef.InvokeAsync("getTextLength"); +``` + +An overload is available that takes a argument or timeout argument. + +## Read or modify the value of a JS object property + +Read or modify the value of a JS object property, both data and accessor properties, with + +.NET API call examples for `GetValueAsync`/`SetValueAsync`/`GetValue`/`SetValue` in this section use the following JS object example (`testObject`): + +```javascript +const testObject = { + num: 10 +} + +window.jsInteropTests = { + testObject: testObject +}; +``` + +### Asynchronous `GetValueAsync` and `SetValueAsync` + +Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. The property can't be a `set`-only property. A is thrown if the property doesn't exist. The following example returns a value of 10 from the property: + +```csharp +var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync( + "jsInteropTests.testObject.num"); +``` + +The special overload `IJSObjectReference.GetValueAsync()` doesn't take an identifier and simply returns the value of the object. `TValue` is a model of the object's properties that the caller is interested in. + +Use `SetValueAsync(string identifier, TValue value)`to update the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: + +```csharp +await JSRuntime.SetValueAsync("jsInteropTests.testObject.num", 20); +await JSRuntime.SetValueAsync("jsInteropTests.testObject.num2", 30); +``` + +### Synchronous `GetValue` and `SetValue` + +Use `GetValue(string identifier)` to read the value of the specified JS property synchronously. The property can't be a `set`-only property. A is thrown if the property doesn't exist. The following example returns a value of 10 from the property: + +```csharp +var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); +var valueFromDataProperty = inProcRuntime.GetValue( + "jsInteropTests.testObject.num"); +``` + +Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: + +```csharp +var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); +inProcRuntime.SetValue("jsInteropTests.testObject.num", 20); +inProcRuntime.SetValue("jsInteropTests.testObject.num2", 30); +``` + +:::moniker-end + ## JavaScript location Load JavaScript (JS) code using any of approaches described by the [article on JavaScript location](xref:blazor/js-interop/javascript-location): @@ -519,12 +626,35 @@ For browser compatibility, see [Can I use: JavaScript modules: dynamic import](h In server-side scenarios, JS interop calls can't be issued after Blazor's SignalR circuit is disconnected. Without a circuit during component disposal or at any other time that a circuit doesn't exist, the following method calls fail and log a message that the circuit is disconnected as a : +:::moniker-end + +:::moniker range=">= aspnetcore-10.0" + + + * JS interop method calls * * - * ) + * + * `InvokeNewAsync` + * `GetValueAsync` + * `SetValueAsync` * `Dispose`/`DisposeAsync` calls on any . +:::moniker-end + +:::moniker range=">= aspnetcore-5.0 < aspnetcore-10.0" + +* JS interop method calls + * + * + * +* `Dispose`/`DisposeAsync` calls on any . + +:::moniker-end + +:::moniker range=">= aspnetcore-5.0" + In order to avoid logging or to log custom information in server-side Blazor, catch the exception in a [`try-catch`](/dotnet/csharp/language-reference/keywords/try-catch) statement. For the following component disposal example: @@ -627,7 +757,7 @@ In the preceding example: Dynamically importing a module requires a network request, so it can only be achieved asynchronously by calling . -`IJSInProcessObjectReference` represents a reference to a JS object whose functions can be invoked synchronously in client-side components. For more information, see the [Synchronous JS interop in client-side components](#synchronous-js-interop-in-client-side-components) section. + represents a reference to a JS object whose functions can be invoked synchronously in client-side components. For more information, see the [Synchronous JS interop in client-side components](#synchronous-js-interop-in-client-side-components) section. > [!NOTE] > When the external JS file is supplied by a [Razor class library](xref:blazor/components/class-libraries), specify the module's JS file using its stable static web asset path: `./_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}`: diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index 23a56e202d95..3b0721618cc6 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -328,12 +328,31 @@ Don't assume that observing `document.body`, instead of `target.parentNode`, is JavaScript (JS) interop calls can't be issued after Blazor's SignalR circuit is disconnected. Without a circuit during component disposal or at any other time that a circuit doesn't exist, the following method calls fail and log a message that the circuit is disconnected as a : +:::moniker range=">= aspnetcore-10.0" + + + * JS interop method calls * * * + * `InvokeNewAsync` + * `GetValueAsync` + * `SetValueAsync` * `Dispose`/`DisposeAsync` calls on any . +:::moniker-end + +:::moniker range="< aspnetcore-10.0" + +* JS interop method calls + * + * + * +* `Dispose`/`DisposeAsync` calls on any . + +:::moniker-end + In order to avoid logging or to log custom information, catch the exception in a [`try-catch`](/dotnet/csharp/language-reference/keywords/try-catch) statement. For the following component disposal example: diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index 1d1cdce507c1..ad7a5e20f6c0 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -280,3 +280,73 @@ else ``` For more information, see . Additional API implementation notes, which are subject to change at any time, are available in [[Blazor] Support for declaratively persisting component and services state (`dotnet/aspnetcore` #60634)](https://github.com/dotnet/aspnetcore/pull/60634). + + From 13222676bcac225e9ee0a8c81d7206ed390f6cd2 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 06:41:09 -0400 Subject: [PATCH 2/7] Updates --- .../call-javascript-from-dotnet.md | 54 ++++++++++--------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 8381823a80e0..fd666bea196b 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -460,33 +460,35 @@ IJSRuntime JS { get; set; } ## Create an instance of a JS object using a constructor function -Create an instance of a JS object using a constructor function and get the / .NET handle for referencing the instance with the following API. +Create an instance of a JS object using a constructor function and get the / .NET handle for referencing the instance with the following API: -.NET API call examples for `InvokeNewAsync`/`InvokeNew` in this section use the following JS constructor function example (`TestClass`): +* `InvokeNewAsync` +* `InvokeNew` + +Examples in this section demonstrate the API calls with the following `TestClass` with a constructor function (`constructor(text)`): ```javascript class TestClass { - constructor(text) { - this.text = text; - } + constructor(text) { + this.text = text; + } - getTextLength() { - return this.text.length; - } + getTextLength() { + return this.text.length; + } } -window.jsInteropTests = { +window.jsInterop = { TestClass: TestClass }; ``` ### Asynchronous `InvokeNewAsync` -Use `InvokeNewAsync(string identifier, object?[]? args)` on and to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an . +Use `InvokeNewAsync(string identifier, object?[]? args)` on and to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` contains a constructor function, and `classRef` is an . ```csharp -var classRef = await JSRuntime.InvokeNewAsync("jsInteropTests.TestClass", - "text value"); +var classRef = await JSRuntime.InvokeNewAsync("jsInterop.TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -495,11 +497,11 @@ An overload is available that takes a ### Synchronous `InvokeNew` -Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an . +Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` contains a constructor function, and `classRef` is an . ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -var classRef = inProcRuntime.InvokeNew("jsInteropTests.TestClass", "text value"); +var classRef = inProcRuntime.InvokeNew("jsInterop.TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -508,16 +510,19 @@ An overload is available that takes a ## Read or modify the value of a JS object property -Read or modify the value of a JS object property, both data and accessor properties, with +Read or modify the value of a JS object property, both data and accessor properties, with the following API: + +* `GetValueAsync`/`SetValueAsync` +* `GetValue`/`SetValue` -.NET API call examples for `GetValueAsync`/`SetValueAsync`/`GetValue`/`SetValue` in this section use the following JS object example (`testObject`): +Examples in this section demonstrate the API calls with the following JS object (`testObject`): ```javascript const testObject = { - num: 10 + num: 10 } -window.jsInteropTests = { +window.jsInterop = { testObject: testObject }; ``` @@ -528,7 +533,7 @@ Use `GetValueAsync(string identifier)` to read the value of the specifie ```csharp var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync( - "jsInteropTests.testObject.num"); + "jsInterop.testObject.num"); ``` The special overload `IJSObjectReference.GetValueAsync()` doesn't take an identifier and simply returns the value of the object. `TValue` is a model of the object's properties that the caller is interested in. @@ -536,8 +541,8 @@ The special overload `IJSObjectReference.GetValueAsync()` doesn't take a Use `SetValueAsync(string identifier, TValue value)`to update the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: ```csharp -await JSRuntime.SetValueAsync("jsInteropTests.testObject.num", 20); -await JSRuntime.SetValueAsync("jsInteropTests.testObject.num2", 30); +await JSRuntime.SetValueAsync("jsInterop.testObject.num", 20); +await JSRuntime.SetValueAsync("jsInterop.testObject.num2", 30); ``` ### Synchronous `GetValue` and `SetValue` @@ -546,16 +551,15 @@ Use `GetValue(string identifier)` to read the value of the specified JS ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -var valueFromDataProperty = inProcRuntime.GetValue( - "jsInteropTests.testObject.num"); +var valueFromDataProperty = inProcRuntime.GetValue("jsInterop.testObject.num"); ``` Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -inProcRuntime.SetValue("jsInteropTests.testObject.num", 20); -inProcRuntime.SetValue("jsInteropTests.testObject.num2", 30); +inProcRuntime.SetValue("jsInterop.testObject.num", 20); +inProcRuntime.SetValue("jsInterop.testObject.num2", 30); ``` :::moniker-end From 1610c07b93ac648069beac97dfd0f28ba6867470 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 06:50:29 -0400 Subject: [PATCH 3/7] Updates --- .../call-javascript-from-dotnet.md | 8 ++++---- .../aspnetcore-10/includes/blazor.md | 17 ++++++++--------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index fd666bea196b..abe7869fd16e 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -462,8 +462,8 @@ IJSRuntime JS { get; set; } Create an instance of a JS object using a constructor function and get the / .NET handle for referencing the instance with the following API: -* `InvokeNewAsync` -* `InvokeNew` +* `InvokeNewAsync` (asynchronous) +* `InvokeNew` (synchronous) Examples in this section demonstrate the API calls with the following `TestClass` with a constructor function (`constructor(text)`): @@ -512,8 +512,8 @@ An overload is available that takes a Read or modify the value of a JS object property, both data and accessor properties, with the following API: -* `GetValueAsync`/`SetValueAsync` -* `GetValue`/`SetValue` +* `GetValueAsync`/`SetValueAsync` (asynchronous) +* `GetValue`/`SetValue` (synchronous) Examples in this section demonstrate the API calls with the following JS object (`testObject`): diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index ad7a5e20f6c0..b59a65f9d349 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -292,11 +292,10 @@ Blazor adds support for the following JS interop features: The following asynchronous methods are available on and with the same scoping behavior as the existing method: -* `InvokeNewAsync(string identifier, object?[]? args)`: Invokes the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an : +* `InvokeNewAsync(string identifier, object?[]? args)`: Invokes the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` is a class with a constructor function, and `classRef` is an : ```csharp - var classRef = await JSRuntime.InvokeNewAsync("jsInteropTests.TestClass", - "text value"); + var classRef = await JSRuntime.InvokeNewAsync("jsInterop.TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -305,13 +304,13 @@ The following asynchronous methods are available on ( - "jsInteropTests.testObject.num"); + "jsInterop.testObject.num"); ``` * `SetValueAsync(string identifier, TValue value)`: Updates the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `num` is created on `testObject` with a value of 30 if it doesn't exist: ```csharp - await JSRuntime.SetValueAsync("jsInteropTests.testObject.num", 30); + await JSRuntime.SetValueAsync("jsInterop.testObject.num", 30); ``` Overloads are available for each of the preceding methods that take a argument or timeout argument. @@ -320,11 +319,11 @@ The special overload `IJSObjectReference.GetValueAsync()` doesn't take a The following synchronous methods are available on and with the same scoping behavior as the existing method: -* `InvokeNew(string identifier, object?[]? args)`: Invokes the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInteropTests.TestClass` is a constructor function, and `classRef` is an : +* `InvokeNew(string identifier, object?[]? args)`: Invokes the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` is a class with a constructor function, and `classRef` is an : ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); - var classRef = inProcRuntime.InvokeNew("jsInteropTests.TestClass", "text value"); + var classRef = inProcRuntime.InvokeNew("jsInterop.TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -334,14 +333,14 @@ The following synchronous methods are available on ( - "jsInteropTests.testObject.num"); + "jsInterop.testObject.num"); ``` * `SetValue(string identifier, TValue value)`: Updates the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `num` is created on `testObject` with a value of 20 if it doesn't exist: ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); - inProcRuntime.SetValue("jsInteropTests.testObject.num", 20); + inProcRuntime.SetValue("jsInterop.testObject.num", 20); ``` For more information, see the following sections of the *Call JavaScript functions from .NET methods* article: From 3f3a482da89d79bd2c6d8cbf64993fdfd1f238cb Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 10:15:51 -0400 Subject: [PATCH 4/7] Apply suggestions from code review --- .../call-javascript-from-dotnet.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index abe7869fd16e..420194f050bf 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -529,16 +529,14 @@ window.jsInterop = { ### Asynchronous `GetValueAsync` and `SetValueAsync` -Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. The property can't be a `set`-only property. A is thrown if the property doesn't exist. The following example returns a value of 10 from the property: +Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. A is thrown if the property doesn't exist or is a `set`-only property. ```csharp var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync( "jsInterop.testObject.num"); ``` -The special overload `IJSObjectReference.GetValueAsync()` doesn't take an identifier and simply returns the value of the object. `TValue` is a model of the object's properties that the caller is interested in. - -Use `SetValueAsync(string identifier, TValue value)`to update the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: +Use `SetValueAsync(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. ```csharp await JSRuntime.SetValueAsync("jsInterop.testObject.num", 20); @@ -547,14 +545,14 @@ await JSRuntime.SetValueAsync("jsInterop.testObject.num2", 30); ### Synchronous `GetValue` and `SetValue` -Use `GetValue(string identifier)` to read the value of the specified JS property synchronously. The property can't be a `set`-only property. A is thrown if the property doesn't exist. The following example returns a value of 10 from the property: +Use `GetValue(string identifier)` to read the value of the specified JS property synchronously. A is thrown if the property doesn't exist or is a `set`-only property. ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); var valueFromDataProperty = inProcRuntime.GetValue("jsInterop.testObject.num"); ``` -Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: +Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); From e94c06ac6f9e243b289e029b1396cd9f4b639149 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 10:21:56 -0400 Subject: [PATCH 5/7] Updates --- .../call-javascript-from-dotnet.md | 33 +++++++------------ .../aspnetcore-10/includes/blazor.md | 6 ++-- 2 files changed, 14 insertions(+), 25 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 420194f050bf..0eebbfef308e 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -468,7 +468,7 @@ Create an instance of a JS object using a constructor function and get the and to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` contains a constructor function, and `classRef` is an . +Use `InvokeNewAsync(string identifier, object?[]? args)` on and to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an . ```csharp -var classRef = await JSRuntime.InvokeNewAsync("jsInterop.TestClass", "Blazor!"); +var classRef = await JSRuntime.InvokeNewAsync("TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -497,11 +493,11 @@ An overload is available that takes a ### Synchronous `InvokeNew` -Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` contains a constructor function, and `classRef` is an . +Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an . ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -var classRef = inProcRuntime.InvokeNew("jsInterop.TestClass", "Blazor!"); +var classRef = inProcRuntime.InvokeNew("TestClass", "Blazor!"); var text = await classRef.GetValueAsync("text"); var textLength = await classRef.InvokeAsync("getTextLength"); ``` @@ -518,13 +514,9 @@ Read or modify the value of a JS object property, both data and accessor propert Examples in this section demonstrate the API calls with the following JS object (`testObject`): ```javascript -const testObject = { +window.testObject = { num: 10 } - -window.jsInterop = { - testObject: testObject -}; ``` ### Asynchronous `GetValueAsync` and `SetValueAsync` @@ -532,15 +524,14 @@ window.jsInterop = { Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. A is thrown if the property doesn't exist or is a `set`-only property. ```csharp -var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync( - "jsInterop.testObject.num"); +var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync("testObject.num"); ``` Use `SetValueAsync(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. ```csharp -await JSRuntime.SetValueAsync("jsInterop.testObject.num", 20); -await JSRuntime.SetValueAsync("jsInterop.testObject.num2", 30); +await JSRuntime.SetValueAsync("testObject.num", 20); +await JSRuntime.SetValueAsync("testObject.num2", 30); ``` ### Synchronous `GetValue` and `SetValue` @@ -549,15 +540,15 @@ Use `GetValue(string identifier)` to read the value of the specified JS ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -var valueFromDataProperty = inProcRuntime.GetValue("jsInterop.testObject.num"); +var valueFromDataProperty = inProcRuntime.GetValue("testObject.num"); ``` Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); -inProcRuntime.SetValue("jsInterop.testObject.num", 20); -inProcRuntime.SetValue("jsInterop.testObject.num2", 30); +inProcRuntime.SetValue("testObject.num", 20); +inProcRuntime.SetValue("testObject.num2", 30); ``` :::moniker-end diff --git a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md index b59a65f9d349..ccf25f2e19d5 100644 --- a/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md +++ b/aspnetcore/release-notes/aspnetcore-10/includes/blazor.md @@ -307,7 +307,7 @@ The following asynchronous methods are available on (string identifier, TValue value)`: Updates the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `num` is created on `testObject` with a value of 30 if it doesn't exist: +* `SetValueAsync(string identifier, TValue value)`: Updates the value of the specified JS property asynchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `num` is created on `testObject` with a value of 30 if it doesn't exist: ```csharp await JSRuntime.SetValueAsync("jsInterop.testObject.num", 30); @@ -315,8 +315,6 @@ The following asynchronous methods are available on argument or timeout argument. -The special overload `IJSObjectReference.GetValueAsync()` doesn't take an identifier and simply returns the value of the object (`TValue` is a model of the object's properties that the caller is interested in). - The following synchronous methods are available on and with the same scoping behavior as the existing method: * `InvokeNew(string identifier, object?[]? args)`: Invokes the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `jsInterop.TestClass` is a class with a constructor function, and `classRef` is an : @@ -336,7 +334,7 @@ The following synchronous methods are available on (string identifier, TValue value)`: Updates the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. In the following example, `num` is created on `testObject` with a value of 20 if it doesn't exist: +* `SetValue(string identifier, TValue value)`: Updates the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `num` is created on `testObject` with a value of 20 if it doesn't exist: ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); From 44c30abcc6d7986965bc7dd04947fc4395974019 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 10:22:54 -0400 Subject: [PATCH 6/7] Updates --- .../javascript-interoperability/call-javascript-from-dotnet.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index 0eebbfef308e..b4246f406552 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -524,7 +524,8 @@ window.testObject = { Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. A is thrown if the property doesn't exist or is a `set`-only property. ```csharp -var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync("testObject.num"); +var valueFromDataPropertyAsync = + await JSRuntime.GetValueAsync("testObject.num"); ``` Use `SetValueAsync(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. From a20be48556d3c003c7613681ea30093f0e7da200 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 15 Apr 2025 10:45:33 -0400 Subject: [PATCH 7/7] Updates --- .../call-javascript-from-dotnet.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md index b4246f406552..e20af5fc6404 100644 --- a/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md +++ b/aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md @@ -493,7 +493,7 @@ An overload is available that takes a ### Synchronous `InvokeNew` -Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an . +Use `InvokeNew(string identifier, object?[]? args)` on and to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an : ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); @@ -521,14 +521,14 @@ window.testObject = { ### Asynchronous `GetValueAsync` and `SetValueAsync` -Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. A is thrown if the property doesn't exist or is a `set`-only property. +Use `GetValueAsync(string identifier)` to read the value of the specified JS property asynchronously. A is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataPropertyAsync`: ```csharp var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync("testObject.num"); ``` -Use `SetValueAsync(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. +Use `SetValueAsync(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: ```csharp await JSRuntime.SetValueAsync("testObject.num", 20); @@ -537,14 +537,14 @@ await JSRuntime.SetValueAsync("testObject.num2", 30); ### Synchronous `GetValue` and `SetValue` -Use `GetValue(string identifier)` to read the value of the specified JS property synchronously. A is thrown if the property doesn't exist or is a `set`-only property. +Use `GetValue(string identifier)` to read the value of the specified JS property synchronously. A is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataProperty`: ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime); var valueFromDataProperty = inProcRuntime.GetValue("testObject.num"); ``` -Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. +Use `SetValue(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`: ```csharp var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);