I have a custom component and when it's rendered in the browser, I need to measure its size (in JavaScript) and call back to Blazor.
How do I register JavaScript to invoke after rendering of particular component is done?
1
-
learn.microsoft.com/en-us/aspnet/core/blazor/…agua from mars– agua from mars2020-06-19 08:00:55 +00:00Commented Jun 19, 2020 at 8:00
Add a comment
|
1 Answer
- Include a script in your wwwroot.
- Reference it in index.html or _Host.cshtml file
- In your component add
@inject IJSRuntime JSRuntime - Add a
@refto the element you wish to measure<div @ref=MeasureMe> - In your
@codedeclare a fieldElementReference MeasureMe - Override OnAfterRenderAsync and do
var whatever = JSRuntime.InvokeAsync<YourResultType>("yourJSFunctionName", MeasureMe)
Note: If you have server side prerendering enabled, do not use JSRuntime for the first time until after OnAfterRenderAsync has been executed with firstRender == true.
Also note: Components do not re-render when the browser is resized.
I have a section on JSInterop on Blazor University.
