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. php正则，删除字符串中的中英文标点符号

    原理很简单,正则查找字符串,然后替换 英文标点符号,正则中有专用的模式来匹配.中文则需要一一列举 代码: <?php $str = "!@#$%^&*(中'文::﹑•中'文中' ...

  2. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  3. Magento显示多货币，Magento 多货币设置

    System - Configuration - Currency Setup 在右边Currency Options里的Allowed currencies勾选, 然后 System - Manag ...

  4. Outline of Apache Jena Notes

    1 description 这篇是语义网应用框架Apache Jena学习记录的索引. 初始动机见Apache Jena - A Bootstrap 2 Content 内容组织基本上遵循Jena首页 ...

  5. metagenome 简介

    宏基因组 ( Metagenome)(也称微生物环境基因组 Microbial Environmental Genome, 或元基因组) .是由 Handelsman 等 1998 年提出的新名词, ...

  6. JS对象实现随机满天小星星实例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 【转】rollup、cub、grouping sets、grouping、grouping_id在报表中的应用

    摘自 http://blog.itpub.net/26977915/viewspace-734114/ 在报表语句中经常要使用各种分组汇总,rollup和cube就是常用的分组汇总方式. 第一:gro ...

  8. kernel/vsprintf.c

    /* *  linux/kernel/vsprintf.c * *  Copyright (C) 1991, 1992  Linus Torvalds */ /* vsprintf.c -- Lars ...

  9. System.Linq.Enumerable 中的方法 Aggregate 函数

      语法: public static TSource Aggregate<TSource>( this IEnumerable<TSource> source, Func&l ...

  10. Windows环境下安装pip，方便你的开发

    1.在以下地址下载最新的PIP安装文件:http://pypi.python.org/pypi/pip#downloads 2.解压安装 3.下载Windows的easy installer,然后安装 ...