如何获取blazor中的窗口宽度

Question

我正在尝试获取响应式内容的窗口宽度。谢谢！

我已经尝试过 @code{ public WindowState State { get; set; } = WindowState.Default;}

`@code{private Window myWindow = ?}`

Answer 1

检查此链接以获取教程 https://blazor.tips/blazor-how-to-ready-window-dimensions/

基本上你需要注册 IJSRuntime 来调用 JSgetDimensions()函数

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class BrowserService
{
    private readonly IJSRuntime _js;

    public BrowserService(IJSRuntime js)
    {
        _js = js;
    }

    public async Task<BrowserDimension> GetDimensions()
    {
        return await _js.InvokeAsync<BrowserDimension>("getDimensions");
    }

}

public class BrowserDimension
{
    public int Width { get; set; }
    public int Height { get; set; }
}

JS详情

<script type="text/javascript">
    window.getDimensions = function() {
        return {
                width: window.innerWidth,
                height: window.innerHeight
            };
    };
</script>