学习 [征服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 输入用户名:
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