Blazor JSInterop 从 DOM 获取元素属性

Question

我使用 Visual Studio 2022 样板项目制作了 Blazor 服务器端 Web 应用程序。我仍在使用 .NET 7，因为我的公司更新速度很慢。

我已按照 本教程 使用 JSInterop 从 DOM 获取窗口的尺寸。然后我尝试调整代码以获取特定元素的尺寸。我有以下文件：

MyApp/服务/BrowserService.cs

using Microsoft.JSInterop;
public class BrowserService
{
    private readonly IJSRuntime _js;

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

    public async Task<RectDimension> GetRectDimensions()
    {
        return await _js.InvokeAsync<RectDimension>("getRectDimensions");
    }
    public async Task<BrowserDimension> GetBrowserDimensions()
    {
        return await _js.InvokeAsync<BrowserDimension>("getBrowserDimensions");
    }

}

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

添加到其他服务下的MyApp/Program.cs

builder.Services.AddScoped<BrowserService>();

MyApp/Pages/Test.razor

@page "/Test"
@using System.Text.Json
@inject BrowserService Browser
@inject IJSRuntime js

<h1>Window Dimensions</h1>


<p>Window Height: @BrowserHeight</p>
<p>Window Width: @BrowserWidth</p>
<p>Box Height: @RectHeight</p>
<p>Box Width: @RectWidth</p>

<button @onclick="GetBrowserDimensions">Get Window Dimensions</button>
<button @onclick="GetRectDimensions">Get Box Dimensions</button>

<h2>Text size: @size</h2>
<div id="box">
    <h2>Text size: @resize</h2>
</div>



@code {
    public decimal size = 1;
    public decimal resize;
    public int RectHeight { get; set; }
    public int RectWidth { get; set; }
    public int BrowserHeight { get; set; }
    public int BrowserWidth { get; set; }

    async Task GetBrowserDimensions()
    {
        var dimension = await Browser.GetBrowserDimensions();
        BrowserHeight = dimension.Height;
        BrowserWidth = dimension.Width;
    }



    public async Task GetRectDimensions()
    {
        Console.WriteLine("starting getRectDimensions");
        var dimensions = await Browser.GetRectDimensions();
        if (dimensions is null) 
        {
            Console.WriteLine("Null Dimensions"); 
        }
        else
        {
            RectHeight = dimensions.Height;
            RectWidth = dimensions.Width;
        }
    }
}

添加到 _framework/blazor.server.js 脚本下的 MyApp/Pages/_Host.cshtml

    <script type="text/javascript">
        window.getRectDimensions = function () {
            return
            {
                width: document.getElementById("box").getBoundingClientRect().width;
                height: document.getElementById("box").getBoundingClientRect().height;
            }
        };
    </script>
    <script type="text/javascript">
        window.getBrowserDimensions = function () {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            };
        };
    </script>

运行时，“获取窗口尺寸”按钮工作正常，但“获取框尺寸”按钮返回“空尺寸”（没有代码块检查空值，由于尺寸变量的空值，它会返回错误）。

我尝试了几种变体，包括将 js 函数“window.getRectDimensions”更改为“getRectDimensions”，并传递 Blazor ElementReference 而不是使用 Id。

我猜测“box”与 _Host 位于不同的页面上，因此 getElementById(“box”) 可能找不到该元素。谁能解释一下这是怎么回事？

我真的不明白 JSInterop 是如何工作的，所以一般的链接或解释会很有帮助，文档对我来说有点高级，我不明白，而大多数教程和指南都是“你好世界”宝贝中学生的步骤。我有点需要中间解释。

Answer 1

除非是拼写错误，否则您的函数中有错误 - 宽度和高度后面不应该有分号。

试试这个：

window.getRectDimensions = function () {
  return
  {
    width: document.getElementById("box").getBoundingClientRect().width,
    height: document.getElementById("box").getBoundingClientRect().height
  }
};

或更好

window.getRectDimensions = function () {
  let boxRect = document.getElementById("box").getBoundingClientRect();
  return
  {
    width: boxRect.width,
    height: boxRect.height
  }
};