解析AjaxPro與服務器端交互過程中如何傳值

2024-09-01 08:26:21

字體：大中小

來源：轉載

供稿：網友

用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()，請注意看：

細心的朋友會發現在后臺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(參數值)

看看運行效果：
出錯效果：

正常效果：