Twitter
新浪微博
RSS订阅前面一篇,简单的介绍了一下AJAXpro的用法.
下面我介绍一个实际的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;
}
这样,基本上服务器端的代码就写好了.
现在开始写客户端代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="SD2007.Test.Test1" %>
<!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 runat="server">
<style type="text/css">
*{
font-size:12px;
}
ul{
margin:0px 0px 0px 0px;
padding:5px 5px 5px 5px;
border:1px #809DB9 solid;
width:220px;
position: absolute;
background-color:#FFFFFF;
}
ul li{
18 background-color:#FFFFFF;
height:22px;
}
ul li.title{
color:#808080;
padding-top:4px;
padding-bottom:4px;
margin-bottom:4px;
border-bottom:1px #809DB9 dashed;
}
ul li a{
display:block;
text-decoration:none;
padding-left:4px;
}
ul li a:link{
color:black;
height:22px;
line-height:22px;
}
ul li a:hover{
color:black;
background:#E5EFFC;
border-top:1px #809DB9 solid;
border-bottom:1px #809DB9 solid;
height:20px;
line-height:20px;
}
ul li a:visited{
color:black;
height:22px;
line-height:22px;
}
</style>
<title>演示</title>
</head>
<body>
<form id="form1" onsubmit="return false;" runat="server">
<div>
城市1: <input id="txtName" onblur="hidepanel()" onfocus="doAjax(this)" onkeyup="doAjax(this)"
tid="0" type="text" />
城市2: <input id="txtName2" onblur="hidepanel()" onfocus="doAjax(this)" onkeyup="doAjax(this)"
tid="0" type="text" />
<ul id="div1" class="hidediv" style="display: none;">
</ul>
</div>
<script type="text/javascript">
var nextNode=1; //下拉列表的当前位置
var objecttxt; //当前text对象
var olddata; //旧的text数据
function $(objid)
{
return document.getElementById(objid);
}
//隐藏图层
function hidepanel()
{
if(document.activeElement.mid==null)
{
var div1=$("div1");
div1.style.display="none";
}
}
//开始异步读取地区并构造下拉列表
function doAjax(obj)
{
objecttxt=obj;;
var div1=$("div1");
if(event.keyCode==13){ //回车符
if (div1.childNodes!=null)
{
if(div1.childNodes.length>0)
{
doset(div1.childNodes[nextNode].tid,div1.childNodes[nextNode].innerText);
}
}
}
else if(event.keyCode==27){ //Esc
div1.style.display="none";
}
else if(event.keyCode==38) //向上
{
var div1=$("div1");
div1.childNodes[nextNode].style.backgroundColor="";
if(nextNode==1)
{
nextNode=div1.childNodes.length-1;
}
else
{
nextNode--;
}
div1.childNodes[nextNode].style.backgroundColor="#C8E2FB";
}
else if (event.keyCode==40) //向下
{
var div1=$("div1");
div1.childNodes[nextNode].style.backgroundColor="";
if(nextNode==div1.childNodes.length-1)
{
nextNode=1;
}
else
{
nextNode++;
}
div1.childNodes[nextNode].style.backgroundColor="#C8E2FB";
}
else
{
nextNode=1;
var t=objecttxt.offsetTop;
var l=objecttxt.offsetLeft;
div1.style.top=t+37;
div1.style.left=l+10;
if(olddata!=objecttxt.value)
{ //注册AJAXPro方法
SD2007.Test.Test1.GetCity(objecttxt.value,doAjaxCallback);
olddata=objecttxt.value;
}
else
{
div1.style.display="";
}
}
}
//异步回调事件
function doAjaxCallback(req)
{
var div1=$("div1");
div1.innerHTML="";
if (req.value!=null)
{
if(req.value.length>0) //²
{
div1.style.display="";
try
{
var li=document.createElement("li");
li.className="title";
if(objecttxt.value=="")
{
li.innerHTML="请输入拼音或者中文地名:";
}
else
{
li.innerHTML=objecttxt.value+",请输入拼音或者中文地名:";
}
li.mid="div1";
div1.appendChild(li);
for(var i=0;i<req.value.length;i++)
{
var li=document.createElement("li");
li.id="l"+req.value[i][0];
if(i==0)
{
li.style.backgroundColor="#C8E2FB";
}
li.innerHTML="<a mid="div1" href="javascript:doset('"+
req.value[i][0]+"','"+req.value[i][1]+
"')">"+req.value[i][1]+"</a>";
div1.appendChild(li);
}
}
catch (e){}
}
else {
div1.style.display="none";
}
}
else {
div1.style.display="none";
}
}
//设置text属性
function doset(id,str) {
objecttxt.tid=id;
objecttxt.value=str;
var div1=$("div1");
div1.style.display="none";
}
</script>
</form>
</body>
</html>
这样,这个程序就写好了.感觉不错吧.这个程序的原型是携程旅游网的,但这个是我自己写的.脚本上也许有错误,但是基本
的功能都OK了.
点击下载此文件
