在兩個方向上動態加載用戶控件

Question

我正在開發一個評論平台，用戶可以發表評論，其他用戶可以回復評論。 但這些評論可以在兩個方向回復（回復和擴展）。 這個想法是用戶可以回復，用戶也可以擴展討論。 請看圖片。

我開發了一個控件，只要用戶回復或擴展評論，它就會動態添加。

如果用戶將對控件進行回復，則將在該消息（注釋）下添加新控件，如果用戶展開該消息（注釋），則將在該消息的右側添加具有擴展回復（消息）的控件（注釋）。 多個用戶可以展開消息，用戶也可以回復擴展消息。

我不確定應該添加這些控件的占位符或容器應該是什么。

• 我應該使用服務器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 MSG 2 MSG響應......等......

......你可以這樣做:)

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>

您可以使用帶有“row”類的div為每個“行”或擴展的響應創建一個div。 然后，每個消息都有自己的div，類為“message”，使用以下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閱讀順序的人將自動為他們工作。）

現在，這是你的問題。

從您描述的圖像看，似乎任何人都可以回復任何消息，或展開任何消息; 從邏輯上講，這意味着您描述的網格布局可能無法正常工作。 （例如，如果有人回復擴展的第一條消息，而其他人擴展了對第一條消息的回復怎么辦？你將不得不發送消息用於同一空間的用戶控制。如何工作？）我建議實施不同的設計這將適應您的使用流程，除非您有更具體的計划。

我希望這個答案可以幫到你。 祝好運。