From 9a43612f01965d0b2eaf88dc946971acd45c4f2e Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 07:07:42 -0500 Subject: [PATCH 1/3] Render components from JS --- aspnetcore/blazor/components/index.md | 28 +++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index f9b1530c6e43..23968a6b95e7 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1021,6 +1021,34 @@ For more information, see the following articles: * * +## Render Razor components from JavaScript + +Razor components can be dynamically-rendered from JavaScript (JS) for existing JS apps. + +To render a Razor component from JS, first register the component as a root component for JS rendering and assign the component an identifier: + +* In a Blazor Server app, modify the call to in `Program.cs`: + + ```csharp + builder.Services.AddServerSideBlazor(options => + { + options.RootComponents.RegisterForJavaScript(identifier: "counter"); + }); + ``` + +* Blazor WebAssembly in `Program.cs`: + + ```csharp + builder.RootComponents.RegisterForJavaScript(identifier: "counter"); + ``` + +Load Blazor into your JS app (`blazor.server.js` or `blazor.webassembly.js`). Render the component from JS into a container element using the registered identifier, passing component parameters as needed: + +```javascript +let containerElement = document.getElementById('my-counter'); +await Blazor.rootComponents.add(containerElement, 'counter', { incrementAmount: 10 }); +``` + ::: moniker-end ::: moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" From d07cec9c738d15db103ca282426fac02a34e2de9 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 07:11:00 -0500 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/components/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index 23968a6b95e7..ba6b38675691 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1025,7 +1025,7 @@ For more information, see the following articles: Razor components can be dynamically-rendered from JavaScript (JS) for existing JS apps. -To render a Razor component from JS, first register the component as a root component for JS rendering and assign the component an identifier: +To render a Razor component from JS, register the component as a root component for JS rendering and assign the component an identifier: * In a Blazor Server app, modify the call to in `Program.cs`: @@ -1036,7 +1036,7 @@ To render a Razor component from JS, first register the component as a root comp }); ``` -* Blazor WebAssembly in `Program.cs`: +* In Blazor WebAssembly app, call `RegisterForJavaScript` on in `Program.cs`: ```csharp builder.RootComponents.RegisterForJavaScript(identifier: "counter"); From 0a07248ff146ce93302ef6e0c0fb2888c5332705 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 07:11:57 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/components/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index ba6b38675691..a6df8067e7ff 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1036,7 +1036,7 @@ To render a Razor component from JS, register the component as a root component }); ``` -* In Blazor WebAssembly app, call `RegisterForJavaScript` on in `Program.cs`: +* In a Blazor WebAssembly app, call `RegisterForJavaScript` on in `Program.cs`: ```csharp builder.RootComponents.RegisterForJavaScript(identifier: "counter");