Blazor example update (#13129)

pull/13135/head
Luke Latham 2019-07-05 12:15:40 -05:00 committed by GitHub
parent ecfd55ad8c
commit 4224dfa662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 21 deletions

View File

@ -5,7 +5,7 @@ description: Learn how to create and use Razor components, including how to bind
monikerRange: '>= aspnetcore-3.0'
ms.author: riande
ms.custom: mvc
ms.date: 07/01/2019
ms.date: 07/05/2019
uid: blazor/components
---
# Create and use ASP.NET Core Razor components
@ -955,34 +955,34 @@ The descendent `Tab` components capture the containing `TabSet` as a cascading p
Render fragments can be defined using Razor template syntax. Razor templates are a way to define a UI snippet and assume the following format:
```cshtml
@<tag>...</tag>
@<{HTML tag}>...</{HTML tag}>
```
The following example illustrates how to specify `RenderFragment` and `RenderFragment<T>` values.
`RazorTemplates` component:
The following example illustrates how to specify `RenderFragment` and `RenderFragment<T>` values and render templates directly in a component. Render fragments can also be passed as arguments to [templated components](#templated-components).
```cshtml
@{
RenderFragment template = @<p>The time is @DateTime.Now.</p>;
RenderFragment<Pet> petTemplate = (pet) => @<p>Your pet's name is @pet.Name.</p>;
@timeTemplate
@petTemplate(new Pet { Name = "Rex" })
@code {
private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
private RenderFragment<Pet> petTemplate =
(pet) => @<p>Your pet's name is @pet.Name.</p>;
private class Pet
{
public string Name { get; set; }
}
}
```
Render fragments defined using Razor templates can be passed as arguments to templated components or rendered directly. For example, the previous templates are directly rendered with the following Razor markup:
Rendered output of the preceding code:
```cshtml
@template
```html
<p>The time is 10/04/2018 01:26:52.</p>
@petTemplate(new Pet { Name = "Rex" })
```
Rendered output:
```
The time is 10/04/2018 01:26:52.
Your pet's name is Rex.
<p>Your pet's name is Rex.</p>
```
## Manual RenderTreeBuilder logic
@ -1002,7 +1002,7 @@ Consider the following `PetDetails` component, which can be manually built into
@code
{
[Parameter]
string PetDetailsQuote { get; set; }
private string PetDetailsQuote { get; set; }
}
```