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

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

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，内容如下

<table class="table table-bordered">

    <thead>

        <tr>

            <td>列1</td>

            <td>列2</td>

            <td>列3</td>

            <td>列4</td>

            <td>列5</td>

            <td>列6</td>

        </tr>

    </thead>

    <%for(var i = 0; i<list.length;i++){ var item=list[i];%>

        <tr>

            <td><%=item.col1%></td>

            <td><%=item.col2%></td>

            <td><%=item.col3%></td>

            <td><%=item.col4%></td>

            <td><%=item.col5%></td>

            <td><%=item.col6%></td>

        </tr>

    <%}%>

</table>

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery.min.js"></script>

    <script src="js/baiduTemplate.js"></script>

    <script src="js/list.js"></script>

    <link href="styles/bootstrap.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="list" style="margin-top:10px;">

    </div>

    </form>

</body>

</html>

预览效果：

源码下载

BaiduTemplate模板引擎使用示例附源码的更多相关文章

  1. jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...

  2. C#微信公众号开发-高级接口-之模板消息开发，附源码

    个人觉得模板消息功能的增加对公众号的作用非常大,可以说是真正意义上的实现了所谓的轻app,商家可以通过模板消息给用户发送重要的信息,交易.预约.消费.邮件.物流等信息.之前我做过的系统通过邮件发送订单 ...

  3. SpringBoot 集成 FreeMarker 导出 Word 模板文件（底部附源码）

    思路解说 word 模板文件(doc 或 docx 文件)另存为 xml 文件 将后缀 xml 改成 html:大部分文档会改成 ftl(FreeMarker 的后缀名),因为 word 文件另存为 ...

  4. SpringBoot 整合 spring security oauth2 jwt完整示例 附源码

    废话不说直接进入主题(假设您已对spring security.oauth2.jwt技术的了解,不懂的自行搜索了解) 依赖版本 springboot 2.1.5.RELEASE spring-secu ...

  5. 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 （附源码）

    在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...

  6. 【转】.NET(C#)：浅谈程序集清单资源和RESX资源 关于单元测试的思考--Asp.Net Core单元测试最佳实践 封装自己的dapper lambda扩展-设计篇 编写自己的dapper lambda扩展-使用篇 正确理解CAP定理 Quartz.NET的使用（附源码） 整理自己的.net工具库 GC的前世与今生 Visual Studio Package 插件开发之自动生

    [转].NET(C#):浅谈程序集清单资源和RESX资源   目录 程序集清单资源 RESX资源文件 使用ResourceReader和ResourceSet解析二进制资源文件 使用ResourceM ...

  7. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  8. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  9. Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

随机推荐

  1. mybatis配置文件查询参数的传递

    通常来说,参数传递可以使用#与$进行编写,但是使用#的效率更高,使用$方式,查看日志更方便些,尤其是当执行的sql语句非常麻烦的时候. 1) 接口 形式 以下方式 [传递参数是一个实体] public ...

  2. sql语句查询结果添加排序列（转）

      给查询出的SQL记录添加序号列,解决方法有以下两种 第一: select ROW_NUMBER() OVER (ORDER BY a.字段 ASC) AS XUHAO,a.* from table ...

  3. 什么是 kNN 算法？

    学习 machine learning 的最低要求是什么?  我发觉要求可以很低,甚至初中程度已经可以.  首先要学习一点 Python 编程,譬如这两本小孩子用的书:[1][2]便可.   数学方面 ...

  4. 《制造杀人犯／Making A Murder》中的疑点和感想

         快马加鞭,一天之内看完了完整的10集,很震撼,在案件还存在诸多疑点的情况下.在还有如此多的细节无法确定的情况下,最后由12人组成的陪审团一致通过S.A的谋杀罪成立,尽管初次投票时有7票反对. ...

  5. codeforces 721C （拓排 + DP）

    题目链接:http://codeforces.com/contest/721/problem/C 题意:从1走到n,问在时间T内最多经过多少个点,按路径顺序输出. 思路:比赛的时候只想到拓排然后就不知 ...

  6. mac编辑器快捷键（自己摸索出来的）

    control + a  行首 control + e  行尾 control + f   向右移动 control + b 向左移动 control + k   删除光标后面 cmd + delet ...

  7. 数据存储之Cookie和Web Storage。

    Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...

  8. logcat 基本使用

    adb logcat -c    //清空以前的日志 adb logcat -v time >  d:/sss.log       //将当前日志输出到d盘的sss.log中  sss.log不 ...

  9. 使用dbms_scheduler包创建定时任务

    本文使用dbms_scheduler的create_job创建执行存储过程的定时任务 创建一个job job_type指定'STORED_PROCEDURE' job_action中填入要执行的存储过 ...

  10. sql server 表中的编号自增

    http://jingyan.baidu.com/article/fec4bce244f902f2608d8b7a.html