Secrets of a Blazor Component Artisan (v2)
Download as PPTX, PDF0 likes94 views
The document is a guide for using Blazor components in C#, detailing their architecture, parameters, and event handling. Key aspects include the use of RenderFragments, attribute splatting, generic templates, and EventCallbacks for inter-component communication. It provides examples of usage and a reference to additional resources for further learning.
![[Parameter]
COMPONENT
<span>@Title<span>
[Parameter]
public string Title { get; set; }
USAGE
<Component Title=“value”/>](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-5-320.jpg)
![RenderFragment & ChildContent
COMPONENT
<div>
@ChildContent
</div>
[Parameter]
public RenderFragment ChildContent {
get; set; }
USAGE
<Component>
<p>Some Child HTML, Razor,
or Component</p>
</Component>](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-7-320.jpg)
![@attributes
COMPONENT
<div @attributes="AdditionalAttributes“>
[Parameter(CaptureUnmatchedValues = true)]
public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
USAGE
<Component class=“my-class” id=“my-id”>](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-9-320.jpg)
![RenderFragment<T> & TItem
COMPONENT
@typeparam Titem
@foreach (var item in Items)
{
@ItemTemplate(item)
}
[Parameter]
public RenderFragment<TItem> ItemTemplate { get; set; }
[Parameter]
public IReadOnlyList<TItem> Items { get; set; }
USAGE
<FooList Items=“item[]">
<ItemTemplate>
<div>
<h2>Id: @context.Id</h2>
<p>@context.Message</p>
</div>
</ItemTemplate>
</FooList>](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-11-320.jpg)
![EventCallback<T>
COMPONENT
[Parameter]
public EventCallback<object> OnDelete
{ get; set; }
void HandleDelete(TItem item) =>
OnDelete.InvokeAsync(item);
USAGE
<Component OnDelete=“MyDelete”>
Expensive - Only use EventCallback at the consumer API level of your component](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-13-320.jpg)
![EventCallback<TItem>: Scope
COMPONENT
[Parameter]
public EventCallback<TItem> OnDelete { get; set; }
USAGE
<Component OnDelete="@((LogItem e) => DeleteItem(e))" >
void DeleteItem(LogItem item) // TItem????
{
logs.LogItems.Remove(item);
}
EventCallback<T> Error cannot convert from 'method group' to 'EventCallback'](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-14-320.jpg)
![Code Behind
MARKUP
<span>@Title<span>
CODE
public partial class Foo
{
[Parameter]
public string Title { get; set; }
}
Foo.razor Foo.razor.cs](https://image.slidesharecdn.com/component-artisan-2-220411192506/85/Secrets-of-a-Blazor-Component-Artisan-v2-16-320.jpg)
Secrets of a Blazor Component Artisan (v2)
- 2. Ed Charbeneau Author: Sr. Developer Advocate Progress Software, Telerik UI for Blazor “Blazor: A Beginner's Guide” (free) Тwitter: @EdCharbeneau Тwitch: Twitch.tv/EdCharbeneau
- 4. Parameters A PUBLIC PROPERTY THAT CAN AFFECT COMPONENT RENDERING OR HANDLE EVENT DELEGATION.
- 5. [Parameter] COMPONENT <span>@Title<span> [Parameter] public string Title { get; set; } USAGE <Component Title=“value”/>
- 6. RenderFragment & ChildContent A RENDERFRAGMENT PARAMETER, BY CONVENTION DEFINES A TEMPLATE REGION
- 7. RenderFragment & ChildContent COMPONENT <div> @ChildContent </div> [Parameter] public RenderFragment ChildContent { get; set; } USAGE <Component> <p>Some Child HTML, Razor, or Component</p> </Component>
- 8. Attribute Splatting ACCEPTS LOOSE HTML ATTRIBUTES WHICH CAN BE APPLIED TO YOUR COMPONENTS RENDERED MARKUP
- 9. @attributes COMPONENT <div @attributes="AdditionalAttributes“> [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; } USAGE <Component class=“my-class” id=“my-id”>
- 10. Generic Templates A COMPONENT THAT TAKES A GENERIC ITEM <T> AND APPLIES IT TO A TEMPLATE, RENDERFRAGMENT<T>
- 11. RenderFragment<T> & TItem COMPONENT @typeparam Titem @foreach (var item in Items) { @ItemTemplate(item) } [Parameter] public RenderFragment<TItem> ItemTemplate { get; set; } [Parameter] public IReadOnlyList<TItem> Items { get; set; } USAGE <FooList Items=“item[]"> <ItemTemplate> <div> <h2>Id: @context.Id</h2> <p>@context.Message</p> </div> </ItemTemplate> </FooList>
- 12. EventCallback<T > AN EVENT DELEGATE FOR BLAZOR THAT TRIGGERS A COMPONENT RE- RENDER
- 13. EventCallback<T> COMPONENT [Parameter] public EventCallback<object> OnDelete { get; set; } void HandleDelete(TItem item) => OnDelete.InvokeAsync(item); USAGE <Component OnDelete=“MyDelete”> Expensive - Only use EventCallback at the consumer API level of your component
- 14. EventCallback<TItem>: Scope COMPONENT [Parameter] public EventCallback<TItem> OnDelete { get; set; } USAGE <Component OnDelete="@((LogItem e) => DeleteItem(e))" > void DeleteItem(LogItem item) // TItem???? { logs.LogItems.Remove(item); } EventCallback<T> Error cannot convert from 'method group' to 'EventCallback'
- 15. Code Behind THE TECHNIQUE OF USING A SEPARATE FILE FOR MARKUP AND LOGIC
- 16. Code Behind MARKUP <span>@Title<span> CODE public partial class Foo { [Parameter] public string Title { get; set; } } Foo.razor Foo.razor.cs
- 17. Questions #CodePalousa Resources 1. EdCharbeneau.com • Free Ebook & examples • GitHub • Twitter • Twitch 2. Blogs.Telerik.com