Event Handling for different screen sizes in Blazor Wasm

0
votes

Blazor WASM Client Application requires to have certain hover events of menu items on a web browser screen and click events on tablet size screens. In order to receive the browser-screen width, js interop and an additional Browser service are used (similar to the approach in https://blazor.tips/blazor-how-to-ready-window-dimensions/) to get the width and apply conditions on event handling. But if this Blazor App is initially loaded on a web browser (say >1000px screen having hover events) and when resized to a tab width (say <992px screen having click events for the same menus), the page needs a refresh to re-render the widths after resizing into the razor component.

Is there any alternative to read the dynamic changing of screen width into the component in the Blazor App?

Note: There is a way to detect the screen sizes using BlazorPro. BlazorSize package https://github.com/EdCharbeneau/BlazorSize but unfortunately, it is not working for me

1
javascriptblazor-webassemblyblazor-jsinterop
<li class="nav-item dropdown" @onmouseover="() => DropdownHover()" @onmouseout="RemoveDropdown" @onclick="() => MenuClick()"> this is an example HTML code in the navigation component that has to deal with the events based on the screen size. - Keerthi
You can call Blazor methods from Javascript. So read your changed dimensions in JS, and send it through a method call. - Bennyboy1973
Thank you @Bennyboy1973, but is there any way to not call the javascript method from blazor for every event happening on this page. Because there are 7-8 buttons that have hover events for large screens and click events for small screens and I'm trying to code in an efficient manner. - Keerthi
You don't need to call Javascript from Blazor. You need to have a window.resize event handler in javascript that Invokes a Blazor method. - Bennyboy1973
Alternatively, you could fill a hidden input field and trigger its onchange event inside the window.resize handler. Then you could handle the onchange event in Blazor as normal without using Interop calls at all. - Bennyboy1973

1 Answers

0
votes

One way to avoid this problem is to make a synchronous js call (by using IJSInProcessRuntime) in the button click events from Blazor (usually JSRuntime is an async approach) so that there won't be any waiting time on the screen to see the result.

check on how to invoke a JavaScript function synchronously in the following links https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1#invoke-net-methods-from-javascript-functions

https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0

https://www.meziantou.net/optimizing-js-interop-in-a-blazor-webassembly-application.htm