根据页面的顶部和左侧位置在页面上显示 Blazor 组件

Posted 2023-04-12

【中文标题】根据页面的顶部和左侧位置在页面上显示 Blazor 组件

【英文标题】：Displaying Blazor components on a page based on its top and left position

【发布时间】：2021-11-28 20:03:35

【问题描述】：

我有一个 Blazor 服务器应用程序，页面上的组件很少。 这些组件是可拖动的，当用户拖动时，我保存每个 数据库的顶部位置和左侧位置。

我使用下面的循环在我的页面上和加载时显示组件 组件相互堆叠。

     @foreach (var group in MyModel)
        
            <div class="draggable position-absolute" id="@extgroup.AddId">
                <MyComponent
                    Id="@extgroup.AddId"
                    GroupDescription="@extgroup.Description"
                    TopPosition="@extgroup.TopPosition"
                    LeftPosition="@extgroup.LeftPosition">
                </MyComponent>
            </div>
        

如何将组件显示在它们所在的确切位置 保存，因为我有顶部位置和左侧位置的所有值？

谢谢。

【问题讨论】：

组件没有内在位置。具有位置的是组件内的 html 元素。所以：

它们都在一个 div 中，我该怎么做呢？

我推荐把class="draggable position-absolute"放在组件里面，让组件自己保存和加载位置，也就是让它成为真正的独立控件。我会将整个 extgroup 作为单个参数传递给组件。

【参考方案1】：

MyComponent.razor

<div style="position:absolute; left: @extgroup.LeftPosition; top: @extgroup.TopPosition">

   (Put your content here)

</div>