{"id":45,"date":"2019-10-02T22:09:18","date_gmt":"2019-10-02T12:09:18","guid":{"rendered":"http:\/\/blazortips.azurewebsites.net\/?p=45"},"modified":"2020-12-20T19:02:20","modified_gmt":"2020-12-20T09:02:20","slug":"blazor-how-to-ready-window-dimensions","status":"publish","type":"post","link":"https:\/\/blazortips.azurewebsites.net\/blazor-how-to-ready-window-dimensions\/","title":{"rendered":"How to read Window Dimensions in Blazor?"},"content":{"rendered":"\n<p> Blazor.tips  How to read the browser window dimensions <\/p>\n\n\n\n<p>window.innerHeight and window.innerWidth<\/p>\n\n\n\n<p>first create a service class to read the dimensions from javascript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    using Microsoft.JSInterop;\n    using System.Threading.Tasks;\n\n    public class BrowserService\n    {\n        private readonly IJSRuntime _js;\n\n        public BrowserService(IJSRuntime js)\n        {\n            _js = js;\n        }\n\n        public async Task&lt;BrowserDimension&gt; GetDimensions()\n        {\n            return await _js.InvokeAsync&lt;BrowserDimension&gt;(\"getDimensions\");\n        }\n\n    }\n\n    public class BrowserDimension\n    {\n        public int Width { get; set; }\n        public int Height { get; set; }\n    }<\/code><\/pre>\n\n\n\n<p>register the service with the DI on startup.cs<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public void ConfigureServices(IServiceCollection services)\n{\n    services.AddRazorPages();\n    services.AddServerSideBlazor();\n    services.AddScoped&lt;BrowserService&gt;(); \/\/ scoped service\n}<\/code><\/pre>\n\n\n\n<p>add the javascript codes to read the window dimensions you can add them to the _Host.cshtml file directly or add them to a js file <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;script type=\"text\/javascript\"&gt;\n        window.getDimensions = function() {\n            return {\n                    width: window.innerWidth,\n                    height: window.innerHeight\n                };\n        };\n    &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>add new razor file to display the dimensions<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@page \"\/dimensions\"\n\n@using BlazorApp.Service\n@inject BrowserService Service\n\n&lt;h1&gt;Window Dimensions&lt;\/h1&gt;\n\n&lt;p&gt;Window Height: @Height&lt;\/p&gt;\n&lt;p&gt;Window Width: @Width&lt;\/p&gt;\n\n&lt;button @onclick=\"GetDimensions\"&gt;Get Dimensions&lt;\/button&gt;\n\n@code {\n\n    public int Height { get; set; }\n    public int Width { get; set; }\n\n    async Task GetDimensions() {\n        var dimension = await Service.GetDimensions();\n        Height = dimension.Height;\n        Width = dimension.Width;\n    }\n\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"859\" height=\"496\" src=\"\/wp-content\/uploads\/2019\/10\/image.png\" alt=\"\" class=\"wp-image-46\" srcset=\"\/wp-content\/uploads\/2019\/10\/image.png 859w, \/wp-content\/uploads\/2019\/10\/image-300x173.png 300w, \/wp-content\/uploads\/2019\/10\/image-768x443.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/figure>\n\n\n\n<p>Blazor.tips <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blazor.tips How to read the browser window dimensions window.innerHeight and window.innerWidth first create a service class to read the dimensions from javascript register the service with the DI on startup.cs add the javascript codes to read the window dimensions you can add them to the _Host.cshtml file directly or add them to a js file [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/posts\/45"}],"collection":[{"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":4,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/posts\/45\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blazortips.azurewebsites.net\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}