這篇文章給大家介紹如何使用BaiduTemplate模板引擎，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1、新建項目，asp.net 空Web應(yīng)用程序

添加data,js,styles,templates文件夾，添加baiduTemplate.js,jquery.js,bootstrap.css

2、添加list.js腳本，代碼如下

var data = {
 "list": [
 {
 "col1": "行1",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行2",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行3",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行4",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行5",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行6",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行7",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 },
 {
 "col1": "行8",
 "col2": "數(shù)據(jù)2",
 "col3": "數(shù)據(jù)3",
 "col4": "數(shù)據(jù)6",
 "col5": "數(shù)據(jù)5",
 "col6": "數(shù)據(jù)6"
 }
 ]
};
var template = "templates/list.html";
$.ajax({
 url: template,
 dataType: "html",
 success: function (val) {
 $("#list").html(baidu.template(val, data));
 }
});

添加模板文件list.html，內(nèi)容如下

 
 
 列1
 列2
 列3
 列4
 列5
 列6
 
 
 <%for(var i = 0; i
 
 <%=item.col1%>
 <%=item.col2%>
 <%=item.col3%>
 <%=item.col4%>
 <%=item.col5%>
 <%=item.col6%>
 
 <%}%>

3、添加default.aspx頁面，并添加引用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="baiduTemplate.Default" %>