学习 [征服Ajax——Web 2.0快速入门与项目实践(.net)]
(一). 运行效果如下:
(二). AjaxPro.NET简介
AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL引用并进行简单的配置,
即可以非常方便的在客户端直接调用服务端方法, 实现验证目的.
(三).使用AjaxPro.NET预配置
1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).
2. 在Web.config文件中添加以下配置,
1 < httpHandlers > 2 < add verb = " POST,GET " path = " ajaxpro/*.ashx " type = " AjaxPro.AjaxHandlerFactory, AjaxPro " /> 3 </ httpHandlers > 3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码: AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default)); 4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后: 1 [AjaxMethod()] // or [AjaxPro.AjaxMethod] 2 public ArrayList GetSearchItems( string strQuery ) 3 { 4 // 生成数据源 5 ArrayList items = new ArrayList(); 6 items.Add( " King " ); 7 items.Add( " Rose " ); 8 return items ; 9 } 10 就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下: var returnValue = 后台代码类名.GetSearchItems(参数); (四). 详细代码如下 1. 页面 AjaxPro.NETDataValidate.aspx 代码如下: 1 < head runat = " server " > 2 < title > AjaxPro.NET 数据验证 </ title > 3 < script language = " jscript " > 4 function IsUsernameExist_callback(result) 5 { 6 var msg = document.getElementById( ' lblMessage ' ); 7 var value = result.value; 8 if ( value == ' 0 ' ) 9 { 10 msg.innerHTML = ' 用户名合法! ' ; 11 msg.style.color = ' green ' ; 12 } 13 else if ( value == ' 1 ' ) 14 { 15 msg.innerHTML = ' 用户名长度必须在 3 到 15 之间, 且不包含字母/数字/下划线以外的字符! ' ; 16 msg.style.color = ' red ' ; 17 } 18 else 19 { 20 msg.innerHTML = ' 用户名不存在! ' ; 21 msg.style.color = ' red ' ; 22 } 23 } 24 25 function VerifyUserName(name) 26 { 27 _Default.GetReturnCode(name, IsUsernameExist_callback); 28 } 29 </ script > 30 </ head > 31 < body > 32 < form id = " form1 " runat = " server " > 33 < div > 34 < asp:Panel ID = " Panel1 " runat = " server " BackColor = " #C0C0FF " Font - Bold = " True " Font - Overline = " False " 35 Font - Size = " XX-Large " Height = " 37px " Width = " 459px " > 36 AjaxPro.NET 数据验证 </ asp:Panel > 37 < br /> 38 < hr align = " left " style = " width: 463px " /> 39 < br /> 40 输入用户名: & nbsp; 41 < asp:TextBox ID = " tbUsername " runat = " server " ></ asp:TextBox >< br /> 42 < br /> 43 < asp:Label ID = " lblMessage " runat = " server " Width = " 246px " ></ asp:Label ></ div > 44 </ form > 45 </ body > 2. 页面 AjaxPro.NETDataValidate.aspx.cs 后台代码如下: 1 public partial class _Default : System.Web.UI.Page 2 { 3 protected void Page_Load( object sender, EventArgs e) 4 { 5 AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default)); 6 tbUsername.Attributes.Add( " OnKeyUp " , " VerifyUserName(this.value) " ); 7 } 8 9 [AjaxPro.AjaxMethod] 10 public string GetReturnCode( string strName) 11 { 12 if ( ! IsValidUsername(strName)) 13 { 14 return " 1 " ; 15 } 16 else if ( ! IsUsernameExist(strName)) 17 { 18 return " 2 " ; 19 } 20 else 21 { 22 return " 0 " ; 23 } 24 } 25 26 private bool IsUsernameExist( string strUsername) 27 { 28 bool bRet = false ; 29 30 switch (strUsername.ToUpper()) 31 { 32 case " KING " : 33 case " ROSE " : 34 bRet = true ; 35 break ; 36 } 37 38 return bRet; 39 } 40 41 private bool IsValidUsername( string strUsername) 42 { 43 return (Regex.IsMatch(strUsername, @" ^(/w{3,15})$ " )); 44 } 45 } (五). 示例代码下载 http://www.cnblogs.com/Files/ChengKing/AjaxPro.NET_DataValidate.rar