Блог

в последние дни я пытаюсь считывать разрешение браузера в моем приложении blazor. Я пытаюсь сделать это так: [JSInvokable] Метод Blazor вызывается JS-скриптом.

1. Мой вопрос: ширина и высота отображаются только на моей blazorpage после перезагрузки (обновления вручную) страницы. Я не могу это назвать.StateHasChanged(), потому что мой метод статичен.

Как мне вызвать statehashanged или что мне нужно сделать, чтобы показать новые данные? Я довольно новичок в ASP.net и т.д. Поэтому, пожалуйста, если возможно, включите пример кода 😉

Вот мой код блейзора кода (на стороне сервера):

 @page "/"
@inject IJSRuntime jsRuntime
<h1>Window Dimensions</h1>

<p>Window Width: @Width</p>
<p>Window Height: @Height</p>
<p>@DebugString</p>

@code {
    public static int Width;
    public static int Height;
    public static string DebugString;

    [JSInvokable]
    public static async Task GetBrowserDimensions(int width, int height)
    {
        Width = width;
        Height = height;
        if (Width < 600)
        {
            DebugString = "small_UI";
        }
        if (Width >= 600)
        {
            DebugString = "big_UI";
        }
    }
}
  

и вот мой код .js:

 //------JS Code for the resize stuff incl. timer so that resize doesnt fire every pixel move
var resizeId;
window.addEventListener('resize', function () {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing() {
    var width= window.innerWidth;
    var height= window.innerHeight;
    alert('Width: '  width   '  Height: '  height);
    DotNet.invokeMethodAsync('Blazor_PageResolutionJS', 'GetBrowserDimensions', width, height);
}
//^^^^^^JS Code for the resize stuff incl. timer so that resize doesnt fire every pixel move  

2.
Подходит ли это для получения разрешения браузера, чтобы выбирать дизайн пользовательского интерфейса?

Спасибо за чтение

Вы можете обойти необходимость в этом, установив пакет NuGet https://www.nuget.org/packages/BlazorPro.BlazorSize /

Если вы все еще заинтересованы в написании кода самостоятельно, вы можете найти источник для BlazorSize по адресу https://github.com/EdCharbeneau/BlazorSize/tree/master/BlazorSize

Решение для вызова StateHasChanged из JavaScript включает использование метода [JsInvokable] в .NET . Однако, если вы просмотрите источник BlazorSize, вы заметите, что для правильного удаления прослушивателей событий из DOM после их завершения требуется много дополнительной работы.