(二)AJAXPro之旅---构造实际的AJAX应用.
前面一篇,简单的介绍了一下AJAXpro的用法.
(代码下载:/Files/eicesoft/Test.zip)
下面我介绍一个实际的AJAX程序.详细的介绍AJAXPro在实际中的应用.这个程序是异步获取城市列表并过滤的例子.程序的界面:
数据库的结构:
首先,我们添加AJAXPro的引用,以及Web.config里的配置(前面一篇有,这篇不重复了).
然后,在Page_Load事件里添加代码:
protected void Page_Load( object sender, EventArgs e)然后在页面的class添加一个AJAXPro的Method:
{
string _SQL = " Select *from SYS_Area order by a_Orders desc " ;
DataSet _ds;
// 如果序列化缓存文件存在
if (File.Exists(Server.MapPath( " /cache/citycache.bin " )))
{
Util.FileIO < DataSet > file = new SD2007.Util.FileIO < DataSet > ();
_ds = file.Deserialize( " /cache/citycache.bin " );
Cache[ " CityCache " ] = _ds;
}
else
{
using (SqlConnection _conn = new SqlConnection(ConfigurationManager.AppSettings[ " DBConnString " ]))
{
if (_conn.State != ConnectionState.Open)
_conn.Open();
_ds = new DataSet();
SqlDataAdapter _da = new SqlDataAdapter(_SQL, _conn);
_da.Fill(_ds);
_da.Dispose();
}
Util.FileIO < DataSet > file = new SD2007.Util.FileIO < DataSet > ();
file.Serialize(_ds, " /cache/citycache.bin " ); // 序列化缓存
// 构建缓存
Cache[ " CityCache " ] = _ds;
}
AjaxPro.Utility.RegisterTypeForAjax( typeof (Test1));
}/// <summary>
/// 异步获取城市列表方法
/// </summary>
/// <param name="sName"> 查找的字符 </param>
/// <returns> 城市列表 </returns>
[AjaxPro.AjaxMethod]
public Hashtable GetCity( string sName)
{
string _SQL = string .Empty;
DataSet _ds;
if (Context.Cache.Get( " CityCache " ) != null )
{
_ds = (DataSet)Context.Cache.Get( " CityCache " );
}
else
{
// 从文件中反序列化对象
Util.FileIO < DataSet > file = new SD2007.Util.FileIO < DataSet > ();
_ds = file.Deserialize( " /cache/citycache.bin " );
Cache[ " CityCache " ] = _ds;
}
if ((sName == string .Empty) || (sName == "" )) // 没有输入数据
{
_SQL = "" ;
}
else
{
char c = sName[ 0 ]; // 取出第一个字符.判断是否为英文字母
if ((c >= ' A ' ) && (c <= ' z ' ))
{
_SQL = " a_Alias like '% " + sName + " %' " ;
}
else // 输入的是中文
{
_SQL = " a_Name like '% " + sName + " %' " ;
}
}
DataView _dv = new DataView(_ds.Tables[ 0 ]);
_dv.RowFilter = _SQL;
_dv.Sort = " a_Orders desc " ;
Hashtable dicts = new Hashtable();
for ( int i = 0 ;i < _dv.Count;i ++ )
{
dicts.Add(_dv[i].Row[ 0 ], _dv[i].Row[ 1 ]);
if (i == 10 )
break ;
}
return dicts;
}
这样,基本上服务器端的代码就写好了.
现在开始写客户端代码:
1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " Test1.aspx.cs " Inherits = " SD2007.Test.Test1 " %>
2 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head runat ="server" >
5 < style type ="text/css" >
6 * {
7 font-size : 12px ;
8 }
9 ul {
10 margin : 0px 0px 0px 0px ;
11 padding : 5px 5px 5px 5px ;
12 border : 1px #809DB9 solid ;
13 width : 220px ;
14 position : absolute ;
15 background-color : #FFFFFF ;
16 }
17 ul li {
18 background-color : #FFFFFF ;
19 height : 22px ;
20 }
21 ul li.title {
22 color : #808080 ;
23 padding-top : 4px ;
24 padding-bottom : 4px ;
25 margin-bottom : 4px ;
26 border-bottom : 1px #809DB9 dashed ;
27 }
28 ul li a {
29 display : block ;
30 text-decoration : none ;
31 padding-left : 4px ;
32 }
33 ul li a:link {
34 color : black ;
35 height : 22px ;
36 line-height : 22px ;
37 }
38 ul li a:hover {
39 color : black ;
40 background : #E5EFFC ;
41 border-top : 1px #809DB9 solid ;
42 border-bottom : 1px #809DB9 solid ;
43 height : 20px ;
44 line-height : 20px ;
45 }
46 ul li a:visited {
47 color : black ;
48 height : 22px ;
49 line-height : 22px ;
50 }
51 </ style >
52 < title > 演示 </ title >
53 </ head >
54 < body >
55 < form id ="form1" onsubmit ="return false;" runat ="server" >
56 < div >
57 城市1: < input id ="txtName" onblur ="hidepanel()" onfocus ="doAjax(this)" onkeyup ="doAjax(this)"
58 tid ="0" type ="text" />
59 城市2: < input id ="txtName2" onblur ="hidepanel()" onfocus ="doAjax(this)" onkeyup ="doAjax(this)"
60 tid ="0" type ="text" />
61 < ul id ="div1" class ="hidediv" style ="display: none;" >
62 </ ul >
63 </ div >
64 < script type ="text/javascript" >
65 var nextNode = 1 ; // 下拉列表的当前位置
66 var objecttxt; // 当前text对象
67 var olddata; // 旧的text数据
68 function $(objid)
69 {
70 return document.getElementById(objid);
71 }
72 // 隐藏图层
73 function hidepanel()
74 {
75 if (document.activeElement.mid == null )
76 {
77 var div1 = $( " div1 " );
78 div1.style.display = " none " ;
79 }
80 }
81 // 开始异步读取地区并构造下拉列表
82 function doAjax(obj)
83 {
84 objecttxt = obj;;
85 var div1 = $( " div1 " );
86 if (event.keyCode == 13 ){ // 回车符
87 if (div1.childNodes != null )
88 {
89 if (div1.childNodes.length > 0 )
90 {
91 doset(div1.childNodes[nextNode].tid,div1.childNodes[nextNode].innerText);
92 }
93 }
94 }
95 else if (event.keyCode == 27 ){ // Esc
96 div1.style.display = " none " ;
97 }
98 else if (event.keyCode == 38 ) // 向上
99 {
100 var div1 = $( " div1 " );
101 div1.childNodes[nextNode].style.backgroundColor = "" ;
102 if (nextNode == 1 )
103 {
104 nextNode = div1.childNodes.length - 1 ;
105 }
106 else
107 {
108 nextNode -- ;
109 }
110 div1.childNodes[nextNode].style.backgroundColor = " #C8E2FB " ;
111 }
112 else if (event.keyCode == 40 ) // 向下
113 {
114 var div1 = $( " div1 " );
115 div1.childNodes[nextNode].style.backgroundColor = "" ;
116 if (nextNode == div1.childNodes.length - 1 )
117 {
118 nextNode = 1 ;
119 }
120 else
121 {
122 nextNode ++ ;
123 }
124 div1.childNodes[nextNode].style.backgroundColor = " #C8E2FB " ;
125 }
126 else
127 {
128 nextNode = 1 ;
129 var t = objecttxt.offsetTop;
130 var l = objecttxt.offsetLeft;
131 div1.style.top = t + 37 ;
132 div1.style.left = l + 10 ;
133 if (olddata != objecttxt.value)
134 { // 注册AJAXPro方法
135 SD2007.Test.Test1.GetCity(objecttxt.value,doAjaxCallback);
136 olddata = objecttxt.value;
137 }
138 else
139 {
140 div1.style.display = "" ;
141 }
142 }
143 }
144 // 异步回调事件
145 function doAjaxCallback(req)
146 {
147 var div1 = $( " div1 " );
148 div1.innerHTML = "" ;
149 if (req.value != null )
150 {
151 if (req.value.length > 0 ) // ²
152 {
153 div1.style.display = "" ;
154 try
155 {
156 var li = document.createElement( " li " );
157 li.className = " title " ;
158 if (objecttxt.value == "" )
159 {
160 li.innerHTML = " 请输入拼音或者中文地名: " ;
161 }
162 else
163 {
164 li.innerHTML = objecttxt.value + " ,请输入拼音或者中文地名: " ;
165 }
166 li.mid = " div1 " ;
167 div1.appendChild(li);
168 for ( var i = 0 ;i < req.value.length;i ++ )
169 {
170 var li = document.createElement( " li " );
171 li.id = " l " + req.value[i][ 0 ];
172 if (i == 0 )
173 {
174 li.style.backgroundColor = " #C8E2FB " ;
175 }
176 li.innerHTML = " <a mid=\ " div1\ " href=\ " javascript:doset(' " +
177 req.value[i][0]+ " ',' " +req.value[i][1]+
178 " ')\ " > " + req.value[i][ 1 ] + " </a> " ;
179 div1.appendChild(li);
180 }
181 }
182 catch (e){}
183 }
184 else {
185 div1.style.display = " none " ;
186 }
187 }
188 else {
189 div1.style.display = " none " ;
190 }
191 }
192 // 设置text属性
193 function doset(id,str) {
194 objecttxt.tid = id;
195 objecttxt.value = str;
196 var div1 = $( " div1 " );
197 div1.style.display = " none " ;
198 }
199 </ script >
200 </ form >
201 </ body >
202 </ html >
203
这样,这个程序就写好了.感觉不错吧.这个程序的原型是携程旅游网的,但这个是我自己写的.脚本上也许有错误,但是基本
的功能都OK了.
补上代码下载:/Files/eicesoft/Test.zip
下篇介绍:(三)AJAXPro之旅---原理的探究