将 div 放在没有 js 互操作的 div 之后

Posted 2023-03-27

【中文标题】将 div 放在没有 js 互操作的 div 之后

【英文标题】：Place div after div without js interops

【发布时间】：2021-10-01 02:19:19

【问题描述】：

我有一个 div 元素列表，需要根据一些不同的标准放置在表单中。

在 JS 中，我会将它们存储在表单底部的隐藏 div 中，并在需要时将它们移动到适当的位置。 简单的jQuery $('#divToBeinserted').insertAfter($('#divExistingdiv'));

有没有办法在 blazor/C# 中做到这一点，而无需使用 js 互操作来完成它？

【参考方案1】：

不，这不是 Blazor 中的操作方法。

不要考虑在 DOM 对象周围移动。由于 Blazor 不回发，因此在 JS 中移动内容没有客户端优势。

您应该在 C# 中重新组织您的 数据本身，并在标记中使用条件逻辑来确定将内容放在哪里。

例如，假设您有一个项目集合，List<CustomerInvoice> Invoices，那么用于显示每个项目的 div 的 @onclick 处理程序可以 Remove 将 CustomerInvoice、Insert 放到List，然后你用StateHasChanged()调用页面刷新，你的foreach部分将忠实地以新的顺序输出所有内容。

如果没有 Interop，您肯定无法在 Blazor 中做一些事情。例如，如果您想在输入中获取选定的文本，您将使用 JS。很多媒体内容也需要 JS——录制音频、流式视频等。Blazor 根本没有涵盖这些内容（还没有？）。

【讨论】：

好的，谢谢。那正是我所想。基本上我现在正在做的是将 div 包装在 if 语句中以确定是否显示它。就像@if (ShowShortTermNbaPromo()) all the form control data..... 根据特定的日期范围和其他一些标准显示的。与表格的其余部分相比，其中大多数是相对短期的控制。之前的版本使用 typescript 并将所有短期控件与表单的其余部分分开，并且仅在需要时将其插入到表单上的某个位置。

是的，这就是基本思想。组织和显示事物的方式不受 C# 本身的限制。我尝试成功的一个想法是在标记中的foreach 循环中使用List<object> 和类名开关；然后你可以用你想要的任何组件，以你想要的任何顺序显示任何类实例的任意列表。