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

突然想到，再加上一些運用，也可以。就是原本的 js 改成使用jquery方法，
另外這個範例是使用到主版頁面(.master)。所以基本上改變的地方在 .js檔案
必須注意需引入 jquey元件。

 範例說明如下

新增一個 TestJavaScript.js 在根目錄

$(function () {
    $("#Button2").click(function () {
        // call server side method (注意4個參數 1:傳入的參數, 2:正確時呼叫的方法, 3:失敗時呼叫的方法, 4:最後傳回的clientID)
        PageMethods.GetContactName("ContentPlaceHolder1_TextBox1", CallSuccess, CallFailed, "ContentPlaceHolder1_TextBox2");
    });

});

 // 當程式正確時呼叫的方法
 function CallSuccess(res, destCtrl)
 {
     var dest = document.getElementById(destCtrl);
     dest.value = res;
 }

 // 當程式錯誤時呼叫的方法
 function CallFailed(res, destCtrl) {
     alert(res.get_message());
 }

接著客戶端畫面，ScriptManager這個ID的tag很重要，要使用PageMethods方法必須設定該行
C001.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="C001.aspx.cs" Inherits="C001" %>








    

    
    
    

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

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



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

        
        Button2為從客戶端靠Jquery註冊事件來直接呼叫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;
    }
}

  範例下載