3. .NET Conf Latinoamérica 2021
Nueva plantilla para Blazor
• Implicit using por defecto
• Top-level statements por defecto
• Bootstrap 5.1 sin dependencia de javascript
• CSS isolated por defecto
6. .NET Conf Latinoamérica 2021
Error boundaries
Manejo de errores no controlados o excepciones dentro de los
componentes
<div class="main">
<div class="content px-4">
<ErrorBoundary>
@Body
</ErrorBoundary>
</div>
</div>
7. .NET Conf Latinoamérica 2021
PageTitle y HeadContent
Definición de títulos para páginas y Head Elements
<PageTitle>Index</PageTitle>
<HeadContent>
<meta name="description" content=".NET CONF"/>
</HeadContent>
8. .NET Conf Latinoamérica 2021
Required parameter - parámetro requerido
[Parameter]
[EditorRequired]
public string Title { get; set; }
[Parameter, EditorRequired]
public string Title { get; set; }
10. .NET Conf Latinoamérica 2021
Render components from JavaScript
Podemos invocar componentes desde Javascript y renderizarlos
en cualquier momento
let containerElement = document.getElementById('my-counter');
await Blazor.rootComponents.add(containerElement, 'counter', {
incrementAmount: 10 });
12. .NET Conf Latinoamérica 2021
Dynamically-rendered Components
Podemos cargar componentes de manera dinámica indicando el
tipo
<DynamicComponent Type="@componentType" Parameters="@parameters" />
@code {
private Type componentType = ...;
private IDictionary<string, object> parameters = ...;
}
13. .NET Conf Latinoamérica 2021
Focus an element on navigation
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
14. .NET Conf Latinoamérica 2021
Generate Angular and React components
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.RegisterForAngular<MyComponent>(); // Register for Angular
builder.RootComponents.RegisterForReact<MyComponent>(); // Register for React
Funcionalidad experimental para generar componentes
específicos para React.js y Angular
samples/samples/aspnetcore/blazor/JSComponentGeneration at main · aspnet/samples (github.com)