Blazor:如何在JSInterOP调用后调用StateHasChanged(尝试在通过JS resize Event

Question

最近几天，我试图在我的blazor应用程序中读取浏览器分辨率。我尝试这样做：[JSInvoke]Blazor Methode由JS脚本调用。

1。我的问题是：宽度和高度只有在我重新加载(手动刷新(页面后才会显示在我的blazorpage中。我不能这么说。StateHasChanged((，因为我的方法是静态的。

我该如何调用StateHasChanged，或者我需要做些什么来显示新数据？我对ASP.net等还很陌生，所以如果可能的话，请附上一个代码示例；(

这里是我的代码blazor(服务器端(代码：

@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。这是一种可以获得浏览器分辨率以进行用户界面设计选择的技术吗？

感谢您阅读

Answer 1

您可以通过安装NuGet包来绕过这一需求https://www.nuget.org/packages/BlazorPro.BlazorSize/

如果你仍然对自己编写代码感兴趣，你可以在https://github.com/EdCharbeneau/BlazorSize/tree/master/BlazorSize

从JavaScript调用StateHasChanged的解决方案涉及在.NET中使用[JsInvokable]方法。然而，如果你仔细查看BlazorSize的源代码，你会发现一旦你完成了从DOM中正确删除事件侦听器，还需要做很多额外的工作。