javascript - Cargando control de usuario dinámicamente en dos direcciones

Estoy desarrollando una plataforma tipo comentarios donde los usuarios pueden publicar comentarios y otros usuarios pueden responder a esos comentarios. Pero estos comentarios se pueden responder en dos direcciones (Responder y Expandir). La idea es que el usuario pueda responder y también pueda expandir esa discusión. Por favor, vea la imagen.

He desarrollado un control que se añadirá dinámicamente siempre que el usuario responda o expanda un comentario.

Si el usuario responde en el control, se añadirá un nuevo control debajo de ese mensaje (comentarios) y si el usuario expande ese mensaje (comentarios), entonces se añadirá un control con la respuesta expandida (mensaje) en el lado derecho de esos mensajes (comentarios). Más de un usuario puede expandir un mensaje y los usuarios también pueden responder a un mensaje expandido.

No estoy seguro de cuál debería ser el marcador de posición o contenedor en el que se deben agregar estos controles.

• ¿Debería usar el control Table del servidor y crear TableRows y TableCells dinámicamente?
• ¿Qué contenedor debería usar para que la página no se vuelva demasiado pesada?
• ¿Debería crear divs y ajustar su posición en tiempo de ejecución y agregar un control en cada div?

Otra pregunta sobre la que no tengo claridad es:

• Más de un usuario puede expandir un mensaje, en este caso cómo manejar la interfaz de usuario. Ocultar/Mostrar controles o cualquier otra solución.
• ¿Debería mostrar la barra de desplazamiento horizontal en Expansiones o hay otras soluciones?

¿Alguna ayuda/sugerencia?

Gracias.

Respuesta #1

puedes hacer esto de diferentes maneras, no te voy a dar código porque quiero que lo intentes y aprendas. Así que puedes hacer todo esto con JQuery, no necesitas controladores de Asp.net, porque a veces son complicados de manejar.

Entonces, primer paso: Puedes crear una tabla simple con 2 columnas y N filas dependiendo del número de mensajes que tengas (intenta filtrar algunos, por ejemplo: si tienes 100, muestra solo 10 y ten un "siguiente página") o usa algún plugin de tabla que maneje grandes volúmenes de datos por ti.

2º Paso: cuando respondas un mensaje, crea un <tr> en tu tabla para colocar la "respuesta del primer mensaje" (nota: necesitas crear una estructura para manejar tu navegación en la tabla fácilmente con ID's)

Paso 3: en tu segunda columna ten preparado un <div> para recibir y mostrar el mensaje expandido cuando el usuario haga clic en "expandir" y límpialo siempre cuando se expanda un nuevo mensaje.

Eso debería funcionarte, hay otras maneras pero trata de pensar en algo simple

Otras preguntas:

1º - No entendí la pregunta, pero si tu sitio funcionará en un servidor, user1 y user2, ... userN usan la misma página pero se muestran en diferentes lugares, solo necesitas recargar los datos para que todos sepan que alguien comentó o respondió o lo que sea en un mensaje.

2º - UI es tu elección, mira qué es lo mejor para ti ;)

disfruta ;)

Respuesta #2

Creo que la otra respuesta es demasiado complicada. Para mí parece que necesitas

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

para la fila de tus controles expandibles. Cuando el usuario haga clic en el botón de expandir, la página agregará otro de TusControles al div.rowContainer con otro div padre con float a la derecha:

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

Cuando el usuario agregue otra fila de mensajes, agregue otro contenedor de fila con 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 es importante ya que rompe el float a la siguiente línea. Creo que sería bueno crear 3 controles: 1. <uc:YourControl> con un solo mensaje 2. Control de div.rowContainer para facilitar agregar mensajes a la izquierda, solo agrega otro al div del servidor con float:right dentro del mismo control. 3. Control para todos los mensajes para facilitar agregar mensajes en la siguiente fila. Solo agrega otro control de fila al contenedor.

Además, el hecho de que los controles floten no obligará al usuario a desplazarse indefinidamente hacia la izquierda. No es agradable y ellos odian eso.

Y solo una cosa más: asp.net no es realmente para este tipo de sitios. Las cosas se complican rápidamente. ¿Qué pasa si un botón en uno de los controles anidados debería hacer algo en la Página? ¿Deberías agregar un método a la Página y convertirlo en el control? ((MyPage)Page).DoSomeWork() ¿Qué pasa si cambia el tipo de Página? ¿Crear una interfaz? Quizás un delegado en su lugar. ¿Dónde ponerlo? ¿En la Página? ¿En el Control? ¿Crear un evento y propagarlo a través de todos los padres? ¿Alguna clase de contexto?

Y no mencionar la necesidad de reinicializar el árbol de controles dinámicos cada vez que se envía un postback.