From 5747431cc7590c9244d1896a62ed29cbf68d319e Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 10 Nov 2022 10:20:04 -0600 Subject: [PATCH 1/3] Blazor 7.0 API doc cross-links --- .../blazor/components/virtualization.md | 8 ++--- aspnetcore/blazor/fundamentals/routing.md | 32 +++++++++---------- .../import-export-interop.md | 23 +++++++------ .../webassembly/additional-scenarios.md | 28 ++++++++-------- .../blazor/security/webassembly/index.md | 10 +++--- aspnetcore/client-side/dotnet-interop.md | 9 ++++-- 6 files changed, 58 insertions(+), 52 deletions(-) diff --git a/aspnetcore/blazor/components/virtualization.md b/aspnetcore/blazor/components/virtualization.md index c99b789b1dd0..af3a470781ff 100644 --- a/aspnetcore/blazor/components/virtualization.md +++ b/aspnetcore/blazor/components/virtualization.md @@ -16,7 +16,7 @@ This article explains how to use component virtualization in ASP.NET Core Blazor Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support with the [`Virtualize` component](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601). Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time. -Use the `Virtualize` component when: +Use the `Virtualize` component ([reference source](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601)) when: * Rendering a set of data items in a loop. * Most of the items aren't visible due to scrolling. @@ -290,7 +290,7 @@ The `Virtualize` component supports using the document itself as the scroll root ## Control the spacer element tag name -If the `Virtualize` component is placed inside an element that requires a specific child tag name, `SpacerElement` allows you to obtain or set the virtualization spacer tag name. The default value is `div`. For the following example, the `Virtualize` component renders inside a table body element ([`tbody`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody)), so the appropriate child element for a table row ([`tr`](https://developer.mozilla.org/docs/Web/HTML/Element/tr)) is set as the spacer. +If the `Virtualize` component is placed inside an element that requires a specific child tag name, allows you to obtain or set the virtualization spacer tag name. The default value is `div`. For the following example, the `Virtualize` component renders inside a table body element ([`tbody`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody)), so the appropriate child element for a table row ([`tr`](https://developer.mozilla.org/docs/Web/HTML/Element/tr)) is set as the spacer. `Pages/VirtualizedTable.razor`: @@ -338,7 +338,7 @@ In the preceding example, the document root is used as the scroll container, so Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support with the [`Virtualize` component](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601). Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time. -Use the `Virtualize` component when: +Use the `Virtualize` component ([reference source](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601)) when: * Rendering a set of data items in a loop. * Most of the items aren't visible due to scrolling. @@ -617,7 +617,7 @@ To work around this problem prior to the release of .NET 7, either avoid styling Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support with the [`Virtualize` component](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601). Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time. -Use the `Virtualize` component when: +Use the `Virtualize` component ([reference source](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601)) when: * Rendering a set of data items in a loop. * Most of the items aren't visible due to scrolling. diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 43abf2ee92d1..0b65d9f016ac 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -253,11 +253,11 @@ The uses the browser's ## Navigation options -Pass `NavigationOptions` to to control the following behaviors: +Pass to to control the following behaviors: -* `ForceLoad`: Bypass client-side routing and force the browser to load the new page from the server, whether or not the URI is handled by the client-side router. The default value is `false`. -* `ReplaceHistoryEntry`: Replace the current entry in the history stack. If `false`, append the new entry to the history stack. The default value is `false`. -* `HistoryEntryState`: Gets or sets the state to append to the history entry. +* : Bypass client-side routing and force the browser to load the new page from the server, whether or not the URI is handled by the client-side router. The default value is `false`. +* : Replace the current entry in the history stack. If `false`, append the new entry to the history stack. The default value is `false`. +* : Gets or sets the state to append to the history entry. ```csharp Navigation.NavigateTo("/path", new NavigationOptions @@ -605,13 +605,13 @@ In the following `App` component example: ## Handle/prevent location changes -`RegisterLocationChangingHandler` registers a handler to process incoming navigation events. The handler's context provided by `LocationChangingContext` includes the following properties: + registers a handler to process incoming navigation events. The handler's context provided by includes the following properties: -* `TargetLocation`: Gets the target location. -* `HistoryEntryState`: Gets the state associated with the target history entry. -* `IsNavigationIntercepted`: Gets whether the navigation was intercepted from a link. -* `CancellationToken`: Gets a to determine if the navigation was canceled, for example, to determine if the user triggered a different navigation. -* `PreventNavigation`: Called to prevent the navigation from continuing. +* : Gets the target location. +* : Gets the state associated with the target history entry. +* : Gets whether the navigation was intercepted from a link. +* : Gets a to determine if the navigation was canceled, for example, to determine if the user triggered a different navigation. +* : Called to prevent the navigation from continuing. A component can register multiple location changing handlers in its [`OnAfterRender` or `OnAfterRenderAsync` methods](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync). Navigation invokes all of the location changing handlers registered across the entire app (across multiple components), and any internal navigation executes them all in parallel. In addition to handlers are invoked: @@ -671,23 +671,23 @@ Since internal navigation can be canceled asynchronously, multiple overlapping c * The app may treat multiple back and forward button selections as a single selection. * If the user selects multiple links before the navigation completes, the last link selected determines the navigation. -For more information on passing `NavigationOptions` to to control entries and state of the navigation history stack, see the [Navigation options](#navigation-options) section. +For more information on passing to to control entries and state of the navigation history stack, see the [Navigation options](#navigation-options) section. For additional example code, see the [`NavigationManagerComponent` in the `BasicTestApp` (`dotnet/aspnetcore` reference source)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/RouterTest/NavigationManagerComponent.razor). [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] -The `NavigationLock` component intercepts navigation events as long as it is rendered, effectively "locking" any given navigation until a decision is made to either proceed or cancel. Use `NavigationLock` when navigation interception can be scoped to the lifetime of a component. +The [`NavigationLock` component](xref:Microsoft.AspNetCore.Components.Routing.NavigationLock) intercepts navigation events as long as it is rendered, effectively "locking" any given navigation until a decision is made to either proceed or cancel. Use `NavigationLock` when navigation interception can be scoped to the lifetime of a component. -`NavigationLock` parameters: + parameters: -* `ConfirmExternalNavigation` sets a browser dialog to prompt the user to either confirm or cancel external navigation. The default value is `false`. Displaying the confirmation dialog requires initial user interaction with the page before triggering external navigation with the URL in the browser's address bar. For more information on the interaction requirement, see [Window: `beforeunload` event (MDN documentation)](https://developer.mozilla.org/docs/Web/API/Window/beforeunload_event). -* `OnBeforeInternalNavigation` sets a callback for internal navigation events. +* sets a browser dialog to prompt the user to either confirm or cancel external navigation. The default value is `false`. Displaying the confirmation dialog requires initial user interaction with the page before triggering external navigation with the URL in the browser's address bar. For more information on the interaction requirement, see [Window: `beforeunload` event (MDN documentation)](https://developer.mozilla.org/docs/Web/API/Window/beforeunload_event). +* sets a callback for internal navigation events. In the following `NavLock` component: * An attempt to follow the link to Microsoft's website must be confirmed by the user before the navigation to `https://www.microsoft.com` succeeds. -* `PreventNavigation` is called to prevent navigation from occurring if the user declines to confirm the navigation via a [JavaScript (JS) interop call](xref:blazor/js-interop/call-javascript-from-dotnet) that spawns the [JS `confirm` dialog](https://developer.mozilla.org/docs/Web/API/Window/confirm). +* is called to prevent navigation from occurring if the user declines to confirm the navigation via a [JavaScript (JS) interop call](xref:blazor/js-interop/call-javascript-from-dotnet) that spawns the [JS `confirm` dialog](https://developer.mozilla.org/docs/Web/API/Window/confirm). `Pages/NavLock.razor`: diff --git a/aspnetcore/blazor/javascript-interoperability/import-export-interop.md b/aspnetcore/blazor/javascript-interoperability/import-export-interop.md index 17c8f8c49ca8..91288a91b3a6 100644 --- a/aspnetcore/blazor/javascript-interoperability/import-export-interop.md +++ b/aspnetcore/blazor/javascript-interoperability/import-export-interop.md @@ -65,7 +65,7 @@ This section explains how to call JS functions from .NET. In the following `CallJavaScript1` component: -* The `CallJavaScript1` module is imported asynchronously from the [collocated JS file](xref:blazor/js-interop/index#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) with `JSHost.ImportAsync`. +* The `CallJavaScript1` module is imported asynchronously from the [collocated JS file](xref:blazor/js-interop/index#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) with . * The imported `getMessage` JS function is called by `GetWelcomeMessage`. * The returned welcome message string is displayed in the UI via the `message` field. @@ -98,7 +98,7 @@ In the following `CallJavaScript1` component: > [!NOTE] > Code can include a conditional check for to ensure that the JS interop is only called in Blazor WebAssembly apps running on the client in a browser. This is important for libraries/NuGet packages that target Blazor hosting models that aren't based on WebAssembly, such as Blazor Server and Blazor Hybrid, which can't execute the code provided by this JS interop API. -To import a JS function to call it from C#, use the `[JSImport]` attribute on a C# method signature that matches the JS function's signature. The first parameter to the `[JSImport]` attribute is the name of the JS function to import, and the second parameter is the name of the [JS module](xref:blazor/js-interop/index#javascript-isolation-in-javascript-modules). +To import a JS function to call it from C#, use the [`[JSImport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSImportAttribute) on a C# method signature that matches the JS function's signature. The first parameter to the `[JSImport]` attribute is the name of the JS function to import, and the second parameter is the name of the [JS module](xref:blazor/js-interop/index#javascript-isolation-in-javascript-modules). In the following example, `getMessage` is a JS function that returns a `string` for a module named `CallJavaScript1`. The C# method signature matches: No parameters are passed to the JS function, and the JS function returns a `string`. The JS function is called by `GetWelcomeMessage` in C# code. @@ -120,11 +120,11 @@ public partial class CallJavaScript1 The app's namespace for the preceding `CallJavaScript1` partial class is `BlazorSample`. The component's namespace is `BlazorSample.Pages`. If using the preceding component in a local test app, update the namespace to match the app. For example, the namespace is `ContosoApp.Pages` if the app's namespace is `ContosoApp`. For more information, see . -In the imported method signature, you can use .NET types for parameters and return values, which are marshalled automatically by the runtime. Use `JSMarshalAsAttribute` to control how the imported method parameters are marshalled. For example, you might choose to marshal a `long` as or . You can pass / callbacks as parameters, which are marshalled as callable JS functions. You can pass both JS and managed object references, and they are marshaled as proxy objects, keeping the object alive across the boundary until the proxy is garbage collected. You can also import and export asynchronous methods with a result, which are marshaled as [JS promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). Most of the marshalled types work in both directions, as parameters and as return values, on both imported and exported methods, which are covered in the [Call .NET from JavaScript](#call-net-from-javascript) section later in this article. +In the imported method signature, you can use .NET types for parameters and return values, which are marshalled automatically by the runtime. Use to control how the imported method parameters are marshalled. For example, you might choose to marshal a `long` as or . You can pass / callbacks as parameters, which are marshalled as callable JS functions. You can pass both JS and managed object references, and they are marshaled as proxy objects, keeping the object alive across the boundary until the proxy is garbage collected. You can also import and export asynchronous methods with a result, which are marshaled as [JS promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). Most of the marshalled types work in both directions, as parameters and as return values, on both imported and exported methods, which are covered in the [Call .NET from JavaScript](#call-net-from-javascript) section later in this article. [!INCLUDE[](~/blazor/includes/js-interop/7.0/import-export-interop-mappings.md)] -The module name in the `[JSImport]` attribute and the call to load the module in the component with `JSHost.ImportAsync` must match and be unique in the app. When authoring a library for deployment in a NuGet package, we recommend using the NuGet package namespace as a prefix in module names. In the following example, the module name reflects the `Contoso.InteropServices.JavaScript` package and a folder of user message interop classes (`UserMessages`): +The module name in the `[JSImport]` attribute and the call to load the module in the component with must match and be unique in the app. When authoring a library for deployment in a NuGet package, we recommend using the NuGet package namespace as a prefix in module names. In the following example, the module name reflects the `Contoso.InteropServices.JavaScript` package and a folder of user message interop classes (`UserMessages`): ```csharp [JSImport("getMessage", @@ -192,7 +192,7 @@ The following `CallDotNet1` component calls JS that directly interacts with the } ``` -To export a .NET method so that it can be called from JS, use the `[JSExport]` attribute. +To export a .NET method so that it can be called from JS, use the [`[JSExport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSExportAttribute). In the following example: @@ -248,10 +248,10 @@ export async function setMessage() { ## Multiple module import calls -After a JS module is loaded, the module's JS functions are available to the app's components and classes as long as the app is running in the browser window or tab without the user manually reloading the app. `JSHost.ImportAsync` can be called multiple times on the same module without a significant performance penalty when: +After a JS module is loaded, the module's JS functions are available to the app's components and classes as long as the app is running in the browser window or tab without the user manually reloading the app. can be called multiple times on the same module without a significant performance penalty when: -* The user visits a component that calls `JSHost.ImportAsync` to import a module, navigates away from the component, and then returns to the component where `JSHost.ImportAsync` is called again for the same module import. -* The same module is used by different components and loaded by `JSHost.ImportAsync` in each of the components. +* The user visits a component that calls to import a module, navigates away from the component, and then returns to the component where is called again for the same module import. +* The same module is used by different components and loaded by in each of the components. ## Use of a single JavaScript module across components @@ -268,7 +268,7 @@ The following components, classes, C# methods, and JS functions are used: * `wwwroot/js/interop.js` file: Contains the JS functions. * `getMessage`: Returns a welcome message when called by C# code in a component. * `setMessage`: Calls the `GetMessageFromDotnet` C# method and assigns the returned welcome message to a DOM `` element. -* `Program.cs` calls `JSHost.ImportAsync` to load the module from `wwwroot/js/interop.js`. +* `Program.cs` calls to load the module from `wwwroot/js/interop.js`. * `CallJavaScript2` component (`Pages/CallJavaScript2.razor`): Calls `GetWelcomeMessage` and displays the returned welcome message in the component's UI. * `CallDotNet2` component (`Pages/CallDotNet2.razor`): Calls `SetWelcomeMessage`. @@ -315,7 +315,7 @@ export async function setMessage() { } ``` -Make the `System.Runtime.InteropServices.JavaScript` namespace available at the top of the `Program.cs` file: +Make the namespace available at the top of the `Program.cs` file: ```csharp using System.Runtime.InteropServices.JavaScript; @@ -378,6 +378,9 @@ await JSHost.ImportAsync("Interop", "../js/interop.js"); ## Additional resources +* API documentation + * [`[JSImport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSImportAttribute) + * [`[JSExport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSExportAttribute) * * In the `dotnet/runtime` GitHub repository: * [.NET WebAssembly runtime](https://github.com/dotnet/runtime/blob/main/src/mono/wasm/runtime/) diff --git a/aspnetcore/blazor/security/webassembly/additional-scenarios.md b/aspnetcore/blazor/security/webassembly/additional-scenarios.md index 9f02f66e330f..09455c1910a5 100644 --- a/aspnetcore/blazor/security/webassembly/additional-scenarios.md +++ b/aspnetcore/blazor/security/webassembly/additional-scenarios.md @@ -78,7 +78,7 @@ The following scenarios demonstrate how to customize authentication requests and ### Customize the login process -Add additional parameters to a login request by calling `TryAddAdditionalParameter` one or more times on a new instance of `InteractiveRequestOptions`: +Add additional parameters to a login request by calling one or more times on a new instance of : ```csharp InteractiveRequestOptions requestOptions = @@ -99,9 +99,9 @@ The preceding example assumes: * The presence of an `@using`/`using` statement for API in the namespace. * injected as `Navigation`. -Obtain an additional parameter by calling `TryGetAdditionalParameter` with the name of the parameter. Remove an additional parameter by calling `TryRemoveAdditionalParameter` with the name of the parameter. +Obtain an additional parameter by calling `TryGetAdditionalParameter` with the name of the parameter. Remove an additional parameter by calling with the name of the parameter. - +For more information, see . ### Logout with a custom return URL @@ -113,7 +113,7 @@ Navigation.NavigateToLogout("authentication/logout", "goodbye"); ### Customize options before obtaining a token interactively -If an occurs, attach additional parameters for a new identity provider access token request by calling `TryAddAdditionalParameter` one or more times: +If an occurs, attach additional parameters for a new identity provider access token request by calling one or more times: ```csharp try @@ -136,11 +136,11 @@ The preceding example assumes that: * The presence of an `@using`/`using` statement for API in the namespace. * `HttpClient` injected as `Http`. - +For more information, see . ### Customize options when using an `IAccessTokenProvider` -If obtaining a token fails when using an , attach additional parameters for the new identity provider access token request by calling `TryAddAdditionalParameter` one or more times: +If obtaining a token fails when using an , attach additional parameters for the new identity provider access token request by calling one or more times: ```csharp var accessTokenResult = await TokenProvider.RequestAccessToken( @@ -166,11 +166,11 @@ The preceding example assumes: * The presence of an `@using`/`using` statement for API in the namespace. * injected as `TokenProvider`. - +For more information, see . ### Obtain the login path from authentication options -Obtain the configured login path from `RemoteAuthenticationOptions`: +Obtain the configured login path from : ```csharp var loginPath = RemoteAuthOptions.Get(Options.DefaultName).AuthenticationPaths.LogInPath; @@ -423,7 +423,7 @@ An alternative approach to using the i ## Request additional access tokens -Access tokens can be manually obtained by calling `IAccessTokenProvider.RequestAccessToken`. In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: +Access tokens can be manually obtained by calling . In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: In `Program.cs`: @@ -439,7 +439,7 @@ builder.Services.AddMsalAuthentication(options => The `{CUSTOM SCOPE 1}` and `{CUSTOM SCOPE 2}` placeholders in the preceding example are custom scopes. -The `IAccessTokenProvider.RequestToken` method provides an overload that allows an app to provision an access token with a given set of scopes. +The method provides an overload that allows an app to provision an access token with a given set of scopes. In a Razor component: @@ -1649,7 +1649,7 @@ An alternative approach to using the i ## Request additional access tokens -Access tokens can be manually obtained by calling `IAccessTokenProvider.RequestAccessToken`. In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: +Access tokens can be manually obtained by calling . In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: In `Program.cs`: @@ -2875,7 +2875,7 @@ An alternative approach to using the i ## Request additional access tokens -Access tokens can be manually obtained by calling `IAccessTokenProvider.RequestAccessToken`. In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: +Access tokens can be manually obtained by calling . In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: In `Program.cs`: @@ -4106,7 +4106,7 @@ An alternative approach to using the i ## Request additional access tokens -Access tokens can be manually obtained by calling `IAccessTokenProvider.RequestAccessToken`. In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: +Access tokens can be manually obtained by calling . In the following example, an additional scope is required by an app for the default . The Microsoft Authentication Library (MSAL) example configures the scope with `MsalProviderOptions`: In `Program.cs`: @@ -4122,7 +4122,7 @@ builder.Services.AddMsalAuthentication(options => The `{CUSTOM SCOPE 1}` and `{CUSTOM SCOPE 2}` placeholders in the preceding example are custom scopes. -The `IAccessTokenProvider.RequestToken` method provides an overload that allows an app to provision an access token with a given set of scopes. +The method provides an overload that allows an app to provision an access token with a given set of scopes. In a Razor component: diff --git a/aspnetcore/blazor/security/webassembly/index.md b/aspnetcore/blazor/security/webassembly/index.md index 57abdd881841..460013f484c1 100644 --- a/aspnetcore/blazor/security/webassembly/index.md +++ b/aspnetcore/blazor/security/webassembly/index.md @@ -65,19 +65,19 @@ The state stored by the History API provides the following benefits for remote a * The attack surface area is reduced. Unlike using the query string to store navigation state, the state stored by the History API can't be set via a top-level navigation nor be influenced from a different origin. * The history entry is replaced upon successful authentication, so the state attached to the history entry is removed and doesn't require clean up. -`InteractiveRequestOptions` represents the request to the identity provider for logging in or provisioning an access token. + represents the request to the identity provider for logging in or provisioning an access token. -`NavigationManagerExtensions` provides the `NavigateToLogin` method for a login operation and `NavigateToLogout` for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: + provides the method for a login operation and for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: -* A user signing in (`InteractionType.SignIn`) with the current URI for the return URL. -* A user signing out (`InteractionType.SignOut`) with the return URL. +* A user signing in () with the current URI for the return URL. +* A user signing out () with the return URL. The following authentication scenarios are covered in the article: * Customize the login process * Logout with a custom return URL * Customize options before obtaining a token interactively -* Customize options when using an `IAccessTokenProvider` +* Customize options when using an * Obtain the login path from authentication options ## `Authentication` component diff --git a/aspnetcore/client-side/dotnet-interop.md b/aspnetcore/client-side/dotnet-interop.md index caf737801412..f868b6aa202d 100644 --- a/aspnetcore/client-side/dotnet-interop.md +++ b/aspnetcore/client-side/dotnet-interop.md @@ -156,7 +156,7 @@ document.getElementById("out").innerHTML = text; await dotnet.run(); ``` -To import a JS function so it can be called from C#, use the new `JSImportAttribute` on a matching method signature. The first parameter to the `JSImportAttribute` is the name of the JS function to import and the second parameter is the name of the module. +To import a JS function so it can be called from C#, use the new on a matching method signature. The first parameter to the is the name of the JS function to import and the second parameter is the name of the module. In the following example, the `window.location.href` function is called from the `main.js` module when `GetHRef` method is called: @@ -165,7 +165,7 @@ In the following example, the `window.location.href` function is called from the internal static partial string GetHRef(); ``` -In the imported method signature, you can use .NET types for parameters and return values, which are marshalled automatically by the runtime. Use `JSMarshalAsAttribute` to control how the imported method parameters are marshalled. For example, you might choose to marshal a `long` as or . You can pass / callbacks as parameters, which are marshalled as callable JS functions. You can pass both JS and managed object references, and they are marshaled as proxy objects, keeping the object alive across the boundary until the proxy is garbage collected. You can also import and export asynchronous methods with a result, which are marshaled as [JS promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). Most of the marshalled types work in both directions, as parameters and as return values, on both imported and exported methods. +In the imported method signature, you can use .NET types for parameters and return values, which are marshalled automatically by the runtime. Use to control how the imported method parameters are marshalled. For example, you might choose to marshal a `long` as or . You can pass / callbacks as parameters, which are marshalled as callable JS functions. You can pass both JS and managed object references, and they are marshaled as proxy objects, keeping the object alive across the boundary until the proxy is garbage collected. You can also import and export asynchronous methods with a result, which are marshaled as [JS promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). Most of the marshalled types work in both directions, as parameters and as return values, on both imported and exported methods. [!INCLUDE[](~/blazor/includes/js-interop/7.0/import-export-interop-mappings.md)] @@ -176,7 +176,7 @@ Functions accessible on the global namespace can be imported by using the [`glob internal static partial void Log([JSMarshalAs] string message); ``` -To export a .NET method so it can be called from JS, use the `JSExportAttribute`. +To export a .NET method so it can be called from JS, use the . In the following example, the `Greeting` method returns a string that includes the result of calling the `GetHRef` method. As shown earlier, the `GetHref` C# method calls into JS for the `window.location.href` function from the `main.js` module. `window.location.href` returns the current page address (URL): @@ -263,6 +263,9 @@ In the preceding example, the `{TARGET FRAMEWORK}` placeholder is the target fra ## Additional resources +* API documentation + * [`[JSImport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSImportAttribute) + * [`[JSExport]` attribute](xref:System.Runtime.InteropServices.JavaScript.JSExportAttribute) * * In the `dotnet/runtime` GitHub repository: * [.NET WebAssembly runtime](https://github.com/dotnet/runtime/blob/main/src/mono/wasm/runtime/) From 8e5906d9b1c5c56ecbd1d1e05895173044d5927b Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 10 Nov 2022 10:24:18 -0600 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/security/webassembly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/security/webassembly/index.md b/aspnetcore/blazor/security/webassembly/index.md index 460013f484c1..fd333cf0d583 100644 --- a/aspnetcore/blazor/security/webassembly/index.md +++ b/aspnetcore/blazor/security/webassembly/index.md @@ -67,7 +67,7 @@ The state stored by the History API provides the following benefits for remote a represents the request to the identity provider for logging in or provisioning an access token. - provides the method for a login operation and for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: + provides the method for a login operation and for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: * A user signing in () with the current URI for the return URL. * A user signing out () with the return URL. From 825186769f89b1ee9cea96909925b4dfb5ec7a2d Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 10 Nov 2022 10:27:45 -0600 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/security/webassembly/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/security/webassembly/index.md b/aspnetcore/blazor/security/webassembly/index.md index fd333cf0d583..3af210e20c74 100644 --- a/aspnetcore/blazor/security/webassembly/index.md +++ b/aspnetcore/blazor/security/webassembly/index.md @@ -67,7 +67,7 @@ The state stored by the History API provides the following benefits for remote a represents the request to the identity provider for logging in or provisioning an access token. - provides the method for a login operation and for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: + provides the method for a login operation and for a logout operation. The methods call , setting the history entry state with a passed `InteractiveRequestOptions` or a new `InteractiveRequestOptions` instance created by the method for: * A user signing in () with the current URI for the return URL. * A user signing out () with the return URL.