How to get web browser's height in Blazor Server without JavaScript usage?

Question

I wonder whether or not ASP.NET Core SDK for Blazor Server has a method or property that returns height of web browser unless JavaScript is used. To illustrate:

@code
{
    uint GetBrowserHeight()
    {
        // assume that Browser is a class in .NET, and Height is its property.
        return Browser.Height;
    }
}

Answer 1

only available from javascript.

window.getHeight = () => window.screen.height;
window.getWidth = () => window.screen.width;

 var height = await JS.InvokeAsync<int>("getHeight");
 var width = await JS.InvokeAsync<int>("getWidth");

note: you would need to subscribe to the browser resize event to catch a resize.

Answer 2

Hi @MOON ,

Thanks for reaching out.

Blazor Server does not expose a built-in .NET API to read the browser’s height or width - because the server-side code cannot directly access the client’s window or DOM.

You must use JavaScript interop. For example:

window.getHeight = () => window.innerHeight;

And in your Blazor code:

var height = await JS.InvokeAsync<int>("getHeight");

For more details, see the official docs on calling JavaScript from .NET in Blazor: Call JavaScript functions from .NET methods in ASP.NET Core Blazor

If you want to detect changes, you can hook into window.onresize in JavaScript and notify your .NET code via interop.

Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well.