AJAX與PageMethod

2011-01-07

9869
0
jQuery

AJAX與PageMethod

從懵懵懂懂的ASP到開始嘗試寫.NET

這段的心路歷程

從一開始的AutoPostBack好神奇, 好好用, 好簡單

到後來的痛苦深淵, 網站瀕臨崩潰邊緣

接著的諄諄教誨, 寫程式的時候東注意西注意

定了許多的規範

就是怕又做出一個失控的VIEWSTATE

試了很多方法, WebService, PageMethod 等

後來選定了也習慣了用jQuery AJAX與 Page Method的溝通模式

在這邊留做筆記

TestPage.aspx.cs

using System.Web.Script.Services;

[System.Web.Services.WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static AjaxData Delete(int itemId)
{
      FeatureBaseDb db = new FeatureBaseDb();
      Feature item = db.Get(itemId);
            
      bool bSuccess = db.Delete(item);
}

TestPage.aspx

	val itemId = $('#ddlItem').val(); //或其他來源
	$.ajax({
		url: 'TestPage.aspx/Delete',  type: 'POST', dataType: 'json',
		contentType: 'application/json; charset=utf-8',
		data: $.toJSON({ itemId: itemId }),
		success: function (data) {
			if (data.d.result)
				alert('Save Success!');
			else
				alert('Save Failed!');
		}
	});

(除了要匯入jQuery外還需要匯入jQuery JSON才可正常運作)

簡單來說, 在Page Code Behind將Method宣告為static

並且加上WebMethod的標籤

.NET就會把這個FUNCTION宣告為PAGE METHOD

就可以在JavaScript用 {PageName}.aspx/{Method Name}的方式呼叫

並且互相溝通, 與回傳值

這邊網路上可以找到很多的資訊

下面附上我主要用來跟JavaScript溝通的資料格式

	/// <summary>
    /// 自訂Ajax Call標準的回傳格式
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class AjaxData<T>
    {
        public AjaxData(T obj)
        {
               data = obj;
        }
		
        /// <summary>
        /// 執行結果 true/ false
        /// </summary>
        public bool result { get; set; }

        /// <summary>
        /// 額外回傳給client的訊息,例如錯誤訊息等...
        /// 可以用html
        /// </summary>
        public string message { get; set; }

        /// <summary>
        /// 實際要回傳的資料
        /// </summary>
        public T data { get; set; }
    }

這個架構可以用在大部分的結構上

並且回傳給 AJAX的success去處理

讓他判斷這次的動作是否成功 (result), 以及傳了什麼樣的訊息回來(message)

若有其他動作也可以把物件放入data

但是看ajax code可以看到一調

if ( data.d.result )

在VS 2005之後, Page Method加上Json標籤後回傳的物件都會在用一個d包起來

格式像是

{ d : { (真正的物件) } }

因此要加一個.d才能正常的取到值

( 其實我不是很清楚分界點在哪, 在前幾年的專案試圖用這種語法, 發現後台傳的是什麼前台接到的就是什麼

但是在新版的Visual Studio, 會發現回傳的格式多了一層 d )

其實使用JavaScript跟Server端的程式溝通的方法很多

我會挑選這個方法主要是因為寫的方式很直覺, 不用組字串或是拆解

可以直接用物件的方式取直並且寫程式對於新手也比較好上手

關鍵點就在 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

這一行上面

下一篇再做進一步的說明 (自以為詳細說不定錯誤百出 orz)

本文可能有理解錯誤或不盡不實的地方

請路過的前輩不要客氣用力打醒

這會是我們成長的主要養分

回首頁