推荐设备MORE

SaaS企业网站建设软件—陕西网

SaaS企业网站建设软件—陕西网

行业知识

ajax相互配合art

日期:2021-02-18
我要分享
ajax相互配合art-template模版模块的应用,
关注度4 评价 272  网民共享于:  :58 访问数27313次

ajax相互配合art-template模版模块的应用,

近期才触碰js的模版模块听闻对比之前应用的js foreach载入后台管理回到的json数据信息简单许多并且高效率层面也很非常好。今日自身玩了一下

< mvc,数据信息库脚本制作也不出示了,回到的JsonResult,将数据信息储放在data中,前台接待根据ajax相互配合模版模块开展一个启用随后以报表的方式显示信息数据信息。

前台接待html编码:

 a href="#" 获得数据信息 /a 
 table 
 td 名字 /td 
 td 年纪 /td 
 td 表明 /td 
 /tr 
 tbody id="tb" 
 /tbody 
 /table 

关键来讲说这儿:

最先第一步:载入art-template.js的文档

第二步:界定模版模块并在里边开展数据信息的载入吧(本人了解),在网络上也找了一下材料,说script type的值不可以是text/script,要不然会导致没法分析。换句话说除开text/script应当都可以以,这儿我用的是text/template(谅解我不会去百度知道)。

第三步:便是解决恳求回家的数据信息如何显示信息了,先看来看ajax恳求取得成功后我立即将data储放在template做为第二个主要参数,第一个主要参数相匹配界定模版模块的id根据最终var去接受。完后之后便是在模版模块中开展3D渲染,这儿根据each data,它是一种规范英语的语法吧,就行比以前根据模版标识符串拼凑的一个升級版,自然将会益处大量。data便是后台管理回到回家的json数据信息,

根据{{$(value)}}的方法去取得相匹配的数据信息,那样来看比之前foreach循环系统随后拼凑标识符串确实好过多,中后期维护保养也较为好。

 script src="~/resources/art-template.js" /script 
 script type="text/template" id="tbdata" 
 {{each data}}
 td {{$value.Name}} /td 
 td {{$value.Age}} /td 
 td {{$value.Desc}} /td 
 /tr 
 {{/each}}
 /script 
 script 
 function GetData() {
 $.ajax({
 type: "post",
 url: "/Test/Index",
 data: {},
 success: function (data) {
 var result = template('tbdata', data);
 $("#(result);
 /script 

后台管理编码:这儿根据ef从数据信息库载入数据信息

public class TestController : Controller
 testDBEntities db=new testDBEntities();
 // GET: Test
 [HttpPost]
 public JsonResult Index()
 var datas = db.Tests.ToList();
 return Json(new { data = datas });
 }

最终的显示信息实际效果:

第一次玩模版模块,期待之后会出现大量的了解。

dengb.TechArticleajax相互配合art-template模版模块的应用, 近期才触碰js的模版模块听闻对比之前应用的js foreach载入后台管理回到的json数据信息简单许多并且高效率层面也很...