jQuery大神幫你做後台 - 存資料篇 | 苦命工程師的載沉載浮 - 點部落

2011-01-07

jQuery大神幫你做後台 - 存資料篇

6328
0
jQuery

jQuery大神幫你做後台 - 存資料篇

其實這篇有騙文章數的嫌疑

不過想了一想還是拆開來講比較清楚

上一篇說到怎麼用AJAX + PageMethod跟Server端要資料, 然後用統一的jQuery函式把值寫進去dom

接著呈現出要修改的詳細資料給使用者看

而等使用者修改完後按了儲存

用舊的寫法自然可以用AutoPostBack很簡單的直接在Server端操作TextBox的資料

但是假如我們想要用Ajax要怎麼做呢?

先來釐清一下概念

(組成obj) –> 透過AJAX跟JSON把obj丟到Server端 –> Server端接到obj之後怎麼處理是他家的事 –> 告訴Client端說儲存成功還是失敗

基本上後面的東西都很清楚, 就是前面說的怎麼用jQuery AJAX, JSON, PageMethod互相溝通而已

但是要怎麼組成obj呢

其實也可以利用jQuery加上java script匿名型別的特性

我們可以寫出這個UI


$.makeObj = function (container) { //將containers內的input轉成object
    var $container = $(container);
    var obj = {};
    $container.find(':text,textarea').each(function () {
        var $this = $(this);
        var id = $this.attr('id');
        if (!id || id.length < 4) return;
        id = id.substr(3); //習慣textbox以txt開頭
        obj[id] = $this.val();
    });

    $container.find('select').each(function () {
        var $this = $(this);
        var id = $this.attr('id');
        if (!id || id.length < 4) return;
        id = id.substr(3); //select以ddl開頭
        obj[id] = $this.val();
    });

    $container.find(':radio:checked').each(function () {
        var $this = $(this);
        var id = $this.attr('name');
        if (!id || id.length < 4) return;
        if (obj[id] == undefined) {
            id = id.substr(3); //習慣radiobutton以rbl開頭
            obj[id] = $this.val();
        }
    });

    return obj;
};

先簡單說明一下這個UI的運作流程, 也是一樣給他一個區域

接著jQuery會自動去掃出每一個select, input

接著先宣告一個空的obj var obj = {};

然後用js可以直接指定值給屬性名稱來增加屬性的特性

用obj[{attr}] = val的方法

把每一個input的id處理成正確的屬性名稱, 接著把val指進去

最後就組好一個obj, 把這個obj丟給PageMethod就可以


var obj = $.makeObj('#editArea');
$.ajax({
	url: '{PageName}.aspx/Save',
	data: $.toJSON({ obj }),
	beforeSend: lockEdit,
	complete: unlockEdit,
	success: function (data) {
		//do Something If Success or Failed
	}
});

基本上命名規則定好, 每一頁都可以用這支UI

而假如有些比較特殊的屬性沒辦法直接用makeObj就組好

一樣可以在組好後的obj在手動加上即可

var obj = $.makeObj(‘#editArea’);

obj.xxx = another();//by頁面加進去的參數

而或許有人會問, 這樣會不會多組了不需要的屬性

前面幾篇有說, .NET的自動parseJSON功能很優秀

屬性不要完全符合

Server類別 (沒傳來的屬性自動放預設值)

Client端物件 (Server端沒有的屬性自動忽略)

所以要特別確認Id是不是有mapping到, 不然可能丟null職過去自己都不知道

而會出錯的可能性多半是在格式不正確, 例如Server端類別的屬性A是Int32, 卻丟一個String過去, 那穩錯的

這些程式都是一個方向或是參考

希望能跟各方高手交流, 有哪些可以改進或著加強的地方

一起讓我們的程式寫的更漂亮

下一篇是我最沒自信的作品, jQuery大神幫你做後台 - 驗證篇

請…不要太期待 orz

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

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

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

回首頁