ASP.NET 使用PageMethods方法(button) 讓 客戶端 呼叫「伺服器端方法」

研究了上一個案例的時候，發現想要把 textbox 的tab事件改成 button的onclick事件，
結果竟然會失敗，於是突然想到之前好像有人說VB.NET的按鈕事件建議設定為 mousedown 會比較好 果真用這個事件就可以了。 範例說明如下

新增一個 TestJavaScript.js 在根目錄

function CallMe(src,dest) {
    
     var ctrl = document.getElementById(src);
     // call server side method (注意4個參數 1:傳入的參數, 2:正確時呼叫的方法, 3:失敗時呼叫的方法, 4:最後傳回的clientID)
        PageMethods.GetContactName(ctrl.value,CallSuccess,CallFailed,dest);
 }
 
 // 當程式正確時呼叫的方法
 function CallSuccess(res, destCtrl)
 {
     var dest = document.getElementById(destCtrl);
     dest.value = res;
 }
 
 // 當程式錯誤時呼叫的方法
 function CallFailed(res, destCtrl) {
     alert(res.get_message());
 }

接著客戶端畫面，ScriptManager這個ID的tag很重要，要使用PageMethods方法必須設定該行
button的按下事件必須設定為 onmousedown，若設定為 onclick 程式會回應 方法'CallMe'失敗 注意CallMe傳出去的參數 (.clientid)，如果這邊有用主版頁面(.master)的話， 就必須把CallMe那行(第23行)改成

C001.aspx

<%@ Page Language="c#" AutoEventWireup="true" CodeFile="C001.aspx.cs" Inherits="C001" %>



    





    

    
    
    

        ASP.NET 使用PageMethods方法(button) 讓 客戶端 呼叫「伺服器端方法」

        按下 按鈕 將textbox1的value傳送給.js在傳送給.cs處理並回傳 到textbox2


        Button1為從後端伺服器.cs控制

        Button2為從客戶端直接呼叫js方法在傳到伺服器端

        TextBox1:

        TextBox2:

    

接著伺服器後端程式，.ClientID的目的就是 因為有主版頁面的話，Client的ID會不同，
所以將Client值傳給Function做處理，而在GetContactName方法有做些檢查的應用
C001.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class C001 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Button1.Attributes.Add("onmousedown", "CallMe('" + TextBox1.ClientID + "', '" + TextBox2.ClientID + "')");
        }
    }

    [System.Web.Services.WebMethod]
    public static string GetContactName(string TextBox1text)
    {
        string result = "";
        if (TextBox1text == ""){
            result = "textbox1為空值";
        }else{
            result = "textbox1傳來的值:" + TextBox1text;
        }
        return result;
    }
}

  範例下載