在两个方向上动态加载用户控件

Posted 2023-02-22

【中文标题】在两个方向上动态加载用户控件

【英文标题】：Loading user control dynamically in two directions

【发布时间】：2012-11-01 15:57:40

【问题描述】：

我正在开发一个类似评论的平台，用户可以在该平台上发布 cmets，其他用户可以在该 cmets 上回复。但是这些 cmets 可以从两个方向回复（回复和展开）。这个想法是用户可以回复并且用户也可以扩展该讨论。请看图片。

我开发了一个控件，当用户回复或展开评论时，该控件将动态添加。

如果用户将回复控件，则将在该消息 (cmets) 下添加一个新控件，如果用户展开该消息 (cmets)，则将在该消息 (cmets) 的右侧添加一个具有扩展回复 (消息) 的控件）。多个用户可以展开消息，用户也可以回复展开的消息。

我不确定应该添加这些控件的占位符或容器是什么。

我应该使用服务器Table 控制并创建TableRows 和TableCells 动态的？ 我应该使用什么容器，这样页面才不会太重？ 我是否应该创建 divs 并在运行时调整其位置并在每个 div?

其他我不清楚的问题是：

多个用户可以展开一条消息，这种情况下如何处理 用户界面。隐藏/显示控件或任何其他解决方案。 我应该在扩展上显示水平scrollbar 还是有其他 解决方案？

有什么帮助/建议吗？

谢谢。

【问题讨论】：

我强烈建议您使用 和 CSS 来进行动态控件。这些 可以相对于您的主控件定位。

【参考方案1】：

你可以用不同的方式做到这一点，我不会给你代码，因为我希望你尝试和学习。所以你可以用 JQuery 来做这一切，你不需要 Asp.net 控制器，因为有时它们使用起来很复杂。

所以 1º 步长： 您可以创建一个包含 2 列和 N 行的简单表，具体取决于您拥有的消息数量（尝试过滤一些，例如：您有 100 条，仅显示 10 条并有一个“下一页”）或使用一些插件表为您保存大数据。

2º 步长： 当您回复消息时，在您的表格中创建一个<tr> 以放置“第一条消息的回复”（注意：您需要创建一个结构来轻松地使用ID's 在表格上处理您的导航）

3º 步长： 在您的第二列中，有一个 <div> 准备在用户单击“展开”时接收并显示展开消息，并在展开新消息时始终清理它。

这应该对你有用，还有其他方法，但试着用简单的方式思考

其他问题：

1º - 我不明白这个问题，但如果你的网站将在服务器上运行，user1 和 user2，... userN 使用相同的页面但在不同的地方呈现，你只需要重新加载数据让每个人知道有人评论或回复或消息中的任何内容。

2º - UI 由您选择，看看什么最适合您；)

享受 ;)

【讨论】：

感谢里卡多的详细解答。让我试试这个，如果需要，我会回复你。

Ricardo，你明白每条消息都可以扩展吗？如果用户扩展了根消息（第一条消息），那么这个扩展的消息也可以被扩展等等。

是的 是的 我明白了，这就是为什么你需要有一个良好的结构 <div's> 或 <tr's> ，方便你扩展消息，像这样：第一条消息id=MSG1，回复messages 将是该消息的数组（树），因此，您可以像 <tr id= "MSG1"> <tr id=MSG1_REPLY1> <tr id= MSG1_REPLY2> 等等，尝试在结构中先处理；）

【参考方案2】：

我认为其他答案很复杂。对我来说，你似乎需要

   <div class="rowContainer">
      <div style="float:right">
         <uc:YourControl>
      </div>
   <div>

用于可展开控件的行。 当用户快速展开按钮页面时，会将另一个 YourControls 添加到 div.rowContainer 与父另一个具有浮动权的 div：

   <div class="rowContainer">
      <div style="float:right">
         <uc:YourControl>
      </div>
      <div style="float:right">
         <uc:YourControl>
      </div>
   <div>

当用户将添加另一行消息时，使用 div.rowContainer 添加另一个行容器：

   <div class="allMessagesContainer">
      <div class="rowContainer">
         <div style="float:right">
            <uc:YourControl>
         </div>
      <div>
      <div style="clear:both">
      <div class="rowContainer">
         <div style="float:right">
            <uc:YourControl>
         </div>
      <div>
   </div>

clear:both 很重要，因为它会将浮动中断到下一行。 我认为创建 3 个控件会很好： 1. <uc:YourControl> 单条留言 2. 从div.rowContainer 控制到左侧轻松附加消息，只需将另一个消息添加到服务器div 和float:right 在同一控件内。 3.控制所有消息，以便在下一行轻松添加消息。只需向容器中添加另一个行控件即可。

控件的浮动也不会强制用户无限向左滚动。这不好，他们讨厌这样。

还有一点：asp.net 并不适合这类网站。事情很快变得复杂起来。如果嵌套控件之一中的按钮应该在 Page 上执行某些操作怎么办？ 您是否应该向 Page 添加方法并将其强制转换为控件？ ((MyPage)Page).DoSomeWork() 如果页面类型发生变化怎么办？创建界面？也许代之以委托。把他放在哪里？在页面中？控制？创建事件并通过所有父母对其进行冒泡？一些上下文类？

更不用说重新初始化动态控件树的必要性，每次回发都是发送的。

【参考方案3】：

1味精 2味精 回复 ……等等……

...你可以这样做:)

【参考方案4】：

在 CSS 方面，越简单越好。

我的建议，如果您在布局方面必须这样：

<div class="row">
    <div class="message"><FirstMessage /></div>
    <div class="message"><ExpandedFirstMessage /></div>
</div>
<div class="row">
    <div class="message"><Reply /></div>
    ...etc...
</div>

您为每个“行”或扩展响应创建一个 div，使用“row.”类的 div。然后，每条消息都有自己的带有“消息”类的 div，使用以下 CSS：

.message 
    width: 200px; // or whatever size you want here
    height: 100px; // or whatever size you want here
    display: inline-block; // This is the important part!
    ...etc // your extra padding, margin, whatnot.

Inline-block 允许您避免浮动和诸如此类的东西，这应该会使事情变得更简单。 （作为奖励，具有 RTL 阅读顺序的人将自动为他们完成这项工作。）

现在，这是你的问题。

从您描述的图像来看，似乎任何人都可以回复任何消息，或展开任何消息；从逻辑上讲，这意味着您描述的网格布局可能无法正常工作。 （例如，如果有人回复了扩展的第一条消息，而其他人扩展了对第一条消息的回复呢？您将不得不向竞争相同空间的用户控件发送消息。这将如何工作？）我建议实施不同的设计这将适应您的使用流程，除非您有更具体的计划。

我希望这个答案对你有所帮助。祝你好运。