解析AjaxPro與服務(wù)器端交互過程中如何傳值_AJAX教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:怎樣用AjaxPro實現(xiàn)二級聯(lián)動
      在實際asp.net項目中經(jīng)常會遇到無刷新二級或者N級(N=2)聯(lián)動情況,其實N級聯(lián)動和二級聯(lián)動的原理都是一樣的,實現(xiàn)這種辦法有很多,一種是純腳本實現(xiàn)(動態(tài)生成Array數(shù)組),一種 是采用微軟的Ajax.net中的UpdatePanel來實現(xiàn),今天我給大家來展示如何采用AjaxPr

      用asp.net開發(fā)Ajax有兩種主流,一種是微軟推出的技術(shù),其中一個最常用的就是UpdatePanel控件,還有一種是AjaxPro技術(shù)。

      這種技術(shù)有著各自的特點。采用微軟的技術(shù)開發(fā)也沿用了微軟一貫的簡單化、傻瓜化的特點,開發(fā)簡單Ajax程序幾乎不需要了解任何網(wǎng)頁腳本知識和XHTML知識,缺點也有一些,通常會帶來一些不必要的網(wǎng)絡(luò)流量(整個UpdatePanel控件內(nèi)所有的控件內(nèi)容都會提交),另外在VS2005下經(jīng)常會出現(xiàn)“***不是已知元素 原因可能是網(wǎng)站中存在編譯錯誤 ”的提示,雖然有治標(biāo)不治本的辦法,但是經(jīng)常出現(xiàn)這種提示,也夠讓人心煩的。

      而AjaxPro的起點較高,需要開發(fā)人員孰知Js腳本知識和XHTML相關(guān)知識,因為所有的方法需要你自己編寫網(wǎng)頁腳本。開發(fā)速度相對會較慢一點,調(diào)試也會困難一點(JS調(diào)試就是麻煩)。

      網(wǎng)上有不少講述怎么使用AjaxPro調(diào)用服務(wù)器端方法的例子,我大概看了一下,估計只有一個原本,然后被Copy了N遍,所以到處都是,可惜的是那篇文章里沒有降到如何把客戶端的數(shù)據(jù)傳送到服務(wù)器,比如我想在用戶注冊時那個用戶名是否被注冊了,怎么辦?

      查看了網(wǎng)上雷同的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">&nbsp;</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與服務(wù)器交互,并且給服務(wù)器傳值的情況。
      * 作者:周公
      * 日期:2008-1-1
      * 首發(fā)地址: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 "請?zhí)顚懹脩裘?quot;;
      }
      else if (ExistUserName(name))
      {
      return "該用戶名已被注冊";
      }
      else
      {
      return "可以注冊";
      }
      }
      [AjaxPro.AjaxMethod]
      public string CheckAge(int age)
      {
      if (age > 80 || age < 10)
      {
      return "別忽悠我了";
      }
      else
      {
      return "正常范圍";
      }
      }
      //為簡化程序,這里將從數(shù)據(jù)庫檢查是否有重復(fù)的用戶名這一步簡單為一個方法
      //可以在這里寫實際的數(shù)據(jù)庫檢查代碼
      private bool ExistUserName(string name)
      {
      if (name.StartsWith("a") || name.StartsWith("c"))
      {
      return true;
      }
      else
      {
      return false;
      }
      }
      }
      說明:在前臺aspx代碼中我們寫了兩個Js方法,負(fù)責(zé)與服務(wù)器的交互,分別是function checkName()和checkAge(),請注意看:
      <script language="javascript" type="text/javascript" defer="defer">
      function checkName()
      {
      var name=document.getElementById("<%=txtUserName.ClientID %>");
      .......省略無關(guān)代碼
      document.getElementById("errorMsg").innerText=Test.CheckUserName(""+name.value+"").value;

      }

      function checkAge()
      {
      var age=document.getElementById("<%=txtAge.ClientID %>");
      .......省略無關(guān)代碼
      document.getElementById("errorMsg1").innerText=Test.CheckAge(parseInt(age.value)).value;
      }
      </script>
      細(xì)心的朋友會發(fā)現(xiàn)在后臺Test.cs里就有CheckUserName(string name)和public string CheckAge(int age)兩個方法,在js里我們就是通過Test.CheckUserName()和Test.CheckAge()來調(diào)用的,這兩個服務(wù)器端方法與平常所熟悉的方法聲明有點不一樣,如下:
      [AjaxPro.AjaxMethod]
      public string CheckUserName(string name)
      {
      ....//方法體略
      }
      [AjaxPro.AjaxMethod]
      public string CheckAge(int age)
      {
      ....//方法體略
      }

      其中[AjaxPro.AjaxMethod]表明它們是可以被js代碼所調(diào)用的,另外兩個方法需要的參數(shù)類型不同,一個是string類型,一個是int類型,而js中數(shù)據(jù)沒有類型的,因為都是var來聲明的,所以如何把參數(shù)值和參數(shù)類型傳給服務(wù)器還是一個麻煩問題。

      查閱了資料,發(fā)現(xiàn)可以通過上述的方式解決:
      Test.CheckUserName(""+name.value+""),服務(wù)器就自動把參數(shù)值當(dāng)字符串類型來識別了;//""+參數(shù)值
      Test.CheckAge(parseInt(age)),服務(wù)器就會把參數(shù)當(dāng)整數(shù)來識別了。//parseInt(參數(shù)值)

      看看運行效果:
      出錯效果:


      正常效果:

      最后,周公還要提醒大家一下,別忘了在Page_Load方法里調(diào)用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx頁面所依附的class名稱));這句話。另外有關(guān)AjaxPro的介紹請參考網(wǎng)上其它資料。

       

      分享:如何用AjaxPro實現(xiàn)定時刷新效果
      在看本文之前,建議查看本人的系列文章: 《AjaxPro與服務(wù)器端交互過程中如何傳值》 《用AjaxPro實現(xiàn)二級聯(lián)動》,以便對AjaxPro有個初步印象。 說明:在Web開發(fā)中,有時候需要經(jīng)常更新某一部分內(nèi)容,如果不采用Ajax技術(shù),就需要使用傳統(tǒng)的html技術(shù),在head/h

      來源:模板無憂//所屬分類:AJAX教程/更新時間:2010-02-03
      相關(guān)AJAX教程