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

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

我开发了一个控件，每当用户回复或展开评论时，它都会动态添加

如果用户将对控件进行回复，则会在该消息（注释）下添加一个新控件，如果用户展开该消息（注释），则会在该消息（注释）的右侧添加一个带有展开回复（消息）的控件。多个用户可以展开一条消息，用户也可以对展开的消息进行回复

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

• 我应该使用服务器

  Table

  控制并创建

  TableRows

  和

  TableCells

  动态的
• 我应该使用什么容器，这样页面就不会太重
• 我应该创建

  div

  并在运行时调整其位置，并在每个div中添加控件吗

  div

我不清楚的其他问题是：

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

  滚动条

  ，还是有其他的 解决方案

有什么帮助/建议吗

---

谢谢。

你可以用不同的方式来做，我不会给你代码，因为我希望你尝试学习。因此，您可以使用JQuery完成所有这些操作，您不需要Asp.net控制器，因为有时候它们很复杂

So 1º步进： 您可以创建一个包含两列和

N

行的简单表，具体取决于您拥有的消息数量（尝试筛选一些，例如：您有100条，只显示10条，并且有一个“下一页”），或者使用一些为您保存bigdata的插件表

2º台阶： 回复邮件时，在表格中创建一个

，以放置“回复第一条邮件”（注意：您需要创建一个结构，以便使用

ID在表格上轻松导航）

3º台阶：
在您的第二列中，请准备好当用户单击“展开”时接收和显示展开消息，并在展开新消息时始终清除该消息

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

其他问题：

1º-我不理解这个问题，但是如果您的站点将在服务器上运行，user1和user2。。。userN使用相同的页面，但呈现在不同的位置，您只需重新加载数据，让每个人都知道有人在消息中发表评论或回复或其他内容

2º-这是您的选择，看看什么最适合您；）

享受；）
 我认为另一个答案很复杂。对我来说，似乎你需要

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



用于可扩展控件的行。
当用户快速打开展开按钮时，页面将向div.rowContainer添加另一个控件，父控件为另一个div，右键为float：

   <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>



清除：这两项都很重要，因为正在将浮点值分解到下一行。
我认为wolud最好创建3个控件：
1. <代码>
带有单个消息
2.控件从
div.rowContainer
轻松将消息追加到左侧，只需在同一控件内使用
float:right
将另一个消息添加到服务器
div
。
3.控件，以便在下一行中轻松添加消息。只需将另一个行控件添加到容器中

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

还有一点：asp.net并不是专门为这类网站设计的。事情很快变得复杂起来。如果其中一个嵌套控件中的按钮应该在页面上执行某些操作，该怎么办？
是否应该将方法添加到页面并将其强制转换为控件<代码>（（MyPage）页）.DoSomeWork（）

如果页面类型发生变化怎么办？创建接口？也许是委派。你把他放在哪里了？在页面中？控制通过所有家长创建事件和气泡？一些上下文类

---

更不用说每次发送回发时都需要重新初始化动态控件树。

对于CSS，simple更好

我的建议是，如果您在布局方面必须采用这种方式：

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

内联块允许您避免浮动和诸如此类的操作，这将使事情变得更简单。（作为奖励，具有RTL阅读顺序的用户将自动获得此工作。）

现在，你的问题来了

从您描述的图像来看，似乎任何人都可以回复任何消息，或扩展任何消息；从逻辑上讲，这意味着您描述的网格布局可能无法正常工作。（例如，如果有人回复扩展后的第一条消息，而其他人则回复第一条消息，该怎么办？您将不得不选择竞争相同空间的Message usercontrols。这将如何工作？）我建议实施不同的设计，以适应您的使用流，除非你有更具体的计划

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

1味精 2味精 回应 ……等等

---

。。。您可以这样做：）

我强烈建议您使用s和CSS作为动态控件。这些s可以相对于您的主控件进行定位。感谢您提供的详细答案Ricardo。让我试试这个，如果需要的话，我会给你回复的

.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.
}