Evita la duplicazione della formattazione tra la vista Razor lato server e il modello jQuery lato client

Question

Ho una pagina dei risultati di ricerca in cui viene visualizzato un elenco di elementi formattati in un modo particolare utilizzando una vista Razor MVC.

@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> 
} 

Il cliente può inoltre filtrare i risultati utilizzando jQuery AJAX per retrive un nuovo insieme di dati come modelli JSON e jQuery per rendere il gruppo di risultati al posto dell'originale. Questo è il modello di 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> 

che è vincolato dopo AJAX chiamata:

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

Nota come ho dovuto duplicare il formattazione HTML per un risultato di ricerca sia in codice Razor lato server e client- codice jQuery laterale. Mi piacerebbe avere solo una versione del modello associato ai dati per ridurre le possibilità di discrepanze quando devo apportare modifiche.

Lettura Stephen Walter's Intro to jQuery Templates ha suggerito un'integrazione "migliore insieme" quando si utilizzano i modelli jQuery con ASP.NET MVC, quindi mi chiedevo se esiste una funzionalità che risolva lo scenario precedente.

Grazie.

Answer 1

Immagino che sia possibile utilizzare la sintassi @helper per evitare alcuni dei markup duplicati.

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

quindi utilizzare l'aiuto sia per la vista Razor

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

e il modello di jQuery

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

questo è supponendo che il modello di jQuery risiede nella vista Razor stesso.

Sul lato negativo, è necessario convertire ogni argomento in stringa prima di passarli all'helper. E, per qualche ragione, passare "${i+1}" all'aiutante è assolutamente sbagliato.

Non sono ancora sicuro di utilizzare questo tipo di approccio in produzione, ma suppongo che dipenda dalla complessità del markup coinvolto.

Answer 2

È possibile eseguire il rendering del risultato di ricerca iniziale con lo stesso modello jquery anziché utilizzare la sintassi del rasoio, in questo modo si evita la duplicazione. È possibile inserire questo nella vista:

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

Ho creato il metodo ToJson sull'oggetto gruppo. Potrebbe essere un metodo da implementare sul tuo viewmodel o qualunque sia il gruppo var che proviene per serializzare la raccolta su json.