AjaxPro与服务器端的交互及其传值

Ajax开发主要有两种，一是以UpdatePanel控件为代表的微软技术，一种是AjaxPro技术。

各种技术有着各自的特点。采用微软的技术UpdatePanel为例，实现简单Ajax程序几乎不需要了解DOM、网页脚本知识和XHTML知 识，缺点也有一些，通常会带来一些不必要的网络流量（整个UpdatePanel控件内所有的控件内容都会提交），造成网络流量的浪费，另外就是VS2005下经常会出现 “***不是已知元素 原因可能是网站中存在编译错误 ”的提示。碰到过的开发人员恐怕身有体会吧？

AjaxPro则需要开发人员孰知JS脚本和XHTML相关知识，因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点，JS调试要相对麻烦一点。

读过 周公（ http://blog.csdn.net/zhoufoxcn）的一篇Blog ( http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx)后，决定照着实现一下
前台代码：Test.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Test.aspx.cs "  Inherits = " Test "   %>

<! 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" >
     < title > 利用AjaxPro实现用户注册时输入用户名是否已经被注册了 </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
        用户名： < asp:TextBox  ID ="txtUserName"  runat ="server" ></ asp:TextBox >
                 < div  id ="errorMsg" ></ div >
     </ div >
    
     < script  type ="text/javascript"  language ="javascript"  defer ="defer" >
         function  checkUserName_Client()
        {
             var  userName  =  document.getElementById( ' <%=txtUserName.UniqueID %> ' ).value;
            document.getElementById( ' errorMsg ' ).style.display = " block " ;
            document.getElementById( ' errorMsg ' ).style.color = " red " ;
            
             if (userName  ==   '' )
            {
                document.getElementById( ' errorMsg ' ).innerText  =   " 用户名不能为空 " ;
                 return   false ;
            }
            
            document.getElementById( ' errorMsg ' ).innerText  =  Test.checkUserName_Server( "" + userName + "" ).value  ?   " 该用户名已被注册 "  :  " 可以注册 " ;
        }
     </ script >
    
     </ form >
</ body >
</ html >

后台代码：Test.aspx.cs
其中用到的数据库
表名：Users
字段名：UserName
记录可添加你喜欢的用户名

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;

/* *
 * 参照周公的Blog
 * 写作说明：本文展示了如何利用AjaxPro与服务器交互，并且给服务器传值的情况。
 * 作者：奈奈
 * 日期：2008-1-10
 * 首发地址： http://blog.csdn.net/mndn_nana/
 * */
public   partial   class  Test : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if ( ! this .IsPostBack)
        {
            txtUserName.Attributes[ " onkeyup " ]  =   " javascript:checkUserName_Client(); " ;
        }
        AjaxPro.Utility.RegisterTypeForAjax( typeof (Test)); // 注册AjaxPro组件
    }
    
    [AjaxPro.AjaxMethod] // 申明可以在js中使用AjaxPro调用的服务器端方法
     public   bool  checkUserName_Server( string  userName)
    {
             string  strConnection  =  System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
            SqlConnection con  =   new  SqlConnection(strConnection);
            SqlCommand cmd  =   new  SqlCommand();
            cmd.Connection  =  con;
            cmd.CommandText  =   " select count(*) from Users where UserName=' "   +  userName  +   " ' " ;
            con.Open();
             int  i  =  ( int )cmd.ExecuteScalar();
             if  (i  >   0 )
            {
                 return   true ;
                 // return "该用户名已被注册";
            }
             else
            {
                 return   false ;
                 // return "可以注册";
            }
    }
}

说明：在前台aspx代码中我们写了个JS方法，负责与服务器的交互，分别是function checkUserName_Client()，请注意看：

< script type = " text/javascript "  language = " javascript "  defer = " defer " >
        function checkUserName_Client()
        {
            var userName  =  document.getElementById( ' <%=txtUserName.UniqueID %> ' ).value;
            document.getElementById( ' errorMsg ' ).style.display = " block " ;
            document.getElementById( ' errorMsg ' ).style.color = " red " ;
            
             if (userName  ==   '' )
            {
                document.getElementById( ' errorMsg ' ).innerText  =   " 用户名不能为空 " ;
                 return   false ;
            }
            
            document.getElementById( ' errorMsg ' ).innerText  =  Test.checkUserName_Server( "" + userName + "" ).value  ?   " 该用户名已被注册 "  :  " 可以注册 " ;
        }
     </ script >

细心的朋友会发现在后台Test..aspx.cs里就有checkUserName_Server(string userName)方法，在JS里我们就是通过Test.checkUserName_Server(string userName)来调用的，这个服务器端方法与平常 所熟悉的方法声明有点不一样，如下：

[AjaxPro.AjaxMethod] // 申明可以在js中使用AjaxPro调用的服务器端方法
     public   bool  checkUserName_Server( string  userName)
    {
             string  strConnection  =  System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
            SqlConnection con  =   new  SqlConnection(strConnection);
            SqlCommand cmd  =   new  SqlCommand();
            cmd.Connection  =  con;
            cmd.CommandText  =   " select count(*) from Users where UserName=' "   +  userName  +   " ' " ;
            con.Open();
             int  i  =  ( int )cmd.ExecuteScalar();
             if  (i  >   0 )
            {
                 return   true ;
                 // 该用户名已被注册
            }
             else
            {
                 return   false ;
                 // return "可以注册";
            }
    }

其中[AjaxPro.AjaxMethod]表明是可以被JS代码所调用的，另外方法需要的参数类型是string类型,而JS中数据是没有类型的，因为都是var来声明的，所以如何把参数值和参数类型传给服务器还是一个麻烦问题。

资料上说可以通过下述的方式解决：
Test.checkUserName_Server(""+userName+"")，服务器就自动把参数值当字符串类型来识别了；

看看下边3次运行的效果：

该用户名已经被注册过的效果：

 

可以注册的效果：

用户名为空时的效果：

在Page_Load里调用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx页面所依附的class名称));这句话必须有，预了解详细，请查找有关AjaxPro的介绍资料。