In this session we'll jump past hello world and focus on Blazor's Razor Component architecture. We'll learn component design concepts and best practices including: event handling, attribute splatting, state management, and component libraries. Through example we'll understand the tools and techniques from one of the top Blazor community contributors and Microsoft MVP, Ed Charbeneau.

1. Writing
JavaScript
for C#'s
Blazor
#CODEPALOUSA

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

3. Blazor Component Architecture

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