Skip to content

Commit 1322267

Browse files
committed
Updates
1 parent 7a8a2ed commit 1322267

File tree

1 file changed

+29
-25
lines changed

1 file changed

+29
-25
lines changed

aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -460,33 +460,35 @@ IJSRuntime JS { get; set; }
460460

461461
## Create an instance of a JS object using a constructor function
462462

463-
Create an instance of a JS object using a constructor function and get the <xref:Microsoft.JSInterop.IJSObjectReference>/<xref:Microsoft.JSInterop.IJSInProcessObjectReference> .NET handle for referencing the instance with the following API.
463+
Create an instance of a JS object using a constructor function and get the <xref:Microsoft.JSInterop.IJSObjectReference>/<xref:Microsoft.JSInterop.IJSInProcessObjectReference> .NET handle for referencing the instance with the following API:
464464

465-
.NET API call examples for `InvokeNewAsync`/`InvokeNew` in this section use the following JS constructor function example (`TestClass`):
465+
* `InvokeNewAsync`
466+
* `InvokeNew`
467+
468+
Examples in this section demonstrate the API calls with the following `TestClass` with a constructor function (`constructor(text)`):
466469

467470
```javascript
468471
class TestClass {
469-
constructor(text) {
470-
this.text = text;
471-
}
472+
constructor(text) {
473+
this.text = text;
474+
}
472475

473-
getTextLength() {
474-
return this.text.length;
475-
}
476+
getTextLength() {
477+
return this.text.length;
478+
}
476479
}
477480

478-
window.jsInteropTests = {
481+
window.jsInterop = {
479482
TestClass: TestClass
480483
};
481484
```
482485

483486
### Asynchronous `InvokeNewAsync`
484487

485-
Use `InvokeNewAsync(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSRuntime> and <xref:Microsoft.JSInterop.IJSObjectReference> 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 <xref:Microsoft.JSInterop.IJSObjectReference>.
488+
Use `InvokeNewAsync(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSRuntime> and <xref:Microsoft.JSInterop.IJSObjectReference> 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 <xref:Microsoft.JSInterop.IJSObjectReference>.
486489

487490
```csharp
488-
var classRef = await JSRuntime.InvokeNewAsync("jsInteropTests.TestClass",
489-
"text value");
491+
var classRef = await JSRuntime.InvokeNewAsync("jsInterop.TestClass", "Blazor!");
490492
var text = await classRef.GetValueAsync<string>("text");
491493
var textLength = await classRef.InvokeAsync<int>("getTextLength");
492494
```
@@ -495,11 +497,11 @@ An overload is available that takes a <xref:System.Threading.CancellationToken>
495497

496498
### Synchronous `InvokeNew`
497499

498-
Use `InvokeNew(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSInProcessRuntime> and <xref:Microsoft.JSInterop.IJSInProcessObjectReference> 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 <xref:Microsoft.JSInterop.IJSInProcessObjectReference>.
500+
Use `InvokeNew(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSInProcessRuntime> and <xref:Microsoft.JSInterop.IJSInProcessObjectReference> 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 <xref:Microsoft.JSInterop.IJSInProcessObjectReference>.
499501

500502
```csharp
501503
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
502-
var classRef = inProcRuntime.InvokeNew("jsInteropTests.TestClass", "text value");
504+
var classRef = inProcRuntime.InvokeNew("jsInterop.TestClass", "Blazor!");
503505
var text = await classRef.GetValueAsync<string>("text");
504506
var textLength = await classRef.InvokeAsync<int>("getTextLength");
505507
```
@@ -508,16 +510,19 @@ An overload is available that takes a <xref:System.Threading.CancellationToken>
508510

509511
## Read or modify the value of a JS object property
510512

511-
Read or modify the value of a JS object property, both data and accessor properties, with
513+
Read or modify the value of a JS object property, both data and accessor properties, with the following API:
514+
515+
* `GetValueAsync`/`SetValueAsync`
516+
* `GetValue`/`SetValue`
512517

513-
.NET API call examples for `GetValueAsync`/`SetValueAsync`/`GetValue`/`SetValue` in this section use the following JS object example (`testObject`):
518+
Examples in this section demonstrate the API calls with the following JS object (`testObject`):
514519

515520
```javascript
516521
const testObject = {
517-
num: 10
522+
num: 10
518523
}
519524

520-
window.jsInteropTests = {
525+
window.jsInterop = {
521526
testObject: testObject
522527
};
523528
```
@@ -528,16 +533,16 @@ Use `GetValueAsync<TValue>(string identifier)` to read the value of the specifie
528533

529534
```csharp
530535
var valueFromDataPropertyAsync = await JSRuntime.GetValueAsync<int>(
531-
"jsInteropTests.testObject.num");
536+
"jsInterop.testObject.num");
532537
```
533538

534539
The special overload `IJSObjectReference.GetValueAsync<TValue>()` 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.
535540

536541
Use `SetValueAsync<TValue>(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`:
537542

538543
```csharp
539-
await JSRuntime.SetValueAsync("jsInteropTests.testObject.num", 20);
540-
await JSRuntime.SetValueAsync("jsInteropTests.testObject.num2", 30);
544+
await JSRuntime.SetValueAsync("jsInterop.testObject.num", 20);
545+
await JSRuntime.SetValueAsync("jsInterop.testObject.num2", 30);
541546
```
542547

543548
### Synchronous `GetValue` and `SetValue`
@@ -546,16 +551,15 @@ Use `GetValue<TValue>(string identifier)` to read the value of the specified JS
546551

547552
```csharp
548553
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
549-
var valueFromDataProperty = inProcRuntime.GetValue<int>(
550-
"jsInteropTests.testObject.num");
554+
var valueFromDataProperty = inProcRuntime.GetValue<int>("jsInterop.testObject.num");
551555
```
552556

553557
Use `SetValue<TValue>(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`:
554558

555559
```csharp
556560
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
557-
inProcRuntime.SetValue("jsInteropTests.testObject.num", 20);
558-
inProcRuntime.SetValue("jsInteropTests.testObject.num2", 30);
561+
inProcRuntime.SetValue("jsInterop.testObject.num", 20);
562+
inProcRuntime.SetValue("jsInterop.testObject.num2", 30);
559563
```
560564

561565
:::moniker-end

0 commit comments

Comments
 (0)