使用XTemplate結合WCF顯示數據
小編:管理員 142閱讀 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做交互
１.首先定義一個用于信息傳輸的實體類(實際開發中，可以是任何可序列化的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設置成"加載中"的字樣 運行效果如下：
這回運行時，增加了"數據加載中"的效果，加載成功后與剛才的靜態示例顯示結果完全相同
相關推薦
- ExtJs七(ExtJs Mvc創建ViewPort) 前言在4.1的時候，要先創建一個擴展于Ext.app.Application的類，然后用create創建它的實例來開始應用程序的。而在4.1.1，則可直接調用application方法開始執行應用程序，簡化了。調用application方法，其參數是一個配置對象，主要配置項有以下三個：name：用來…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…
粵公網安備 44010402000066號