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

用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
* 首發地址：[url]http://blog.csdn.net/zhoufoxcn/[/url]
**/
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(參數值)

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

正常效果：

最後，周公還要提醒大家一下，別忘了在Page_Load方法裏調用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx頁面所依附的class名稱));這句話。另外有關AjaxPro的介紹請參考網上其它資料。

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

怎麼(如何)使iframe無背景色！

怎麼查服務器DNS

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

哈希表(Hashtable)

我的友情鏈接

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結