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. 本地测试AJAX请求

    要在本地测试AJAX,首先是环境的搭建,因为XHR对象的open方法中参数url是指文件在服务器上的文件.下面以WampServer为例. 1. 下载wamp的安装包,下载地址为:http://221 ...

  2. google你懂得

    地址 https://github.com/racaljk/hosts

  3. WebStorm里面配置运行React Native的方案

    以前开发react native项目总是需要打开WebStorm编写代码,Xcode跑项目.显得有点多余. 今天教大家如何直接使用WebStorm这个IDE直接完成编码+运行项目工作.这样就可以不用打 ...

  4. HBASE学习笔记－初步印象

    HBASE概念: HBASE是一个分布式架构的数据库,通过对数据进行多层的分块打散储存.从而改写传统数据库的储存能力和读取速度. HBASE的集群服务器: HBASE的集群主要分为Zookeeper集 ...

  5. 用python+selenium抓取豆瓣电影中的正在热映前12部电影并按评分排序

    抓取豆瓣电影(http://movie.douban.com/nowplaying/chengdu/)中的正在热映前12部电影,并按照评分排序,保存至txt文件 #coding=utf-8 from ...

  6. java一行一行写入或读取数据

    原文:http://www.cnblogs.com/linjiqin/archive/2011/03/23/1992250.html 假如E:/phsftp/evdokey目录下有个evdokey_2 ...

  7. struts2 数据校验

    通过struts2中延续自xwork框架的validation.xml配置方式进行数据校验,因struts2 下存在三种请求参数的注入方式,固按照不同注入方式对validation.xml的配置进行总 ...

  8. jenkins 中 Poll SCM 和 Build periodically 的区别

    Build periodically 定时触发构建任务,不管远程代码分支上的代码是否发生变化,都执行一次构建. 示例:H 2 * * * 每天两点定时执行构建. Poll SCM:定时感知代码分支是否 ...

  9. Oracle cmd 导出数据库或者表定义或者纯数据

    实例: expdp zypacs/Sfx371482@zyrisdb schemas=ZYPACS content=metadata_only CONTENT={ALL | DATA_ONLY | M ...

  10. 破解版windows 7(旗舰版)下安装并使用vagrant统一开发环境

    参考百度经验:http://jingyan.baidu.com/article/5553fa82c158bb65a23934be.html,事先对win7进行破解后的三个文件进行还原,否则会导致vir ...