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. NSOperation实现线程间通信

    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { //1.创建队列 NSOperat ...

  2. SIP模块版本错误问题：the sip module implements API v??? but XXX module requires API v???

    系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...

  3. js参数传递分析

    需要明白,js基本类型存放在栈,对象存放在堆. 结论:基本类型变量作为参数,不会改变变量值.对象变量作为参数,不修改属性(访问原始对象的操作),也不会改变变量值 起因,是群里一个问题: var a = ...

  4. SlickUpload 发布到IIS后报错

    开发时候采用slickupload控件都没问题,项目发布到IIS时发生了错误: Could not contact SlickUpload request progress handler at /S ...

  5. 使用sublime编写c/c++ 总结

    大块头IDE Visual studio太大了,记事本也能写代码但无疑是装逼过分了.写一些轻量级的c/c++代码使用sublime来写是个很好的选择. 三步走: 编译器(win下安装了vs就使用cl, ...

  6. js对象详解

    js自定义对象 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在J ...

  7. 腾讯优测优分享 | Android性能测试工具化实现

    腾讯优测专业的移动云测试平台,自动化测试提供性能测试数据,云真机实时输出性能数据,让测试更简单! 1.Android性能测试介绍 提到Android性能测试,我们总免不了俗地要首先介绍下Android ...

  8. ARP 扫描主机学习笔记

    1.通用套接字地址结构与具体套接字地址结构之间可相互转化 1)通用转具体,某些函数将结果存储在通用套接字地址结构中,这时将通用转换为具体,具体通过访问成员名可以方便的得到结果. 2)具体转通用,为了消 ...

  9. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

  10. 通过js的console优雅的将php调试信息输出

    function consoleLog($val){ $debug = debug_backtrace(); unset($debug[0]['args']); echo '<script> ...