如何使用BaiduTemplate模板引擎-创新互联

这篇文章给大家介绍如何使用BaiduTemplate模板引擎，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联公司主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务晋安,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

1、新建项目，asp.net 空Web应用程序

如何使用BaiduTemplate模板引擎

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

如何使用BaiduTemplate模板引擎

2、添加list.js脚本，代码如下

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

添加模板文件list.html，内容如下


 
 
 列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" %>

预览效果：

如何使用BaiduTemplate模板引擎

关于如何使用BaiduTemplate模板引擎就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前文章：如何使用BaiduTemplate模板引擎-创新互联
网站路径：http://azwzsj.com/article/coogog.html

如何使用BaiduTemplate模板引擎-创新互联

其他资讯