解析AjaxPro與服務器端交互過程中如何傳值_AJAX教程
推薦：怎樣用AjaxPro實現二級聯動在實際asp.net項目中經常會遇到無刷新二級或者N級(N=2)聯動情況，其實N級聯動和二級聯動的原理都是一樣的，實現這種辦法有很多，一種是純腳本實現（動態生成Array數組），一種 是采用微軟的Ajax.net中的UpdatePanel來實現，今天我給大家來展示如何采用AjaxPr
用asp.net開發Ajax有兩種主流，一種是微軟推出的技術，其中一個最常用的就是UpdatePanel控件，還有一種是AjaxPro技術。
這種技術有著各自的特點。采用微軟的技術開發也沿用了微軟一貫的簡單化、傻瓜化的特點，開發簡單Ajax程序幾乎不需要了解任何網頁腳本知識和XHTML知識，缺點也有一些，通常會帶來一些不必要的網絡流量（整個UpdatePanel控件內所有的控件內容都會提交），另外在VS2005下經常會出現“***不是已知元素 原因可能是網站中存在編譯錯誤 ”的提示，雖然有治標不治本的辦法，但是經常出現這種提示，也夠讓人心煩的。
而AjaxPro的起點較高，需要開發人員孰知Js腳本知識和XHTML相關知識，因為所有的方法需要你自己編寫網頁腳本。開發速度相對會較慢一點，調試也會困難一點（JS調試就是麻煩）。
網上有不少講述怎么使用AjaxPro調用服務器端方法的例子，我大概看了一下，估計只有一個原本，然后被Copy了N遍，所以到處都是，可惜的是那篇文章里沒有降到如何把客戶端的數據傳送到服務器，比如我想在用戶注冊時那個用戶名是否被注冊了，怎么辦？
查看了網上雷同的N篇文章之后沒有找到答案，后來自己琢磨了很久，才琢磨出來，下面展示一下用法。
<!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>
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;
}
}
}
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>
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的介紹請參考網上其它資料。
分享：如何用AjaxPro實現定時刷新效果在看本文之前，建議查看本人的系列文章： 《AjaxPro與服務器端交互過程中如何傳值》 《用AjaxPro實現二級聯動》，以便對AjaxPro有個初步印象。 說明：在Web開發中，有時候需要經常更新某一部分內容，如果不采用Ajax技術，就需要使用傳統的html技術，在head/h
- 相關鏈接：
- 教程說明：
AJAX教程-解析AjaxPro與服務器端交互過程中如何傳值
。