From 750547e4ca2e7e4405f88da6ea1b674c534e8215 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 15 Aug 2019 13:51:45 -0500 Subject: [PATCH] Additional Blazor ElementReference patches (#13853) --- aspnetcore/blazor/components.md | 3 ++- aspnetcore/blazor/javascript-interop.md | 7 ++++--- .../javascript-interop/samples_snapshot/component1.razor | 2 ++ .../javascript-interop/samples_snapshot/component2.razor | 2 ++ aspnetcore/includes/blazor-prerendering.md | 8 ++++---- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/aspnetcore/blazor/components.md b/aspnetcore/blazor/components.md index bebd7d9907..e9a6170b9a 100644 --- a/aspnetcore/blazor/components.md +++ b/aspnetcore/blazor/components.md @@ -517,9 +517,10 @@ Component references provide a way to reference a component instance so that you * Add an [@ref](xref:mvc/views/razor#ref) attribute to the child component. * Define a field with the same type as the child component. +* Provide the `@ref:suppressField` parameter, which suppresses backing field generation. For more information, see [Removing automatic backing field support for @ref in 3.0.0-preview9](https://github.com/aspnet/Announcements/issues/381). ```cshtml - + @code { private MyLoginDialog loginDialog; diff --git a/aspnetcore/blazor/javascript-interop.md b/aspnetcore/blazor/javascript-interop.md index 755e518752..d135083eb0 100644 --- a/aspnetcore/blazor/javascript-interop.md +++ b/aspnetcore/blazor/javascript-interop.md @@ -119,11 +119,12 @@ Capture references to HTML elements in a component using the following approach: * Add an `@ref` attribute to the HTML element. * Define a field of type `ElementReference` whose name matches the value of the `@ref` attribute. +* Provide the `@ref:suppressField` parameter, which suppresses backing field generation. For more information, see [Removing automatic backing field support for @ref in 3.0.0-preview9](https://github.com/aspnet/Announcements/issues/381). The following example shows capturing a reference to the `username` `` element: ```cshtml - + @code { ElementReference username; @@ -152,7 +153,7 @@ Use `IJSRuntime.InvokeAsync` and call `exampleJsFunctions.focusElement` with ```cshtml @inject IJSRuntime JSRuntime - + @code { @@ -182,7 +183,7 @@ The method is called directly on the object. The following example assumes that @inject IJSRuntime JSRuntime @using JsInteropClasses - + @code { diff --git a/aspnetcore/blazor/javascript-interop/samples_snapshot/component1.razor b/aspnetcore/blazor/javascript-interop/samples_snapshot/component1.razor index da6d8976dd..00c3836404 100644 --- a/aspnetcore/blazor/javascript-interop/samples_snapshot/component1.razor +++ b/aspnetcore/blazor/javascript-interop/samples_snapshot/component1.razor @@ -4,6 +4,8 @@ @code { + private ElementReference username; + public async void SetFocus() { await JSRuntime.InvokeAsync( diff --git a/aspnetcore/blazor/javascript-interop/samples_snapshot/component2.razor b/aspnetcore/blazor/javascript-interop/samples_snapshot/component2.razor index 3dae41d495..5d93827c5f 100644 --- a/aspnetcore/blazor/javascript-interop/samples_snapshot/component2.razor +++ b/aspnetcore/blazor/javascript-interop/samples_snapshot/component2.razor @@ -5,6 +5,8 @@ @code { + private ElementReference username; + public async Task SetFocus() { await username.Focus(JSRuntime); diff --git a/aspnetcore/includes/blazor-prerendering.md b/aspnetcore/includes/blazor-prerendering.md index 06b6a451c1..f44411e158 100644 --- a/aspnetcore/includes/blazor-prerendering.md +++ b/aspnetcore/includes/blazor-prerendering.md @@ -6,10 +6,10 @@ To delay JavaScript interop calls until after the connection with the browser is @using Microsoft.JSInterop @inject IJSRuntime JSRuntime - + @code { - private ElementRef myInput; + private ElementReference myInput; protected override void OnAfterRender() { @@ -39,12 +39,12 @@ Where `JSRuntime.InvokeAsync` is called, `ElementRef` is only used in `OnAfterRe

Set value via JS interop call: - +

@code { private string infoFromJs; - private ElementRef myElem; + private ElementReference myElem; protected override async Task OnAfterRenderAsync() {