Unverified Commit 26876c5e authored by Toi Wright's avatar Toi Wright Committed by GitHub
Browse files

Update 08-templated-components.md (#255)

parent 57243352
......@@ -40,8 +40,8 @@ It looks like:
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.3" />
</ItemGroup>
</Project>
......@@ -49,7 +49,7 @@ It looks like:
There are a few things here worth understanding.
Firstly, the package targets `netstandard2.1`. Blazor Server uses `netcoreapp3.1` and Blazor WebAssembly uses `netstandard2.1` - so targeting `netstandard2.0` means that it will work for either scenario.
Firstly, the package targets `netstandard2.0`. Blazor Server uses `netcoreapp3.1` and Blazor WebAssembly uses `netstandard2.1` - so targeting `netstandard2.0` means that it will work for either scenario.
Additional, the `<RazorLangVersion>3.0</RazorLangVersion>` sets the Razor language version. Version 3 is needed to support components and the `.razor` file extension.
......@@ -116,7 +116,7 @@ Next, to give this dialog some conditional behavior, let's add a parameter of ty
}
```
Do build and make sure that everything compiles at this stage. Next we'll get down to using this new component.
Build the solution and make sure that everything compiles at this stage. Next we'll get down to using this new component.
## Adding a reference to the templated library
......@@ -174,9 +174,9 @@ We'll use this new templated component from `Index.razor`. Open `Index.razor` an
@if (OrderState.ShowingConfigureDialog)
{
<ConfigurePizzaDialog
Pizza="@OrderState.ConfiguringPizza"
OnConfirm="@OrderState.ConfirmConfigurePizzaDialog"
OnCancel="@OrderState.CancelConfigurePizzaDialog" />
Pizza="OrderState.ConfiguringPizza"
OnConfirm="OrderState.ConfirmConfigurePizzaDialog"
OnCancel="OrderState.CancelConfigurePizzaDialog" />
}
```
......@@ -213,7 +213,7 @@ We can solve async loading by accepting a delegate of type `Func<Task<List<?>>>`
Making a generic-typed component works similarly to other generic types in C#, in fact `@typeparam` is just a convenient Razor syntax for a generic .NET type.
note: We don't yet have support for type-parameter-constraints. This is something we're looking to add in the future.
> Note: We don't yet have support for type-parameter-constraints. This is something we're looking to add in the future.
Now that we've defined a generic type parameter we can use it in a parameter declaration. Let's add a parameter to accept a delegate we can use to load data, and then load the data in a similar fashion to our other components.
......@@ -253,7 +253,7 @@ else
}
```
Now, these are our three states of the dialog, and we'd like accept a content parameter for each one so the caller can plug in the desired content. We do this by defining three `RenderFragment` parameters. Since we have multiple we'll just give them their own descriptive names instead of calling them `ChildContent`. However, the content for showing an item needs to take a parameter. We can do this by using `RenderFragment<T>`.
Now, these are our three states of the dialog, and we'd like to accept a content parameter for each one so the caller can plug in the desired content. We do this by defining three `RenderFragment` parameters. Since we have multiple `RenderFragment` parameters we'll just give each one their own descriptive names instead of calling them `ChildContent`. The content for showing an item needs to take a parameter. We can do this by using `RenderFragment<T>`.
Here's an example of the three parameters to add:
......@@ -381,7 +381,7 @@ First, we need to create a delegate that we can pass to the `TemplatedList` that
This matches the signature expected by the `Loader` parameter of `TemplatedList`, it's a `Func<Task<List<?>>>` where the **?** is replaced with `OrderWithStatus` so we are on the right track.
If you use the `TemplatedList` component now like so:
You can use the `TemplatedList` component now like so:
```html
<div class="main">
......@@ -489,10 +489,10 @@ To prove that the list is really working correctly we can try the following:
## Summary
So what have we seen in this section?
So what have we seen in this session?
1. It's possible to write components that accept *content* as a parameter - even multiple content parameters
2. Templated components can be used to abstract things, like showing a dialog, or async loading of data
3. Components can be generic types which makes them more reusable
3. Components can be generic types, which makes them more reusable
Next up - [Progressive web app](09-progressive-web-app.md)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment