AjaxPro与服务器端交互过程中如何传值-阿里云开发者社区

AjaxPro与服务器端交互过程中如何传值

2017-11-15 1080

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

用asp.net开发Ajax有两种主流，一种是微软推出的技术，其中一个最常用的就是UpdatePanel控件，还有一种是AjaxPro技术。

这种技术有着各自的特点。采用微软的技术开发也沿用了微软一贯的简单化、傻瓜化的特点，开发简单Ajax程序几乎不需要了解任何网页脚本知识和XHTML知识，缺点也有一些，通常会带来一些不必要的网络流量（整个UpdatePanel控件内所有的控件内容都会提交），另外在VS2005下经常会出现“***不是已知元素原因可能是网站中存在编译错误 ”的提示，虽然有治标不治本的办法（见拙作：***不是已知元素原因可能是网站中存在编译错误中提到的解决办法），但是经常出现这种提示，也够让人心烦的。

而AjaxPro的起点较高，需要开发人员孰知Js脚本知识和XHTML相关知识，因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点，调试也会困难一点（JS调试就是麻烦）。

网上有不少讲述怎么使用AjaxPro调用服务器端方法的例子，我大概看了一下，估计只有一个原本，然后被Copy了N遍，所以到处都是，可惜的是那篇文章里没有降到如何把客户端的数据传送到服务器，比如我想在用户注册时那个用户名是否被注册了，怎么办？

查看了网上雷同的N篇文章之后没有找到答案，后来自己琢磨了很久，才琢磨出来，下面展示一下用法。

<% @ 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 > 用户注册 </ title >
</ head >
< body >
     < form id ="form1" runat ="server" >
     < div >
         < table width ="95%" border ="0" align ="center" cellpadding ="3" cellspacing ="1" bordercolor ="#FFFFFF" style ="border-collapse: collapse" >
                                 < tr align ="center" >
                                   < td height ="20" colspan ="2" >   </ td >
                                 </ tr >
                                 < tr class ="tdbg" >
                                   < td width ="50%" >< b > 用户名： </ b >< BR >
                                    不能超过14个字符（7个汉字） </ td >
                                   < td width ="50%" align ="left" >
                                       < asp:TextBox ID ="txtUserName" runat ="server" CssClass ="input" Columns ="30" MaxLength ="14" onblur ="javascript:checkName();void(0);" ></ asp:TextBox >< div id ="errorMsg" ></ div >< font color ="#FF0000" > * </ font >
                                       </ td >
                                 </ tr >
                                 < tr class ="tdbg" >
                                   < td width ="50%" >< strong > 年龄： </ strong ></ td >
                                   < td width ="50%" align ="left" >
                                       < asp:TextBox ID ="txtAge" runat ="server" CssClass ="input" Columns ="30" MaxLength ="50" onblur ="javascript:checkAge();void(0);" ></ asp:TextBox >< div id ="errorMsg1" ></ div ></ td >
                                 </ tr >
                               </ table >

     </ div >
     < script language ="javascript" type ="text/javascript" defer ="defer" >
     function checkName()
    {
         var name = 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;

    }

     function checkAge()
    {
         var age = 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

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;

/* *
* 写作说明：本文展示了如何利用AjaxPro与服务器交互，并且给服务器传值的情况。
* 作者：周公
* 日期：2008-1-1
* 首发地址： http://blog.csdn.net/zhoufoxcn/
* */
public partial class Test : System.Web.UI.Page
{
     protected void Page_Load( object sender, EventArgs e)
    {
         if ( ! Page.IsPostBack)
        {

        }
        AjaxPro.Utility.RegisterTypeForAjax( typeof (Test)); // 注册
    }
    [AjaxPro.AjaxMethod]
     public string CheckUserName( string name)
    {

         if ( string .IsNullOrEmpty(name))
        {
             return " 请填写用户名 " ;
        }
         else if (ExistUserName(name))
        {
             return " 该用户名已被注册 " ;
        }
         else
        {
             return " 可以注册 " ;
        }
    }
    [AjaxPro.AjaxMethod]
     public string CheckAge( int age)
    {
         if (age > 80 || age < 10 )
        {
             return " 别忽悠我了 " ;
        }
         else
        {
             return " 正常范围 " ;
        }
    }
     // 为简化程序，这里将从数据库检查是否有重复的用户名这一步简单为一个方法
     // 可以在这里写实际的数据库检查代码
     private bool ExistUserName( string name)
    {
         if (name.StartsWith( " a " ) || name.StartsWith( " c " ))
        {
             return true ;
        }
         else
        {
             return false ;
        }
    }
}

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

< script language = " javascript " type = " text/javascript " defer = " defer " >
     function checkName()
    {
         var name = document.getElementById( " <%=txtUserName.ClientID %> " );
        .......省略无关代码
         document.getElementById( " errorMsg " ).innerText = Test.CheckUserName( "" + name.value + "" ).value;

    }

     function checkAge()
    {
         var age = 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]
     public string CheckUserName( string name)
    {
       .... // 方法体略
     }
    [AjaxPro.AjaxMethod]
     public string CheckAge( int age)
    {
      .... // 方法体略
     }

其中[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的介绍请参考网上其它资料。

本文转自周金桥51CTO博客，原文链接：http://blog.51cto.com/zhoufoxcn/167046 ，如需转载请自行联系原作者

AjaxPro与服务器端交互过程中如何传值

热门文章

最新文章

相关课程

相关电子书

相关实验场景