From 9bf98943ba57ff4b3ff782b602378a4fafadbab3 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 9 Aug 2021 06:37:54 -0500
Subject: [PATCH 1/5] Blazor DynamicComponent coverage
---
.../blazor/components/built-in-components.md | 1 +
.../blazor/components/dynamiccomponent.md | 257 ++++++++++++++++++
aspnetcore/toc.yml | 2 +
3 files changed, 260 insertions(+)
create mode 100644 aspnetcore/blazor/components/dynamiccomponent.md
diff --git a/aspnetcore/blazor/components/built-in-components.md b/aspnetcore/blazor/components/built-in-components.md
index 68a50f693e3e..b247fa82366c 100644
--- a/aspnetcore/blazor/components/built-in-components.md
+++ b/aspnetcore/blazor/components/built-in-components.md
@@ -19,6 +19,7 @@ The following built-in Razor components are provided by the Blazor framework:
* [`Authentication`](xref:blazor/security/webassembly/index#authentication-component)
* [`AuthorizeView`](xref:blazor/security/index#authorizeview-component)
* [`CascadingValue`](xref:blazor/components/cascading-values-and-parameters#cascadingvalue-component)
+* [`DynamicComponent`](xref:blazor/components/dynamiccomponent)
* [`ErrorBoundary`](xref:blazor/fundamentals/handle-errors#error-boundaries)
* [`FocusOnNavigate`](xref:blazor/fundamentals/routing#focus-an-element-on-navigation)
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md
new file mode 100644
index 000000000000..ddb2a3507eed
--- /dev/null
+++ b/aspnetcore/blazor/components/dynamiccomponent.md
@@ -0,0 +1,257 @@
+---
+title: Dynamically-rendered ASP.NET Core Razor components
+author: guardrex
+description: Learn how to use dynamically-rendered Razor components in Blazor apps.
+monikerRange: '>= aspnetcore-6.0'
+ms.author: riande
+ms.custom: mvc
+ms.date: 08/09/2021
+no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
+uid: blazor/components/dynamiccomponent
+---
+# Dynamically-rendered ASP.NET Core Razor components
+
+By [Dave Brock](https://twitter.com/daveabrock)
+
+Use the built-in `DynamicComponent` component to render components by type.
+
+A `DynamicComponent` is useful for rendering components without having to iterate through possible types or having to use conditional logic to render a specific component. For example, `DynamicComponent` can render a component based on a user selection from a dropdown list.
+
+In the following example:
+
+* `componentType` specifies the type.
+* `parameterDictionary` specifies component parameters to pass to the `componentType` component.
+
+```razor
+
+@code {
+ private Type componentType = ...;
+ private IDictionary parameterDictionary = ...;
+}
+```
+
+For more information on passing parameter values, see the [Pass parameters](#pass-parameters) section later in this article.
+
+## Example
+
+In the following example, a [Blazor form](xref:blazor/forms-validation) renders a component based on the user's selection from a dropdown list of four possible values.
+
+| User selection | Razor component to render… |
+| -------------------- | ----------------------------------- |
+| Rocket Lab® | `Shared/RocketLab.razor` |
+| SpaceX® | `Shared/SpaceX.razor` |
+| ULA® | `Shared/UnitedLaunchAlliance.razor` |
+| Virgin Galactic® | `Shared/VirginGalactic.razor` |
+
+`Shared/RocketLab.razor`:
+
+```razor
+
+}
+@code {
+ private Type selectedType;
+ private void OnDropdownChange(ChangeEventArgs e)
+ {
+ selectedType = e.Value.ToString().Length > 0 ?
+ Type.GetType($"{APP NAMESPACE}.Shared.{e.Value}") : null;
+ }
+}
+```
+
+In the `DynamicComponentExample` component:
+
+* Component names are used as the option values using the [`nameof` operator](/dotnet/csharp/language-reference/operators/nameof), which returns component names as constant strings.
+* The `{APP NAMESPACE}` placeholder is the namespace of the app (for example, `BlazorSample`).
+* The components to render dynamically are shared components in the app's `Shared` folder:
+ * `RocketLab` (`Shared/RocketLab.razor`)
+ * `SpaceX` (`Shared/SpaceX.razor`)
+ * `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
+ * `VirginGalactic` (`Shared/VirginGalactic.razor`)
+
+## Pass parameters
+
+If dynamically-rendered components have [component parameters](xref:blazor/components/index#component-parameters), pass them into the `DynamicComponent` as an `IDictionary`. The `string` is the name of the parameter, and the `object` is the parameter's value. Logic can filter and pass in parameters to the `DynamicComponent`, depending on the type passed. Data can be passed from an API, a database, or a method, as long as it returns an `IDictionary`.
+
+The following example configures `ComponentMetadata` for dynamically-rendered components.
+
+`ComponentMetadata.cs`:
+
+```csharp
+using System;
+using System.Collections.Generic;
+public class ComponentMetadata
+{
+ public string Name { get; set; }
+ public Dictionary Parameters { get; set; }
+}
+```
+
+In the following example, only the `RocketLab` component has a parameter, which assigns a value for a window seat (`WindowSeat`) on a spaceflight.
+
+`Pages/DynamicComponentExample2.razor`:
+
+```razor
+@page "/dynamiccomponent-example-2"
+
DynamicComponent Component Example 2
+
+
+
+
+
+
+@if (selectedType is not null)
+{
+
+
+
+}
+@code {
+ private Dictionary components =
+ new()
+ {
+ {
+ "RocketLab",
+ new ComponentMetadata
+ {
+ Name = "Rocket Lab",
+ Parameters = new() { { "WindowSeat", false } }
+ }
+ },
+ {
+ "VirginGalactic",
+ new ComponentMetadata { Name = "Virgin Galactic" }
+ },
+ {
+ "UnitedLaunchAlliance",
+ new ComponentMetadata { Name = "ULA" }
+ },
+ {
+ "SpaceX",
+ new ComponentMetadata { Name = "SpaceX" }
+ }
+ };
+ private Type selectedType;
+ private bool windowSeat;
+ private bool WindowSeat
+ {
+ get { return windowSeat; }
+ set
+ {
+ windowSeat = value;
+ components[nameof(RocketLab)].Parameters["WindowSeat"] = windowSeat;
+ }
+ }
+ private void OnDropdownChange(ChangeEventArgs e)
+ {
+ selectedType = e.Value.ToString().Length > 0 ?
+ Type.GetType($"{APP NAMESPACE}.Shared.{e.Value}") : null;
+ }
+}
+```
+
+In the preceding example:
+
+* The `{APP NAMESPACE}` placeholder is the namespace of the app (for example, `BlazorSample`).
+* The components to render dynamically are shared components in the app's `Shared` folder. For examples, see the [Example](#example) section earlier in this article:
+ * `RocketLab` (`Shared/RocketLab.razor`)
+ * `SpaceX` (`Shared/SpaceX.razor`)
+ * `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
+ * `VirginGalactic` (`Shared/VirginGalactic.razor`)
+
+The `RocketLab` component (`Shared/RocketLab.razor`) includes a component parameter named `WindowSeat`:
+
+`Shared/RocketLab.razor`:
+
+```razor
+
+@code {
+ [Parameter]
+ public bool WindowSeat { get; set; }
+}
+```
+
+## Avoid catch-all parameters
+
+Avoid the use of [catch-all parameters](xref:blazor/fundamentals/routing#catch-all-route-parameters). If catch-all parameters are used, every explicit parameter on `DynamicComponent` effectively is a reserved word that you can't pass to a dynamic child. Any new parameters passed to `DynamicComponent` are a breaking change, as they start shadowing child component parameters that happen to have the same name. It's unlikely that the caller always knows a fixed set of parameter names to pass to all possible dynamic children.
+
+## Trademarks
+
+Rocket Lab is a registered trademark of [Rocket Lab USA Inc.](https://www.rocketlabusa.com/). SpaceX is a registered trademark of [Space Exploration Technologies Corp.](https://www.spacex.com/). United Launch Alliance and ULA are registered trademarks of [United Launch Alliance, LLC](https://www.ulalaunch.com/). Virgin Galactic is a registered trademark of [Galactic Enterprises, LLC](https://www.virgingalactic.com/).
diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml
index fc9999cafa4c..03c03964316b 100644
--- a/aspnetcore/toc.yml
+++ b/aspnetcore/toc.yml
@@ -368,6 +368,8 @@
uid: blazor/components/templated-components
- name: CSS isolation
uid: blazor/components/css-isolation
+ - name: Dynamically-rendered components
+ uid: blazor/components/dynamiccomponent
- name: Prerender and integrate components
uid: blazor/components/prerendering-and-integration
- name: Class libraries
From fc4c5d9408e92b0644ed05328a618169280b5068 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 9 Aug 2021 06:44:41 -0500
Subject: [PATCH 2/5] Updates
---
aspnetcore/blazor/components/control-head-content.md | 2 +-
aspnetcore/blazor/components/data-binding.md | 2 +-
aspnetcore/blazor/components/dynamiccomponent.md | 2 ++
aspnetcore/blazor/forms-validation.md | 2 +-
4 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/aspnetcore/blazor/components/control-head-content.md b/aspnetcore/blazor/components/control-head-content.md
index 2461de929ccd..3276ebcdb6a5 100644
--- a/aspnetcore/blazor/components/control-head-content.md
+++ b/aspnetcore/blazor/components/control-head-content.md
@@ -11,7 +11,7 @@ uid: blazor/components/control-head-content
---
# Control `` content in ASP.NET Core Blazor apps
-*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August, 2021. ASP.NET Core 6.0 is scheduled for release later this year.*
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.*
Razor components can modify the HTML `` element content of a page, including setting the page's title (`` element) and modifying metadata (`<meta>` elements).
diff --git a/aspnetcore/blazor/components/data-binding.md b/aspnetcore/blazor/components/data-binding.md
index e5b904dee93c..7cf02e242385 100644
--- a/aspnetcore/blazor/components/data-binding.md
+++ b/aspnetcore/blazor/components/data-binding.md
@@ -49,7 +49,7 @@ Razor attribute binding is case sensitive:
## Multiple option selection with `<input>` elements
-*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 is scheduled for release later this year.*
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.*
Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with `<input>` elements. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected elements via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type.
diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md
index ddb2a3507eed..8e7de6ae9917 100644
--- a/aspnetcore/blazor/components/dynamiccomponent.md
+++ b/aspnetcore/blazor/components/dynamiccomponent.md
@@ -13,6 +13,8 @@ uid: blazor/components/dynamiccomponent
By [Dave Brock](https://twitter.com/daveabrock)
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.*
+
Use the built-in `DynamicComponent` component to render components by type.
A `DynamicComponent` is useful for rendering components without having to iterate through possible types or having to use conditional logic to render a specific component. For example, `DynamicComponent` can render a component based on a user selection from a dropdown list.
diff --git a/aspnetcore/blazor/forms-validation.md b/aspnetcore/blazor/forms-validation.md
index 0abc112d796d..2e3acdfb1348 100644
--- a/aspnetcore/blazor/forms-validation.md
+++ b/aspnetcore/blazor/forms-validation.md
@@ -151,7 +151,7 @@ In the following example:
## Multiple option selection with the `InputSelect` component
-*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 is scheduled for release later this year.*
+*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.*
Binding supports [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) option selection with the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> component. The [`@onchange`](xref:mvc/views/razor#onevent) event provides an array of the selected options via [event arguments (`ChangeEventArgs`)](xref:blazor/components/event-handling#event-arguments). The value must be bound to an array type, and binding to an array type makes the [`multiple`](https://developer.mozilla.org/docs/Web/HTML/Attributes/multiple) attribute optional on the <xref:Microsoft.AspNetCore.Components.Forms.InputSelect%601> tag.
From 85856c9efbff2f07a4aeafdd4b2188aea4c845f7 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 9 Aug 2021 07:46:39 -0500
Subject: [PATCH 3/5] Updates
---
aspnetcore/blazor/components/dynamiccomponent.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md
index 8e7de6ae9917..1676ae96d388 100644
--- a/aspnetcore/blazor/components/dynamiccomponent.md
+++ b/aspnetcore/blazor/components/dynamiccomponent.md
@@ -1,6 +1,6 @@
---
title: Dynamically-rendered ASP.NET Core Razor components
-author: guardrex
+author: daveabrock
description: Learn how to use dynamically-rendered Razor components in Blazor apps.
monikerRange: '>= aspnetcore-6.0'
ms.author: riande
From 5666141b62de8ba18f6ce4a37d5ecc7567ab8f03 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 9 Aug 2021 09:02:16 -0500
Subject: [PATCH 4/5] Updates
---
.../blazor/components/dynamiccomponent.md | 52 +++++++++++++------
1 file changed, 37 insertions(+), 15 deletions(-)
diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md
index 1676ae96d388..a3f9de372afd 100644
--- a/aspnetcore/blazor/components/dynamiccomponent.md
+++ b/aspnetcore/blazor/components/dynamiccomponent.md
@@ -17,18 +17,19 @@ By [Dave Brock](https://twitter.com/daveabrock)
Use the built-in `DynamicComponent` component to render components by type.
-A `DynamicComponent` is useful for rendering components without having to iterate through possible types or having to use conditional logic to render a specific component. For example, `DynamicComponent` can render a component based on a user selection from a dropdown list.
+A `DynamicComponent` is useful for rendering components without iterating through possible types or using conditional logic. For example, `DynamicComponent` can render a component based on a user selection from a dropdown list.
In the following example:
* `componentType` specifies the type.
-* `parameterDictionary` specifies component parameters to pass to the `componentType` component.
+* `parameters` specifies component parameters to pass to the `componentType` component.
```razor
-<DynamicComponent Type="@componentType" Parameters="@parameterDictionary" />
+<DynamicComponent Type="@componentType" Parameters="@parameters" />
+
@code {
private Type componentType = ...;
- private IDictionary<string, object> parameterDictionary = ...;
+ private IDictionary<string, object> parameters = ...;
}
```
@@ -36,7 +37,7 @@ For more information on passing parameter values, see the [Pass parameters](#pas
## Example
-In the following example, a [Blazor form](xref:blazor/forms-validation) renders a component based on the user's selection from a dropdown list of four possible values.
+In the following example, a Razor component renders a component based on the user's selection from a dropdown list of four possible values.
| User selection | Razor component to render… |
| -------------------- | ----------------------------------- |
@@ -49,6 +50,7 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
```razor
<h2>Rocket Lab®</h2>
+
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>.
@@ -59,6 +61,7 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
```razor
<h2>SpaceX®</h2>
+
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>.
@@ -69,6 +72,7 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
```razor
<h2>United Launch Alliance®</h2>
+
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
@@ -79,6 +83,7 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
```razor
<h2>Virgin Galactic®</h2>
+
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
@@ -89,7 +94,9 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
```razor
@page "/dynamiccomponent-example-1"
+
<h1><code>DynamicComponent</code> Component Example 1</h1>
+
<p>
<label>
Select your transport:
@@ -102,14 +109,17 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
</select>
</label>
</p>
+
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="@selectedType" />
</div>
}
+
@code {
private Type selectedType;
+
private void OnDropdownChange(ChangeEventArgs e)
{
selectedType = e.Value.ToString().Length > 0 ?
@@ -118,11 +128,11 @@ In the following example, a [Blazor form](xref:blazor/forms-validation) renders
}
```
-In the `DynamicComponentExample` component:
+In the preceding example:
* Component names are used as the option values using the [`nameof` operator](/dotnet/csharp/language-reference/operators/nameof), which returns component names as constant strings.
* The `{APP NAMESPACE}` placeholder is the namespace of the app (for example, `BlazorSample`).
-* The components to render dynamically are shared components in the app's `Shared` folder:
+* The dynamically-rendered components are shared components in the app's `Shared` folder:
* `RocketLab` (`Shared/RocketLab.razor`)
* `SpaceX` (`Shared/SpaceX.razor`)
* `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
@@ -130,15 +140,16 @@ In the `DynamicComponentExample` component:
## Pass parameters
-If dynamically-rendered components have [component parameters](xref:blazor/components/index#component-parameters), pass them into the `DynamicComponent` as an `IDictionary<string, object>`. The `string` is the name of the parameter, and the `object` is the parameter's value. Logic can filter and pass in parameters to the `DynamicComponent`, depending on the type passed. Data can be passed from an API, a database, or a method, as long as it returns an `IDictionary<string, object>`.
+If dynamically-rendered components have [component parameters](xref:blazor/components/index#component-parameters), pass them into the `DynamicComponent` as an `IDictionary<string, object>`. The `string` is the name of the parameter, and the `object` is the parameter's value.
-The following example configures `ComponentMetadata` for dynamically-rendered components.
+The following example configures a component metadata object (`ComponentMetadata`) to supply parameter values to dynamically-rendered components based on the type name. The example is just one of several approaches that you can adopt. Parameter data can also be passed from an API, a database, or a method, as long as it returns an `IDictionary<string, object>`.
`ComponentMetadata.cs`:
```csharp
using System;
using System.Collections.Generic;
+
public class ComponentMetadata
{
public string Name { get; set; }
@@ -152,13 +163,16 @@ In the following example, only the `RocketLab` component has a parameter, which
```razor
@page "/dynamiccomponent-example-2"
+
<h1><code>DynamicComponent</code> Component Example 2</h1>
+
<p>
<label>
<input type="checkbox" @bind="WindowSeat" />
Window Seat (Rocket Lab only)
</label>
</p>
+
<p>
<label>
Select your transport:
@@ -171,6 +185,7 @@ In the following example, only the `RocketLab` component has a parameter, which
</select>
</label>
</p>
+
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
@@ -178,6 +193,7 @@ In the following example, only the `RocketLab` component has a parameter, which
Parameters="@components[selectedType.Name].Parameters" />
</div>
}
+
@code {
private Dictionary<string, ComponentMetadata> components =
new()
@@ -205,6 +221,7 @@ In the following example, only the `RocketLab` component has a parameter, which
};
private Type selectedType;
private bool windowSeat;
+
private bool WindowSeat
{
get { return windowSeat; }
@@ -214,6 +231,7 @@ In the following example, only the `RocketLab` component has a parameter, which
components[nameof(RocketLab)].Parameters["WindowSeat"] = windowSeat;
}
}
+
private void OnDropdownChange(ChangeEventArgs e)
{
selectedType = e.Value.ToString().Length > 0 ?
@@ -225,11 +243,12 @@ In the following example, only the `RocketLab` component has a parameter, which
In the preceding example:
* The `{APP NAMESPACE}` placeholder is the namespace of the app (for example, `BlazorSample`).
-* The components to render dynamically are shared components in the app's `Shared` folder. For examples, see the [Example](#example) section earlier in this article:
- * `RocketLab` (`Shared/RocketLab.razor`)
- * `SpaceX` (`Shared/SpaceX.razor`)
- * `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
- * `VirginGalactic` (`Shared/VirginGalactic.razor`)
+* The dynamically-rendered components are shared components in the app's `Shared` folder:
+ * Shown in this article section: `RocketLab` (`Shared/RocketLab.razor`)
+ * Components shown in the [Example](#example) section earlier in this article:
+ * `SpaceX` (`Shared/SpaceX.razor`)
+ * `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
+ * `VirginGalactic` (`Shared/VirginGalactic.razor`)
The `RocketLab` component (`Shared/RocketLab.razor`) includes a component parameter named `WindowSeat`:
@@ -237,13 +256,16 @@ The `RocketLab` component (`Shared/RocketLab.razor`) includes a component parame
```razor
<h2>Rocket Lab®</h2>
+
<p>
User selected a window seat: @WindowSeat
</p>
+
<p>
Rocket Lab is a trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>.
</p>
+
@code {
[Parameter]
public bool WindowSeat { get; set; }
@@ -256,4 +278,4 @@ Avoid the use of [catch-all parameters](xref:blazor/fundamentals/routing#catch-a
## Trademarks
-Rocket Lab is a registered trademark of [Rocket Lab USA Inc.](https://www.rocketlabusa.com/). SpaceX is a registered trademark of [Space Exploration Technologies Corp.](https://www.spacex.com/). United Launch Alliance and ULA are registered trademarks of [United Launch Alliance, LLC](https://www.ulalaunch.com/). Virgin Galactic is a registered trademark of [Galactic Enterprises, LLC](https://www.virgingalactic.com/).
+Rocket Lab is a registered trademark of [Rocket Lab USA Inc.](https://www.rocketlabusa.com/) SpaceX is a registered trademark of [Space Exploration Technologies Corp.](https://www.spacex.com/) United Launch Alliance and ULA are registered trademarks of [United Launch Alliance, LLC](https://www.ulalaunch.com/). Virgin Galactic is a registered trademark of [Galactic Enterprises, LLC](https://www.virgingalactic.com/).
From aaa2da286cf6fdaa350ba93ccbc3b1b487940889 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 9 Aug 2021 09:18:27 -0500
Subject: [PATCH 5/5] Updates
---
.../blazor/components/dynamiccomponent.md | 29 +++++++------------
1 file changed, 11 insertions(+), 18 deletions(-)
diff --git a/aspnetcore/blazor/components/dynamiccomponent.md b/aspnetcore/blazor/components/dynamiccomponent.md
index a3f9de372afd..088c9f1d7ebe 100644
--- a/aspnetcore/blazor/components/dynamiccomponent.md
+++ b/aspnetcore/blazor/components/dynamiccomponent.md
@@ -13,8 +13,6 @@ uid: blazor/components/dynamiccomponent
By [Dave Brock](https://twitter.com/daveabrock)
-*This feature applies to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.*
-
Use the built-in `DynamicComponent` component to render components by type.
A `DynamicComponent` is useful for rendering components without iterating through possible types or using conditional logic. For example, `DynamicComponent` can render a component based on a user selection from a dropdown list.
@@ -37,14 +35,14 @@ For more information on passing parameter values, see the [Pass parameters](#pas
## Example
-In the following example, a Razor component renders a component based on the user's selection from a dropdown list of four possible values.
+In the following example, a Razor component renders a component based on the user's selection from a dropdown list of four possible values.
-| User selection | Razor component to render… |
-| -------------------- | ----------------------------------- |
-| Rocket Lab® | `Shared/RocketLab.razor` |
-| SpaceX® | `Shared/SpaceX.razor` |
-| ULA® | `Shared/UnitedLaunchAlliance.razor` |
-| Virgin Galactic® | `Shared/VirginGalactic.razor` |
+| User spaceflight carrier selection | Shared Razor component to render |
+| ---------------------------------- | ----------------------------------- |
+| Rocket Lab® | `Shared/RocketLab.razor` |
+| SpaceX® | `Shared/SpaceX.razor` |
+| ULA® | `Shared/UnitedLaunchAlliance.razor` |
+| Virgin Galactic® | `Shared/VirginGalactic.razor` |
`Shared/RocketLab.razor`:
@@ -53,7 +51,7 @@ In the following example, a Razor component renders a component based on the use
<p>
Rocket Lab is a registered trademark of
- <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>.
+ <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
```
@@ -64,7 +62,7 @@ In the following example, a Razor component renders a component based on the use
<p>
SpaceX is a registered trademark of
- <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>.
+ <a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
```
@@ -132,17 +130,12 @@ In the preceding example:
* Component names are used as the option values using the [`nameof` operator](/dotnet/csharp/language-reference/operators/nameof), which returns component names as constant strings.
* The `{APP NAMESPACE}` placeholder is the namespace of the app (for example, `BlazorSample`).
-* The dynamically-rendered components are shared components in the app's `Shared` folder:
- * `RocketLab` (`Shared/RocketLab.razor`)
- * `SpaceX` (`Shared/SpaceX.razor`)
- * `UnitedLaunchAlliance` (`Shared/UnitedLaunchAlliance.razor`)
- * `VirginGalactic` (`Shared/VirginGalactic.razor`)
## Pass parameters
If dynamically-rendered components have [component parameters](xref:blazor/components/index#component-parameters), pass them into the `DynamicComponent` as an `IDictionary<string, object>`. The `string` is the name of the parameter, and the `object` is the parameter's value.
-The following example configures a component metadata object (`ComponentMetadata`) to supply parameter values to dynamically-rendered components based on the type name. The example is just one of several approaches that you can adopt. Parameter data can also be passed from an API, a database, or a method, as long as it returns an `IDictionary<string, object>`.
+The following example configures a component metadata object (`ComponentMetadata`) to supply parameter values to dynamically-rendered components based on the type name. The example is just one of several approaches that you can adopt. Parameter data can also be provided from a web API, a database, or a method. The only requirement is that the approach returns an `IDictionary<string, object>`.
`ComponentMetadata.cs`:
@@ -263,7 +256,7 @@ The `RocketLab` component (`Shared/RocketLab.razor`) includes a component parame
<p>
Rocket Lab is a trademark of
- <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>.
+ <a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {