避免在服務器端Razor視圖和客戶端jQuery模板之間重複格式

我有一個搜索結果頁面，其中輸出使用MVC Razor視圖以特定方式格式化的項目列表。避免在服務器端Razor視圖和客戶端jQuery模板之間重複格式

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

客戶端可以使用jQuery AJAX以檢索新的數據集作爲JSON和jQuery模板來呈現結果集代替原來的進一步過濾這些結果。這是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>

這是AJAX調用後勢必：

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

注意我是如何複製的HTML格式在服務器端代碼剃刀和客戶機都搜索結果邊jQuery代碼。我想只有一個版本的數據綁定模板，以便在需要進行更改時減少不匹配的可能性。

閱讀Stephen Walter's Intro to jQuery Templates他暗示在與ASP.NET MVC一起使用jQuery模板時「更好地一起」集成，所以我想知道是否有一個解決上述場景的工具。

謝謝。

來源

2011-08-27 stefann

我想你可以使用@helper語法來避免一些重複的標記。

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

然後使用助手兩者的Razor視圖

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

和jQuery的模板

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

這是假設你的jQuery模板駐留在Razor視圖本身。

不利的一面是，在將每個參數傳遞給幫助器之前，必須將每個參數轉換爲字符串。而且，由於某種原因，將"${i+1}"傳遞給助手感覺是錯誤的。

我還不確定我會在生產中使用這種方法，但我想這取決於涉及的標記的複雜性。

來源

2011-08-27 20:39:08

這應該適用於簡單的模板，我同意它對於複雜模板（實際上我的jQuery模板使用了合成，上面是一個簡化的例子）變得不自信。如果Razor和jQuery模板能夠共享通用語法，除非會讓PHP人羣煩惱，否則會很好;）當你開始使用更具體的語言結構時，很快就會遇到限制。 – stefann

您可以使用相同的jQuery模板呈現初始搜索結果，而不是使用剃刀語法，這樣可以避免重複。你可以把它放在視圖中：

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

我組成了組對象上的ToJson方法。它可能是你在視圖模型上實現的一種方法，或者是任何組var用來將集合序列化爲json的方法。

來源

2011-08-27 22:00:54

是的，但這不是SEO。如果不是那些該死的搜索機器人不會運行JS，我會在客戶端完成整個搜索結果功能;）。另外我需要爲少數沒有JS的參觀者展示一些東西。 – stefann

避免在服務器端Razor視圖和客戶端jQuery模板之間重複格式

回答

相關問題