為了將數據庫中的一組記錄轉換成HTML輸出到界面上，大家都採用哪些做法呢？

在WebForm時代我們經常使用datagrid、repeater，當MVC問世後我們開始直接在視圖上編寫C#循環語句，而現在我更喜歡使用JavaScript模板引擎來生成HTML。因為這種做法的最大好處是實現了前後端代碼的解耦，前端開發人員也無需瞭解太多的C#知識。

用法與示例：

第一步，在頁面中引入JavaScript模板引擎：

function template(str, data) {
    var strFunc =
    "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
    str.replace(/[\r\t\n]/g, " ")
       .replace(/'(?=[^#]*#>)/g, "\t")
       .split("'").join("\\'")
       .split("\t").join("'")
       .replace(/<#=(.+?)#>/g, "',$1,'")
       .split("<#").join("');")
       .split("#>").join("p.push('")
       + "');}return p.join('');";
    func = new Function("obj", strFunc);
    return func(data);
}

第二步，準備HTML模板：

<script type="text/html" id="temp_class">
    <# for(var i=0;i<datalist.length;i++){ #>
        <div class="panle">
　　　　　　　課程編號：<#= datalist[i].ClassId #> 
　　　　　　　課程名稱：<#= datalist[i].ClassName #>
        </div>
    <# } #>
</script>

第三步，準備數據與輸出HTML：

function loadPage() {
    var classList = [
        { ClassName: "數據結構", ClassId: "1001", CreateOn: "2015-05-01 08:20:36", CreatedBy: "管理員"},
        { ClassName: "線性代數", ClassId: "1003", CreateOn: "2015-05-03 19:21:25", CreatedBy: "管理員"},
        { ClassName: "高等數學", ClassId: "1004", CreateOn: "2015-05-03 19:20:39", CreatedBy: "管理員"}
    ];
    var strTempHTML = document.getElementById("temp_class").innerHTML;
    document.getElementById("class_list").innerHTML = template(strTempHTML, { datalist: classList });
}

備註：classList對象是需要後端開發人員輸出的，在MVC中我們可以直接使用ViewBag對象將後端變量輸出到JavaScript代碼中。

效果預覽：

template 放在script 上面與下面的區別_模板引擎

其它模板引擎介紹：Underscore.js

優點總結：

1、前端人員可以更加自由的對HTML結構進行更改，不再依賴後台開發。

2、模板語法支持if等JavaScript語法，用法簡單，減小了代碼複雜度。

3、HTML代碼結構清晰，可閲讀性強。