AjaxExtJs学习笔记(21)-使用XTemplate结合WCF显示数据

私家觉得,XTemplate是ExtJs中最灵敏的用来彰显数据的零件,有点类似aspx中的Repeater控件,呈现数据的模版完全能够由用户以html形式来定制.

 

先给一个法定的静态示例(稍微改了下),代码并不复杂,关键的地点,笔者一度注释了

 1Ajax 1    <script type=”text/javascript”>
 2Ajax 2Ajax 3        Ext.onReady(function() Ajax 4{
 3Ajax 5
 4Ajax 6Ajax 7            var data = Ajax 8{
 5Ajax 9                name: ‘Jack Slocum’,
 6Ajax 10                title: ‘Lead Developer’,
 7Ajax 11                company: ‘Ext JS, LLC’,
 8Ajax 12                email: ‘jack@extjs.com’,
 9Ajax 13                address: ‘4 Red Bulls Drive’,
10Ajax 14                city: ‘Cleveland’,
11Ajax 15                state: ‘Ohio’,
12Ajax 16                zip: ‘44102’,
13Ajax 17                drinks: [‘Red Bull’, ‘Coffee’, ‘Water’],
14Ajax 18                kids: [
15Ajax 19Ajax 20    Ajax 21{ name: ‘Sara Grace’, age: 3 },
16Ajax 22Ajax 23    Ajax 24{ name: ‘Zachary’, age: 2 },
17Ajax 25Ajax 26    Ajax 27{ name: ‘John James’, age: 0 }
18Ajax 28]
19Ajax 29            };
20Ajax 30
21Ajax 31            var tpl = new Ext.XTemplate(
22Ajax 32‘<p>Name: {name}</p>’,
23Ajax 33‘<p>Title: {title}</p>’,
24Ajax 34‘<p>Company: {company}</p>’,
25Ajax 35‘<p>[Kids:] ‘,
26Ajax 36‘<tpl for=”kids”>’,//评释那里循环读取kids节的数目
27Ajax 37‘<p>  {name}</p>’,
28Ajax 38‘</tpl></p>’,
29Ajax 39‘<p>[Drinks:] ‘,
30Ajax 40‘<tpl for=”drinks”>’,
31Ajax 41‘<p>  {#}.{.}</p>’, //申明那里循环读取drinks节的多寡,当数码尚未品质名称时,用”.”代表数量
32Ajax 42‘</tpl></p>’
33Ajax 43);
34Ajax 44            tpl.overwrite(Ext.getBody(), data);
35Ajax 45
36Ajax 46        });
37Ajax 47    </script>   

 

运维结果图:
Ajax 48

 

接下去大家看看怎么样跟服务器端的WCF做交互

1.先是定义四个用来新闻传输的实体类(实际开销中,能够是任何可种类化的class,蕴含linq
to sql生成的类)

 

Code
using System.Collections.Generic;
using System.Runtime.Serialization;


namespace Ajax_WCF
{
    [DataContract]
    public class Person
    {
        [DataMember]
        public string name { set; get; }
        [DataMember]
        public string title { set; get; }
        [DataMember]
        public string company { set; get; }
        [DataMember]
        public string email { set; get; }
        [DataMember]
        public string address { set; get; }
        [DataMember]
        public string city { set; get; }
        [DataMember]
        public string state { set; get; }
        [DataMember]
        public string zip { set; get; }
        [DataMember]
        public List<AbstractData> drinks { set; get; }
        [DataMember]
        public List<KidData> kids { set; get; }
    }


    [DataContract]
    public class AbstractData
    {
        [DataMember]
        public string name { set; get; }
    }


    [DataContract]
    public class KidData : AbstractData
    {
        [DataMember]
        public int age { set; get; }
    }
}

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中扩展3个方法,代码如下:

Code
[OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetPerson", Method = "*")]
        public Person GetPerson() {
            System.Threading.Thread.Sleep(3000);//为演示loading效果,停3秒
            return new Person() {
                name = "Jack Slocum",
                title = "Lead Developer",
                company = "Ext JS, LLC",
                email = "jack@extjs.com",
                address = "4 Red Bulls Drive",
                city = "Cleveland",
                state = "Ohio",
                zip = "44102",
                drinks = new List<AbstractData> { 
                new AbstractData(){name="Red Bull"},
                new AbstractData(){name="Coffee"},
                new AbstractData(){name="Water"}
                },
                kids = new List<KidData> { 
                new KidData(){name="Red Bull",age=3},
                new KidData(){name="Coffee",age=2},
                new KidData(){name="Water",age=0}
                }
            };
        }

那里为了简单起见,直接new并开首化了2个Person对象,然后回来为JSON格式

 

3.末尾修改一下眼下静态页的代码,完整页面代码如下:

 

Code
<!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 >
    <title>XTemplate示例</title>
    <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css"/> 
    <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="js/ext2.2/ext-all.js"></script> 
    <style type="text/css">
        body{font-size:9pt;padding:20px;}
        .red{color:red;}
        h1{padding-bottom:10px;}
    </style>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function() {        

        var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Title: {title}</p>',
        '<p>Company: {company}</p>',
        '<p>[Kids:] ',
        '<tpl for="kids">',
        '<p>  {name}</p>',
        '</tpl></p>',
        '<p>[Drinks:] ',
        '<tpl for="drinks">',
        '<p>  {#}.{name}</p>', 
        '</tpl></p>'
        );

        var demo = Ext.get("demo");
        demo.dom.innerHTML = "数据加载中,请稍候";
        demo.dom.className = "red";

        Ext.Ajax.request({
            url: "MyService.svc/GetPerson",
            method: "GET",
            success: function(request) {
                demo.dom.className = "";
                var data = Ext.util.JSON.decode(request.responseText);
                tpl.overwrite("demo", data);
            },
            failure: function() {
                alert("failure!");
            }
        });       

    });
    </script>   
    <h1>XTemplate 示例</h1>
    <div id="demo" style="border:1px solid #ccc;padding:10px;width:300px"></div>
</body>


</html>

解释一下:利用ExtJs的Ajax对象,请求My瑟维斯s.svc/GetPerson方法,获取Json字符串,其它地方完全平等,要求专注的是:

a.再次回到的字符串,必要用Ext.Util.JSON.decode转换来JSON对象

b.为了显得出loading加载效果,在调用Ajax的Request在此之前,用demo.com.innerHTML和demo.com.className先把对象div设置成”加载中”的字样

运作效果如下:
Ajax 49
转发请评释来源”菩提树下的杨过”http://www.cnblogs.com/yjmyzz/archive/2008/09/09/1287767.html
Ajax 50
那回运营时,扩展了”数据加载中”的效应,加载成功后与刚刚的静态示例展现结果完全相同

 

相关文章