asp.net使用jquery模板引擎jtemplates呈现表格

在Asp.net MVC 中，使得我们能够更加自由控制我们所想显示HTML。通常情况下，都要做一下数据列表。那么我们可以手动去拼一个表格出来，但这样有时对于复杂的表格说，那就JS代码比较复杂了。我们可以借助JS下的模板引擎，来实现这一功能。下面要介绍就是JTemplates，它也是基于Jquery的。


代码如下:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/default.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-jtemplates.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
url: '<%=Url.Action("TempleteData", "Home") %>',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//instantiate a template with data
ApplyTemplate(msg);

}
});
});
function ApplyTemplate(msg) {
$('#Container').setTemplate($("#TemplateResultsTable").html());
$('#Container').processTemplate(msg);
} 
</script>

</head>
<body>
<div id="Container"> </div>
<%-- Results Table Template --%>
<script type="text/html" id="TemplateResultsTable"> 
{#template MAIN} 
<table  cellpadding="10" cellspacing="0"> 
 <tr> 
<th>Username</th> 
<th>Password</th> 
<th>Url</th> 
<th>Email</th> 
<th>PassportID</th> 
</tr>
{#foreach$Tasuu}
{#includeROWroot=$T.uu}
{#/for}
</table>
{#/templateMAIN}
{#templateROW}
<trclass="{#cyclevalues=['','evenRow']}">
<td>{$T.UserName.bold()}</td>
<td>{$T.Password}</td>
<td>{$T.Url.link($T.Url)}</td>
<td>{$T.Email.link('mailto:'+$T.Email)}</td>
<td>{$T.PassportID}</td>
</tr>
{#/templateROW}
</script>
</body>
</html>

通过ajax返回json数据，setTemplate根据Id设置模板，然后ApplyTemplate就可以了。
CS代码:


代码如下:

///<summary>
///Templetesthedata.
///</summary>
///<returns></returns>
publicJsonResultTempleteData()
{
IList<UserEntity>userlist=newList<UserEntity>()
{
newUserEntity(){UserName="Tina",PassportID=23433,Email="asdfa@asdf.com",Password="NKASD",Url="http://www.gefds.cn"}
,newUserEntity(){UserName="Lucy",PassportID=3444,Email="2v2@asdf.com",Password="v23sda",Url="http://www.qqfsad.cn"}
};
returnJson(userlist);
}

赞 (0)

相关推荐

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • 详解ajax +jtemplate实现动态分页

    jtemplate是一个基于JQuery的模板引擎插件,功能非常强大,有了她你就再不用为使用JS绑定数据集而发愁了. 主要思路,复制textarea作为模板,ajax加载json数据,添加模板,绑定数据,更新加载更多事件. //加载更多 function fnLoad(data){ listData.Ajax.data.target_page=parseInt(data.currentPage)+1; function addmore(){ listData.Ajax.load(); } //动

  • 使用PHP+JQuery+Ajax分页的实现

    使用PHP+JQuery+Ajax分页的实现

    为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() {               //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码            $initial = htmlenti

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • ajax完美实现两个网页 分页功能的实例代码

    分页的首页 复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf8" /><h1 align="center">武侠小说分页</h><br/><script src="jquery-1.4.2.min.js"></script><script>var

  • php+ajax实现无刷新分页的方法

    本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` (   `id` int(10) NOT NULL auto_increment,   `username` varcha

  • asp.net使用jquery模板引擎jtemplates呈现表格

    在Asp.net MVC 中,使得我们能够更加自由控制我们所想显示HTML.通常情况下,都要做一下数据列表.那么我们可以手动去拼一个表格出来,但这样有时对于复杂的表格说,那就JS代码比较复杂了.我们可以借助JS下的模板引擎,来实现这一功能.下面要介绍就是JTemplates,它也是基于Jquery的. 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!D

  • ASP.NET Razor模板引擎中输出Html的两种方式

    本文实例讲述了ASP.NET Razor模板引擎中输出Html的两种方式.分享给大家供大家参考,具体如下: Razor中所有的Html都会自动编码,这样就不需要我们手动去编码了(安全),但在需要输出Html时就是已经转义过的Html文本了,如下所示: @{ string thisTest = "<span style=\"color:#f00;\">qubernet</span>"; } @thisTest; 这样在页面输出的文本就是:<

  • asp.net模板引擎Razor调用外部方法用法实例

    本文实例讲述了asp.net模板引擎Razor调用外部方法用法.分享给大家供大家参考.具体如下: 首先使用Razor的步骤:读取cshtml.解析cshtml同时指定cacheName. 而这个步骤是重复的,为了遵循DRY原则,将这段代码封装为一个RazorHelper()方法 public class RazorHelper { public static string ParseRazor(HttpContext context, string csHtmlVirtualPath, obje

  • asp.net实现在非MVC中使用Razor模板引擎的方法

    asp.net实现在非MVC中使用Razor模板引擎的方法

    本文实例讲述了asp.net实现在非MVC中使用Razor模板引擎的方法.分享给大家供大家参考.具体分析如下: 模板引擎介绍 Razor.Nvelocity.Vtemplate,Razor一般在MVC项目中使用,这里介绍在非MVC项目中的用法. 如何在非MVC中使用Razor模板引擎 借助于开源的RazorEngine,我们可以在非asp.net mvc项目中使用Razor引擎,甚至在控制台.WinForm项目中都可以使用Razor(自己开发代码生成器) 如何使用Razor 环境搭建: ① 添加

  • asp.net模板引擎Razor中cacheName的问题分析

    本文实例讲述了asp.net模板引擎Razor中cacheName的问题.分享给大家供大家参考.具体如下: 一.为什么使用cacheName 使用cacheName主要是考虑到Razor.Parse()每解析一次都会动态创建一个程序集,如果解析量很大,就会产生很多程序集,大量的程序集调用会造成程序非常慢. 举个例子: 如果编译1000次,编译速度就会很慢. static void Main(string[] args) { string cshtml = File.ReadAllText(@"E

  • asp模板引擎终结者(WEB开发之ASP模式)

    asp模板引擎终结者(WEB开发之ASP模式)

    阐述一种全新的ASP模板引擎,实现代码(逻辑)层与HTML(表现)层的分离.这种模板实现方法避免了一 般ASP模板加载模板文件(加载组件)和替换所浪费的资源,实现编译型的模板引擎,提高程序的执行速度和稳定性. 内容:        当前,WEB开发已经变得非常火爆,因为各种应用,已经约来越要求表现层和逻辑层的分离.ASP和HTML夹在一起程序将变得难于维护,可读性也差.在PHP领域,模板引擎已经非常普遍,如phplib,SMARTY,等等.有使用替换方式的,也有编译方式的(SMARTY),它们都

  • jQuery模板技术和数据绑定实现代码

    jQuery模板技术和数据绑定实现代码

    好消息来了,微软开发出了这样的框架,这是对jQuery的一个扩展,从此以后要在浏览器上动态显示服务器端Web Service返回的数据将变得如同用服务器端控件显示数据一样容易. 这个技术就叫jQuery templates and data linking ,这是微软对jQuery做的一个扩展.这种扩展需要jQuery官方的审核,然后才能被包含在jQuery中.据ScottGu的博客上说,此扩展正在等待审核阶段.但是这些功能却是非常强大而且实用,我就先把它转过来了,先睹为快. 在编写AJAX应用

  • [PHP]模板引擎Smarty深入浅出介绍

    [PHP]模板引擎Smarty深入浅出介绍

    Smarty介绍 什么是模版引擎 不知道从什么时候开始,有人开始对 HTML 内嵌入 Server Script 觉得不太满意.然而不论是微软的 ASP 或是开放源码的 PHP,都是属于内嵌 Server Script 的网页伺服端语言.因此也就有人想到,如果能把程序应用逻辑 (或称商业应用逻辑) 与网页呈现 (Layout) 逻辑分离的话,是不是会比较好呢? 其实这个问题早就存在已久,从交互式网页开始风行时,不论是 ASP 或是 PHP 的使用者都是身兼程序开发者与视觉设计师两种身份.可是通常

  • laytpl 精致巧妙的JavaScript模板引擎

    laytpl 精致巧妙的JavaScript模板引擎

    laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还

  • Node.js的Web模板引擎ejs的入门使用教程

    Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用 JS 调用的方法主要有两个: ejs.compile(str, options); //

随机推荐