來源網址：http://www.dotblogs.com.tw/hatelove/archive/2009/01/05/6639.aspx　－　[ASP.NET AJAX]PageMethod：用javascript呼叫server端的method - In 91- 點部落

*************************************************************************************

 

Step1：首先，PageMethod是建立在ASP.NET AJAX裡，也就是跟Scriptmanager息息相關。所以畫面上要有Scriptmanager，而且要設定一下EnablePageMethods屬性為True。

        <ASPExtensions:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </ASPExtensions:ScriptManager>

 

 

 

 

 

Step2：WebConfig要在<system.web>裡面，設定一下httpModules。

<httpModules>
      <add type="Microsoft.Web.UI.ScriptModule" name="ScriptModule"/>
</httpModules>

 

 

 

 

 

Step3：在aspx裡面，拉兩個textbox出來，用來當input與output的值。

        <asp:TextBox ID="TextBox1" runat="server" />
        <asp:TextBox ID="TextBox2" runat="server" Width="200px">

 

 

 

 

 

Step4：新增一個javascript檔，叫做TestJavaScript.js。放在同一層目錄底下。並在aspx的<body>之後，include該js。

<body>
    <script language="javascript" src="TestJavaScript.js" type="text/javascript"> </script>

 

 

 

 

 

Step5：撰寫javascript的function，CallMe()。其中，CallSuccess為XMLHttpRequest成功後要做的事，CallFailed為失敗要做的事，dest則是最後output的值要放在哪。而關鍵的一行就是Pagemethods.GetContactName()。

function CallMe(src,dest)
 {    
     var ctrl = document.getElementById(src);
     // call server side method
     PageMethods.GetContactName(ctrl.value,CallSuccess,CallFailed,dest);
 }
 
 // set the destination textbox value with the ContactName
 function CallSuccess(res, destCtrl)
 {    
     var dest = document.getElementById(destCtrl);
     dest.value = res;
 }
 
 // alert message on some failure
 function CallFailed(res, destCtrl)
 {
     alert(res.get_message());
 }

 

 

 

 

 

Step6：接著就要撰寫後置程式碼的Web Method了，也就是js裡呼叫的GetContactName()。這邊的例子input是TextBox1.text，output則是TextBox1.text+系統時間。可以修改成透過TextBox1.text，撈DB相關資料後，Return到TextBox2上。要特別注意的是，需宣告成public static，且需要System.Web.Services.WebMethod的修飾語。

    [System.Web.Services.WebMethod]
    public static string GetContactName(string TextBox1text)
    {
        return TextBox1text + System.DateTime.Now.ToString();
    }

 

 

 

 

 

Step7：接著在Page_Load()的時候，將javascript的function註冊到TextBox1的onblur事件上。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            TextBox1.Attributes.Add("onblur", "CallMe('" + TextBox1.ClientID + "', '" + TextBox2.ClientID + "')");            
        }
    }

 

 

 

 

 

Step8：執行後，在TextBox1上輸入”Hello World !”，就會發現onblur之後，執行了server端的GetContactName()，而且畫面並未PostBack 。

 

執行結果

 

其實，PageMethod的方式跟Web Service大同小異，不過省了參考asmx，也省了些檔案，還蠻適合特殊需求時使用。

用Client端Script呼叫Server端的Method，這我也是第一次使用，有錯誤或需要加強的地方，還望大家多指教。