Plantillas de ASP.NET MVC para clientes y servidores

Question

¿Esto es posible? Para un ejemplo de lo que quiero lograr, tome el sistema de comentarios de Facebook. Los comentarios existentes se representan en el servidor, pero si dejo un comentario nuevo, se crea usando AJAX en el cliente. Idealmente, me gustaría almacenar la plantilla para el comentario en un solo lugar, y tener acceso a ella tanto en el servidor (representado por Razor) como en el cliente (representado en Javascript usando JSON devuelto por el servidor).

¿Alguna idea?

EDIT: Supongo que otra opción es quedarse con la representación puramente del lado del servidor, y cuando el usuario publique un nuevo comentario, devuelva el HTML prestado al navegador para rellenar el DOM. Esto no es tan agradable, pero me gustaría saber si esto también es posible.

Answer 1

Me opondría a la renderización del lado del servidor y luego la enviaré a tu script JS para obtener ancho de banda y rendimiento. En su lugar, debe usar un motor de plantillas que funcione tanto en el servidor como en el cliente. Cuando el cliente desea actualizar los comentarios, solo solicita los datos para los comentarios y luego reemplaza los antiguos comentarios html con el nuevo html procesado a partir de los datos utilizando la misma plantilla que se está utilizando en el servidor.

He estado usando el motor de plantillas de bigote para lograr esto usando PHP y JS. Hay una versión .NET que supongo que funciona para ASP.NET, y supongo que estás usando ASP.NET.

Entonces, lo que hago es asegurarme de tener los datos formateados de la misma manera en PHP y JS y luego renderizarlos usando una plantilla de bigote.

http://mustache.github.com/

bigote es fácil de usar. Tomas un objeto y una plantilla y recuperas el HTML.

Ejemplo objeto:

object->user = "Kilroy" 
object->comment = "was here" 
object->edited = true 

plantilla Ejemplo:

{{user}} {{comment}} {{#edited}}(This comment has been edited){{//edited}} 

Resultado:

Kilroy was here (This commment has been edited) 

Answer 2

El enfoque que he utilizado es tener una plantilla HTML oculta con comodines y/o nombres de clase, luego en el documento listo cargar los contenidos mediante llamada AJAX/JSON y finalmente actualizar o agregar nuevos elementos utilizando la misma plantilla en JavaScript.

<ul id="template"> 
    <li> 
    <span class="message"></span> 
    <span class="date"></span> 
    </li> 
</ul> 

<ul id="comments"></ul> 

<script type="text/javascript"> 
    $().ready(function() { 
     loadComments(); 
    }); 
    function loadComments() { 
     $.post('@Url.Action("GetComments", "Forum")', {}, function(comments) { 
      for (i = 0; i < comments.length; i++){ 
       loadComment(comments[i]); 
      } 
     }, 'json'); 
    } 
    function loadComment(comment) { 
     var template = $('#template li').clone(); 
     template.find('.message').text(comment.message); 
     template.find('.date').text(comment.date); 
     $('#comments').append(template); 
    } 
</script> 

Para los nuevos mensajes, puede enviar el mensaje al servidor y luego añadirlo a la lista utilizando la función loadComment, o actualizar toda la lista de comentarios. No es una muestra completa, pero espero que entiendas la idea.

Answer 3

no he trabajado con la maquinilla de afeitar o ASP.NET MVC mucho, pero el camino Normalmente lo abordo usando Monorail y NVelocity es este:

Tiene una plantilla para la página. Para los comentarios, tenga una plantilla parcial que incluya en su plantilla principal. Para la solicitud de AJAX, use esa plantilla parcial para representar el marcado de la parte de comentarios. Reemplace el lado del cliente con su método preferido.

De esta manera, le permitirá tener el marcado en un solo lugar, independientemente de si es una solicitud normal o una solicitud de AJAX.