用asp.net开发Ajax有两种主流,一种是微软推出的技术,其中一个最常用的就是UpdatePanel控件,还有一种是AjaxPro技术。
这种技术有着各自的特点。采用微软的技术开发也沿用了微软一贯的简单化、傻瓜化的特点,开发简单Ajax程序几乎不需要了解任何网页脚本知识和XHTML知识,缺点也有一些,通常会带来一些不必要的网络流量(整个UpdatePanel控件内所有的控件内容都会提交),另外在VS2005下经常会出现“***不是已知元素 原因可能是网站中存在编译错误 ”的提示,虽然有治标不治本的办法(见拙作:***不是已知元素 原因可能是网站中存在编译错误中提到的解决办法),但是经常出现这种提示,也够让人心烦的。
而AjaxPro的起点较高,需要开发人员孰知Js脚本知识和XHTML相关知识,因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点,调试也会困难一点(JS调试就是麻烦)。
网上有不少讲述怎么使用AjaxPro调用服务器端方法的例子,我大概看了一下,估计只有一个原本,然后被Copy了N遍,所以到处都是,可惜的是那篇文章里没有降到如何把客户端的数据传送到服务器,比如我想在用户注册时那个用户名是否被注册了,怎么办?
查看了网上雷同的N篇文章之后没有找到答案,后来自己琢磨了很久,才琢磨出来,下面展示一下用法。
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Test.aspx.cs"Inherits="Test"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DtdXHTML1.0Transitional//EN""http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>用户注册</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<tablewidth="95%"border="0"align="center"cellpadding="3"cellspacing="1"bordercolor="#FFFFFF"style="border-collapse:collapse">
<tralign="center">
<tdheight="20"colspan="2"> </td>
</tr>
<trclass="tdbg">
<tdwidth="50%"><b>用户名:</b><BR>
不能超过14个字符(7个汉字)</td>
<tdwidth="50%"align="left">
<asp:TextBoxID="txtUserName"runat="server"CssClass="input"Columns="30"MaxLength="14"onblur="javascript:checkName();void(0);"></asp:TextBox><divid="errorMsg"></div><fontcolor="#FF0000">*</font>
</td>
</tr>
<trclass="tdbg">
<tdwidth="50%"><strong>年龄:</strong></td>
<tdwidth="50%"align="left">
<asp:TextBoxID="txtAge"runat="server"CssClass="input"Columns="30"MaxLength="50"onblur="javascript:checkAge();void(0);"></asp:TextBox><divid="errorMsg1"></div></td>
</tr>
</table>
</div>
<scriptlanguage="javascript"type="text/javascript"defer="defer">
functioncheckName()
{
varname=document.getElementById("<%=txtUserName.ClientID%>");
document.getElementById("errorMsg").style.display="block";
document.getElementById("errorMsg").style.color="red";
document.getElementById("errorMsg").innerText=Test.CheckUserName(""+name.value+"").value;
}
functioncheckAge()
{
varage=document.getElementById("<%=txtAge.ClientID%>");
document.getElementById("errorMsg1").style.display="block";
document.getElementById("errorMsg1").style.color="red";
document.getElementById("errorMsg1").innerText=Test.CheckAge(parseInt(age)).value;
}
</script>
</form>
</body>
</html>
后台代码:Test.cs
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
/**
*写作说明:本文展示了如何利用AjaxPro与服务器交互,并且给服务器传值的情况。
*作者:周公
*日期:2008-1-1
*首发地址:http://blog.csdn.net/zhoufoxcn/
**/
publicpartialclassTest:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!Page.IsPostBack)
{
}
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));//注册
}
[AjaxPro.AjaxMethod]
publicstringCheckUserName(stringname)
{
if(string.IsNullOrEmpty(name))
{
return"请填写用户名";
}
elseif(ExistUserName(name))
{
return"该用户名已被注册";
}
else
{
return"可以注册";
}
}
[AjaxPro.AjaxMethod]
publicstringCheckAge(intage)
{
if(age>80||age<10)
{
return"别忽悠我了";
}
else
{
return"正常范围";
}
}
//为简化程序,这里将从数据库检查是否有重复的用户名这一步简单为一个方法
//可以在这里写实际的数据库检查代码
privateboolExistUserName(stringname)
{
if(name.StartsWith("a")||name.StartsWith("c"))
{
returntrue;
}
else
{
returnfalse;
}
}
}
说明:在前台aspx代码中我们写了两个Js方法,负责与服务器的交互,分别是function checkName()和checkAge(),请注意看:
<scriptlanguage="javascript"type="text/javascript"defer="defer">
functioncheckName()
{
varname=document.getElementById("<%=txtUserName.ClientID%>");
.......省略无关代码
document.getElementById("errorMsg").innerText=Test.CheckUserName(""+name.value+"").value;
}
functioncheckAge()
{
varage=document.getElementById("<%=txtAge.ClientID%>");
.......省略无关代码
document.getElementById("errorMsg1").innerText=Test.CheckAge(parseInt(age.value)).value;
}
</script>
细心的朋友会发现在后台Test.cs里就有CheckUserName(string name)和public string CheckAge(int age)两个方法,在js里我们就是通过Test.CheckUserName()和Test.CheckAge()来调用的,这两个服务器端方法与平常所熟悉的方法声明有点不一样,如下:
[AjaxPro.AjaxMethod]
publicstringCheckUserName(stringname)
{
....//方法体略
}
[AjaxPro.AjaxMethod]
publicstringCheckAge(intage)
{
....//方法体略
}
其中[AjaxPro.AjaxMethod]表明它们是可以被js代码所调用的,另外两个方法需要的参数类型不同,一个是string类型,一个是int类型,而js中数据没有类型的,因为都是var来声明的,所以如何把参数值和参数类型传给服务器还是一个麻烦问题。
查阅了资料,发现可以通过上述的方式解决:
Test.CheckUserName(""+name.value+""),服务器就自动把参数值当字符串类型来识别了;//""+参数值
Test.CheckAge(parseInt(age)),服务器就会把参数当整数来识别了。//parseInt(参数值)
看看运行效果:
出错效果:
正常效果:
最后,周公还要提醒大家一下,别忘了在Page_Load方法里调用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx页面所依附的class名称));这句话。另外有关AjaxPro的介绍请参考网上其它资料。
分享到:
相关推荐
附件包含最新的ajaxPro.dll9.2.17.1版本及其WebConfig配置文件,使用时只需要将ajaxPro.2.dll添加至工程引用,并覆盖原有配置文件即可。 具体使用方法测试代码中详细列出,包含了传参调用和不传参数调用,均已测试...
利用AjaxPro2实现前后台数据实时交互,里面bin目录包含AjaxPro.2.dll,web.confing文件包含在windows server 2008+IIS 7.0 下如何设置,才能正常使用AjaxPro2
.net中用ajaxpro页面无刷新技术传值
AJAX安装包 AjaxPro AjaxPro.dll AjaxPro.2 AjaxPro.2.dll
AjaxPro库文件
AJAX.NET提供的最主要的(也是唯一)的功能就是异步调用服务器端方法,可谓非常纯粹的“基于数据”的AJAX使用方式。这个框架是一个个人作品,有支持.NET 1.1和2.0的版本,它并不属于微软官方,目前已经停止更新。 ...
AjaxPro.dll用法与示例学习源码
Ajax应用程序的优势. Ajax.net有AjaxPro.dll和Ajax.dll两个版本.
AjaxPro.2.dll AjaxPro.dll Ajax.dll AjaxPro.JSON.dll AjaxPro.JSON.2.dll
AjaxPro文件及使用文档 AjaxPro文件及使用文档
js 调用后台方法 function a1() { var s = _Default.GetServerTime().value; alert(s); } function a2() { var s = _Default.GetString("123").value; alert(s); } function a3() { ... </script>
Asp.net AjaxPro实现
asp.net ajax框架 ajaxpro源代码。 ajaxpro 具有简单的可操作性,无刷新的后台交互,良好的数据封装
AjaxPro.2学习很不错的源码,不明白AjaxPro.2的可以看哈,我自己也不懂,不过慢慢研究后收获不小...
ASP.NET平台上的AJAX框架,异步调用服务器端方法
vs 2005 ajaxpro 2.0 内附简单实用说明
Asp.Net AjaxPro 实例集合
asp.net ajaxPro 源码实例
ajax技术要用的到包 有三个版本ajax.dll ajaxpro.dll ajaxpro2.dll
AjaxPro源码: 1.直接编译成dll并使用。 2.当遇到AjaxPro存在的Bug时可修正后并编译使用。 3.想在AjaxPro的基础上做出个性化的修改后并编译使用。 4.个人学习和研究:)