Question

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

enter image description here

我开发了一个控件，只要用户回复或展开评论，就会动态添加。

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

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

我应该使用服务器Table控制并创建TableRows和TableCells 动态？
我应该使用哪个容器，以免页面过重？
我应该创建divs并在运行时调整其位置并在每个中添加控件 div？

我不清楚的其他问题是：

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

任何帮助/建议？

感谢。

Answer 1

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

所以1º步骤 您可以创建一个包含2列和N行的简单表，具体取决于您拥有的消息数量（尝试过滤一些，例如：您有100个，只显示10个并且有“下一页”）或使用一些插件为你举办bigdata的桌子。

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

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

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

其他问题：

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

2º - UI是您的选择，看看什么对您最有利;）

享受;）

Answer 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非常重要，因为它会将浮动破坏到下一行。我认为wolud是goo来创建3个控件： 1. <uc:YourControl>单个消息 2.从div.rowContainer控制向左轻松附加消息，只需在服务器div中添加另一个消息，float:right在同一控件内。 3.控制所有消息，以便在下一行轻松添加消息。只需将另一个行控件添加到容器中即可。

同样浮动控件不会强制用户无限滚动到左侧。这不好，他们讨厌这个。

还有一个：asp.net并不适用于这类网站。事情变得很复杂。如果其中一个嵌套控件中的按钮应该在页面上做什么怎么办？你应该向Page添加方法并将其转换为控件吗？ ((MyPage)Page).DoSomeWork() 如果页面类型发生变化怎么办？创建界面？也许委托代替。把他放在哪里？在页面？控制？创建活动并通过所有家长鼓泡吧？一些上下文类？

并没有提及必须重新初始化动态控制树，每次回发都会发送回来。

Answer 3

1味精 2味精响应 ......等......

......你可以这样做：）

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

您为每个＆＃34;行创建一个div＆＃34;或使用带有类＆＃34;行的div来扩展响应。＆＃34;。然后，每个消息都有自己的div，其中包含＆＃34; message＆＃34;，使用以下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.
}

内联块允许你避免浮动和诸如此类的事情，这应该会使事情变得更加简单。（作为奖励，具有RTL阅读顺序的人将自动为他们工作。）

现在，这是您的问题。

从您描述的图片中，看起来好像有人可以回复任何讯息，或展开任何讯息;从逻辑上讲，这意味着您描述的网格布局可能无法正常工作。（例如，如果有人回复扩展的第一条消息，而其他人扩展了对第一条消息的回复怎么办？你将不得不发送消息用于同一空间的用户控制。如何工作？）我建议实施不同的设计这将适应您的使用流程，除非您有更具体的计划。

我希望这个答案可以帮到你。祝你好运。

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

4 个答案: