1. <legend id="z1ta0"></legend>

          <label id="z1ta0"></label>

          <label id="z1ta0"></label>

            <big id="z1ta0"></big>

            使用XTemplate結合WCF顯示數據

            小編:管理員 241閱讀 2022.09.07

            個人認為,XTemplate是ExtJs中最靈活的用來顯示數據的組件,有點類似aspx中的Repeater控件,顯示數據的模板完全可以由用戶以html方式來定制.

            先給一個官方的靜態示例(稍微改了下),代碼并不復雜,關鍵的地方,我已經注釋了

            <script type="text/javascript">
                   Ext.onReady(function() {
                        var data = {
                           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: ['Red Bull', 'Coffee', 'Water'],
                           kids: [
               { name: 'Sara Grace', age: 3 },
               { name: 'Zachary', age: 2 },
               { name: 'John James', age: 0 }
            ]
                       };
                       var tpl = new Ext.XTemplate(
            '<p>Name: {name}</p>',
            '<p>Title: {title}</p>',
            '<p>Company: {company}</p>',
            '<p>[Kids:] ',
            '<tpl for="kids">',//表明這里循環讀取kids節的數據
            '<p>  {name}</p>',
            '</tpl></p>',
            '<p>[Drinks:] ',
            '<tpl for="drinks">',
            '<p>  {#}.{.}</p>', //表明這里循環讀取drinks節的數據,當數據沒有屬性名稱時,用"."代表數據
            '</tpl></p>'
            );
                       tpl.overwrite(Ext.getBody(), data);
                    });
               </script>
            復制

            運行結果圖:

            接下來我們看看如何跟服務器端的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中增加一個方法,代碼如下:

            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并初始化了一個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對象,請求MyServices.svc/GetPerson方法,獲取Json字符串,其它地方完全一樣,需要注意的是:

            a.返回的字符串,需要用Ext.Util.JSON.decode轉換成JSON對象

            b.為了顯示出loading加載效果,在調用Ajax的Request之前,用demo.com.innerHTML和demo.com.className先把目標div設置成"加載中"的字樣 運行效果如下:

            這回運行時,增加了"數據加載中"的效果,加載成功后與剛才的靜態示例顯示結果完全相同

            關聯標簽: