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. 哈希（Hash）与加密（Encrypt）相关内容

    1.哈希(Hash)与加密(Encrypt)的区别 哈希(Hash)是将目标文本转换成具有相同长度的.不可逆的杂凑字符串(或叫做消息摘要),而加密(Encrypt)是将目标文本转换成具有不同长度的.可 ...

  2. （转载）android炫酷实用的开源框架（UI框架）

    可以实现一些场常用炫酷效果,包含android-lockpattern(图案密码解锁).Titanic(可以显示水位上升下降的TextView).Pull-to-Refresh.Rentals-And ...

  3. Uncaught ReferenceError: WebForm_DoPostBackWithOptions is not defined

    环境:Asp.Net网站,Framework版本4.0,IIS版本7.0问题:按钮失效,下面是按钮代码: <a id="dnn_ctr1161_Login_Login_DNN_cmdL ...

  4. PHP生成二维码图片

    下载二维码文件:http://files.cnblogs.com/isboy/qr_code.zip 需要加入的HTML:<img id="js_pc_qr_code_img" ...

  5. WPF（WP7、WP8）多个Listbox嵌套时滚动问题的解决

    内部的ListBox加属性 ScrollViewer.VerticalScrollBarVisibility="Disabled" 即可 如果不需要滚动,可以考虑嵌套换成 Item ...

  6. 第七章 LED 将为我闪烁：控制发光二级管

    在上一章中了解到驱动程序的开发步骤,并一个实列来演示如何开发一个完整的驱动.但这个驱动只是简单的演示了实现步骤.真正的驱动需要与硬件直接进行相互交互.这节完整的演示驱动程序,控制开发板上的4个led灯 ...

  7. JAVA Web day01--- Android小白的第一天学习笔记

    HTML 1.HTML的概述 1.1.HTML简介 l HTML(Hyper Text Markup Language):超文本标记语言. >标记就是标签 >HTML不是一种编程语言,而是 ...

  8. 1.Basic Techniques and Knowledge

    1.1 BASIC WINDOWS PROGRAMMING IN C/C++ 1.Hello World Version 1:Starting Your Browser Let's get down ...

  9. 去除手机浏览器input焦点默认边框（直接用outline:none就可以了）

    1.使用Chrome的都知道,当鼠标焦点在input.textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,out ...

  10. PHP构造方法

    构造方法 1.(特殊)对象创建完成后第一个自动调用的方法: 2.(特殊)方法名比较特殊,方法名可以与类相同: 3.给对象中的成员赋初始值: class boyfriend{ public $name; ...