查看了网上雷同的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) { ....//方法体略 }