前面一篇,简单的介绍了一下AJAXpro的用法.
(代码下载:/Files/eicesoft/Test.zip)
下面我介绍一个实际的AJAX程序.详细的介绍AJAXPro在实际中的应用.这个程序是异步获取城市列表并过滤的例子.程序的界面:
数据库的结构:
首先,我们添加AJAXPro的引用,以及Web.config里的配置(前面一篇有,这篇不重复了).
然后,在Page_Load事件里添加代码:
protected void Page_Load(object sender, EventArgs e)
{
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));
}
然后在页面的class添加一个AJAXPro的Method:
/// <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==color: #000000; background-col
分享到：
相关推荐
AjaxPro.2.dll AjaxPro.dll Ajax.dll AjaxPro.JSON.dll AjaxPro.JSON.2.dll
Ajax所有DLL，包括Ajax.dll/AjaxPro.dll/AjaxPro.JSON.2.dll/AjaxPro.2.dll/AjaxPro.JSON.dll
ajaxpro也就是AJAX.NET (Professional), 它是ASP.NET平台上著名的AJAX框架，诞生于2005年2月（虽然正式命名为AJAX.NET则是在两个月之后），作者为Michael Schwarz。同年10月，Michael为AJAX.NET提供了更丰富的功能...
AjaxPro.2.dll,AjaxPro.2简单易懂例子 前台利用js调用后台方法
AjaxPro使用说明 - lexus - 博客园 Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的...
AJAX安装包 AjaxPro AjaxPro.dll AjaxPro.2 AjaxPro.2.dll
ajax技术要用的到包 有三个版本ajax.dll ajaxpro.dll ajaxpro2.dll
Ajax动态连接库： Ajax.dll AjaxPro2.dll AjaxControlToolkit.dll
AjaxPro.dll AjaxPro.2.dll Excel.dll
ajaxpro.2.dll用法 ajax使用案例 附说明 资源分虽然有点高，不过一定让您觉得值！
AJAX.DLL_AJAXPRO.DLL等各個版本
AjaxPro.dll,Ajax.dll,AjaxPro
无刷新联动,多级联动,全国省市区县镇街道数据库,省市区县镇街道数据库,ajaxpro.2.dll应用
AjaxPro.2.dll使用的一个例子
ajaxpro.2.dll 简单应用,ajaxpro.2.dll,无刷新
Ajaxpro.dll Ajaxpro.dll
asp.net C#中 AjaxPro.2.dll的使用 内附 1. AjaxPro.2.dll 2. AjaxPro.2.dll详细的使用方法
AjaxPro.2.DLL/AjaxPro.2.DLL/AjaxPro.2.DLL
ajax 不同版本.AjaxPro.2.dll 6.7.11.1 AjaxPro.2.dll 6.9.27.3
//ajaxpro.2框架 //web.config配置,在<system.web>节点下添加 *" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> //页面加载时注册ajaxpro.2,_Default为页面的类 protected void Page_Load...