diff --git a/aspnetcore/blazor/components.md b/aspnetcore/blazor/components.md index 07f1630d1f3e..fb9baafc7976 100644 --- a/aspnetcore/blazor/components.md +++ b/aspnetcore/blazor/components.md @@ -1,5 +1,5 @@ --- -title: Create and use Razor components +title: Create and use ASP.NET Core Razor components author: guardrex description: Learn how to create and use Razor components, including how to bind to data, handle events, and manage component life cycles. monikerRange: '>= aspnetcore-3.0' @@ -8,7 +8,7 @@ ms.custom: mvc ms.date: 06/16/2019 uid: blazor/components --- -# Create and use Razor components +# Create and use ASP.NET Core Razor components By [Luke Latham](https://github.com/guardrex) and [Daniel Roth](https://github.com/danroth27) @@ -547,6 +547,18 @@ protected override void OnAfterRender() } ``` +### Handle incomplete async actions at render + +Asynchronous actions performed in lifecycle events may not have completed before the component is rendered. Objects might be `null` or incompletely populated with data while the lifecycle method is executing. Provide rendering logic to confirm that objects are initialized. Render placeholder UI elements (for example, a loading message) while objects are `null`. + +In the Fetch Data component of the Blazor templates, `OnInitAsync` is overridden to asychronously receive forecast data (`forecasts`). When `forecasts` is `null`, a loading message is displayed to the user. After the `Task` returned by `OnInitAsync` completes, the component is rerendered with the updated state. + +*Pages/FetchData.razor*: + +[!code-cshtml[](components/samples_snapshot/3.x/FetchData.razor?highlight=9)] + +### Execute code before parameters are set + `SetParameters` can be overridden to execute code before parameters are set: ```csharp @@ -560,6 +572,8 @@ public override void SetParameters(ParameterCollection parameters) If `base.SetParameters` isn't invoked, the custom code can interpret the incoming parameters value in any way required. For example, the incoming parameters aren't required to be assigned to the properties on the class. +### Suppress refreshing of the UI + `ShouldRender` can be overridden to suppress refreshing of the UI. If the implementation returns `true`, the UI is refreshed. Even if `ShouldRender` is overridden, the component is always initially rendered. ```csharp diff --git a/aspnetcore/blazor/components/samples_snapshot/3.x/FetchData.razor b/aspnetcore/blazor/components/samples_snapshot/3.x/FetchData.razor new file mode 100644 index 000000000000..bf7648023df2 --- /dev/null +++ b/aspnetcore/blazor/components/samples_snapshot/3.x/FetchData.razor @@ -0,0 +1,27 @@ +@page "/fetchdata" +@using MyBlazorApp.Data +@inject WeatherForecastService ForecastService + +
This component demonstrates fetching data from a service.
+ +@if (forecasts == null) +{ +Loading...
+} +else +{ +