Evite el formato duplicado entre la vista Razor del lado del servidor y la plantilla jQuery del lado del cliente

Question

Tengo una página de resultados de búsqueda donde obtengo una lista de elementos formateados de una manera particular utilizando una vista MVC Razor.

@for (int i = 0; i < group.Count(); i++) { 
    <div class="result"> 
    <div class="ordinal">@((i+1).ToString()).</div> 
    <div class="detail"><p>@group.ElementAt(i).Name</p></div> 
    </div> 
} 

El cliente puede filtrar aún más los resultados usando jQuery AJAX para retrive un nuevo conjunto de datos como plantillas y JSON jQuery para hacer el conjunto de resultados en lugar del original. Esta es la plantilla de jQuery:

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
    <div class="result"> 
     <div class="ordinal">${i+1}.</div> 
     <div class="detail"><p>${name}</p></div> 
    </div> 
    {{/each}} 
</script> 

que está obligado después de AJAX llamada:

var result = $("#resultTemplate").tmpl({ results: data }); 
$("#resultsColumn").empty().append(result); 

Nota cómo tenía que duplicar el formato HTML para un resultado de búsqueda, tanto en código de la maquinilla de afeitar en el servidor y cliente- lado código jQuery. Me gustaría tener solo una versión de la plantilla de datos enlazados para reducir la posibilidad de desajustes cuando tengo que hacer cambios.

Lectura Stephen Walter's Intro to jQuery Templates Está insinuando una integración "mejor junta" cuando se usan plantillas de jQuery con ASP.NET MVC, por lo que me preguntaba si hay una instalación que aborde el escenario anterior.

Gracias.

Answer 1

Supongo que podría usar la sintaxis @helper para evitar algunas de las marcas duplicadas.

@helper Result(string ordinal, string name) { 
    <div class="result"> 
     <div class="ordinal">@ordinal.</div> 
     <div class="detail"><p>@name</p></div> 
    </div> 
} 

A continuación, utilice el ayudante tanto para la vista Razor

@for (int i = 0; i < group.Count(); i++) { 
    @Result((i+1).ToString(), group.ElementAt(i).Name) 
} 

y la plantilla jQuery

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
     @Result("${i+1}", "${name}") 
    {{/each}} 
</script> 

eso asumiendo su plantilla jQuery reside en la vista de la maquinilla de afeitar en sí.

En el lado negativo, debe convertir cada argumento en cadena antes de pasarlos al ayudante. Y, por alguna razón, pasar "${i+1}" al ayudante se siente completamente mal.

No estoy seguro de si usaría ese tipo de enfoque en la producción, pero supongo que depende de la complejidad del marcado involucrado.

Answer 2

Puede representar el resultado de la búsqueda inicial con la misma plantilla jquery en lugar de utilizar la sintaxis de la afeitadora, esto evita la duplicación. Se puede poner esto en la vista:

<script type="text/javascript"> 
    $('#resultTemplate') 
    .tmpl(@group.ToJson())) 
    .appendTo("#resultTemplate"); 
</script> 

que componen el método toJSON en el objeto de grupo. Podría ser un método que implemente en su modelo de vista o de lo que provenga el grupo var para serializar la colección a json.