第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

ExtJs-使用XTemplate結(jié)合WCF顯示數(shù)據(jù)

標(biāo)簽:
前端工具

个人认为,XTemplate是ExtJs中最灵活的用来显示数据的组件,有点类似aspx中的Repeater控件,显示数据的模板完全可以由用户以html方式来定制.

 

先给一个官方的静态示例(稍微改了下),代码并不复杂,关键的地方,我已经注释了


 1    <script type="text/javascript">
 2        Ext.onReady(function() {
 3
 4            var data = {
 5                name: 'Jack Slocum',
 6                title: 'Lead Developer',
 7                company: 'Ext JS, LLC',
 8                email: 'jack@extjs.com',
 9                address: '4 Red Bulls Drive',
10                city: 'Cleveland',
11                state: 'Ohio',
12                zip: '44102',
13                drinks: ['Red Bull', 'Coffee', 'Water'],
14                kids: [
15    { name: 'Sara Grace', age: 3 },
16    { name: 'Zachary', age: 2 },
17    { name: 'John James', age: 0 }
18]
19            }
;
20
21            var tpl = new Ext.XTemplate(
22'<p>Name: {name}</p>',
23'<p>Title: {title}</p>',
24'<p>Company: {company}</p>',
25'<p>[Kids:] ',
26'<tpl for="kids">',//表明这里循环读取kids节的数据
27'<p>  {name}</p>',
28'</tpl></p>',
29'<p>[Drinks:] ',
30'<tpl for="drinks">',
31'<p>  {#}.{.}</p>', //表明这里循环读取drinks节的数据,当数据没有属性名称时,用"."代表数据
32'</tpl></p>'
33);
34            tpl.overwrite(Ext.getBody(), data);
35
36        }
);
37    </script>   

 

运行结果图:

 

接下来我们看看如何跟服务器端的WCF做交互

1.首先定义一个用于信息传输的实体类(实际开发中,可以是任何可序列化的class,包括linq to sql生成的类)

 

[object Object][object Object]


2.新建一个"启用了Ajax的WCF服务"
a.同时将svc手动修改一下,注意下面的高亮部分要手动加上去:

<%@ ServiceHost Language="C#" Debug="true" Service="Ajax_WCF.MyService" CodeBehind="MyService.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory"%>
b.web.config中,也参考下面修改
 <behavior name="Ajax_WCF.MyServiceAspNetAjaxBehavior">
      <webHttp />
      <!--<enableWebScript/>-->
    </behavior>

c.在wcf中增加一个方法,代码如下:

[object Object][object Object]

这里为了简单起见,直接new并初始化了一个Person对象,然后返回为JSON格式

 

3.最后修改一下前面静态页的代码,完整页面代码如下:

 

[object Object][object Object]

解释一下:利用ExtJs的Ajax对象,请求MyServices.svc/GetPerson方法,获取Json字符串,其它地方完全一样,需要注意的是:

a.返回的字符串,需要用Ext.Util.JSON.decode转换成JSON对象

b.为了显示出loading加载效果,在调用Ajax的Request之前,用demo.com.innerHTML和demo.com.className先把目标div设置成"加载中"的字样


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消