6

私は、ユーザーがコメントを投稿し、他のユーザーがそのコメントに返信できるプラットフォームのようなコメントを開発しています。ただし、これらのコメントは2つの方向（返信と展開）で返信できます。アイデアは、ユーザーが返信でき、ユーザーもそのディスカッションを拡張できるということです。画像をご覧ください。

ここに画像の説明を入力してください

ユーザーがコメントに返信または展開するたびに動的に追加されるコントロールを開発しました。

ユーザーがコントロールに返信する場合は、そのメッセージ（コメント）の下に新しいコントロールが追加され、ユーザーがそのメッセージ（コメント）を展開すると、返信が展開されたコントロール（メッセージ）がそのメッセージ（コメント）の右側に追加されます。複数のユーザーがメッセージを展開でき、ユーザーは展開されたメッセージに返信することもできます。

これらのコントロールを追加するプレースホルダーまたはコンテナーはどうあるべきかわかりません。

  • サーバーTable制御を使用TableRowsしてTableCells 動的に作成する必要がありますか？
  • ページが重くなりすぎないようにするには、どのコンテナを使用すればよいですか？
  • 実行時にその位置を作成divsして調整し、それぞれにコントロールを追加する 必要がありdivますか？

私がはっきりしていない他の質問は次のとおりです。

  • 複数のユーザーがメッセージを展開できます。この場合は、UIの処理方法です。コントロールまたはその他のソリューションを非表示/表示します。
  • 拡張で水平に表示scrollbarする必要がありますか、それとも他の解決策がありますか？

何か助け/提案はありますか？

ありがとう。

4

4 に答える 4

2

これはさまざまな方法で行うことができます。試して学んでもらいたいので、コードを提供するつもりはありません。したがって、これらすべてを JQuery で実行できます。Asp.net コントローラーは必要ありません。操作が複雑な場合があるためです。

したがって、1º ステップ:メッセージの数に応じ て 2 つの列とN行を持つ単純なテーブルを作成することができます (例: 100 を持っている場合、10 のみを表示し、「次のページ」を表示する)、またはいくつかのプラグイン テーブルを使用します。ビッグデータを保持します。

2º ステップ: メッセージに返信するときに<tr>、「最初のメッセージの返信」を配置するテーブルを作成します (注: でテーブルのナビゲーションを簡単に処理するための構造を作成する必要がありますID's) 。

3º ステップ: 2 番目の列では<div>、ユーザーが [展開] をクリックしたときに展開メッセージを受信して​​表示する準備を整え、新しいメッセージが展開されたときに常にそれを消去します。

それはあなたのために働くはずです、他の方法がありますが、何か簡単なことで考えてみてください

その他の質問:

1º - 質問の意味がわかりませんでしたが、あなたのサイトが user1 と user2 のサーバーで実行される場合、... userN は同じページを使用し、別の場所でレンダリングします。コメント、返信、またはメッセージ内の何でも。

2º - UI はあなたの選択です。あなたに最適なものを見てください ;)

楽しい ;）

于 2012-11-13T17:22:18.037 に答える
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. 次の行にメッセージを簡単に追加できるように、すべてのメッセージを制御します。別の行コントロールをコンテナーに追加するだけです。

また、コントロールをフローティングしても、ユーザーが無限に左にスクロールする必要はありません。それは良くないし、彼らはそれを嫌っている。

もう 1 つ: asp.net は、この種のサイトには向いていません。物事はすぐに複雑になります。ネストされたコントロールのいずれかのボタンがページで何かを行う必要があるとしたら? メソッドを Page に追加して、コントロールにキャストする必要がありますか? ((MyPage)Page).DoSomeWork() ページの種類が変わったら？インターフェイスを作成しますか? 代わりに委任するかもしれません。彼をどこに置いた？ページ内? コントロール？イベントを作成し、それをすべての親にバブルしますか? いくつかのコンテキストクラス？

また、動的コントロール ツリーの再初期化の必要性については言及しませんが、毎回ポスト バックが送信されます。

于 2012-11-17T09:27:13.393 に答える
2

1 MSG 2 MSG レスポンス ...etc...

...あなたはこのようにすることができます:)

于 2013-01-23T10:28:12.733 に答える
1

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 を使用して、各「行」または展開された応答の div を作成します。次に、各メッセージには、次の CSS を使用して、クラス「メッセージ」を持つ独自の div があります。

.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 の読み順を使用している人は、この作業が自動的に行われます。)

さて、ここにあなたの問題があります。

あなたが説明した画像から、誰でもメッセージに返信したり、メッセージを展開したりできるように見えます。これは、論理的には、説明したグリッド レイアウトがうまく機能しない可能性があることを意味します。(たとえば、誰かが Expanded First Message に返信し、他の誰かが Reply to First Message を展開した場合はどうなるでしょうか?同じスペースをめぐって競合するユーザー コントロールにメッセージを送信する必要があります。それはどのように機能しますか?)別のデザインを実装することをお勧めします。より具体的な計画がない限り、使用フローに対応します。

この回答がお役に立てば幸いです。幸運を。

于 2012-11-21T16:47:46.997 に答える