利用javascript實做 MVC 網頁(四)

前言：

利用javascript實做MVC 網頁(二) 談到如何將 A 網頁的表單資料 POST 給 B 網頁(在 B網頁後端接收後，轉成 javascript 物件，以 <% =變數 %> 方式嵌入網頁中。
利用javascript實做 MVC 網頁(三)中談到如何將後端處理的結果，如何以物件方式返回給網頁內的呼叫程式。

一般由 jQuery.ajax 呼叫後端程式時(詳見：利用jQuery -Ajax 叫用 ASP.NET 的幾種方式)，如果要傳送的表單欄位，則在 ajax 中的 data: 屬性設定欲傳送的 Key:value (值對)，如：

data: JSON.stringify({field1:value1, field2: value2, field3:value3})

在接收端，如 WebService 或 PageMethod 則利用函數的參數：

METHOD(string field1, string field2, string field3)  來接收表單欄位內容

註：參數是以名稱對應方式，而非順序對應!

如果表單欄位數二、三個，使用這種傳直方式還不會有多大問題，如果表單位有二、三十個，那參數不是要寫到天邊去了!  顯然參數名稱對表單欄位的方式就不太合用! 這時候我們可以改用字典物件(Dictionary<>)方式來接收!
前端利用 form2json 將表單所有欄位轉成 JSON 物件

data:JSON.stringify({args:form2json("#myform")})

接收端改成

METHOD(Dictionary<string, string> args)
{
   var 變數 = args["欄位名稱"];   //就可以取得傳來的值了!
}


form2json 程式碼如下：

function form2json(formId)    //formId 是要加入 JSON 的表單 id 
{
    var data = new Object();
   $(formId +" :input:not(:button, :reset, :submit)").each(function()
    {
        if($(this).attr('type')=='checkbox')
        {
                data[$(this).attr('name')]=($(this).attr('checked')) ? 1 : 0 ;
        }   else     {
            data[$(this).attr('name')]=$(this).val();
        }
    });
    return data;
} 

後記：自己改寫了一支 jQuery Extention，只要在網頁引入：
 <script type="text/javascript" language="javascript" src="js/cmj.toJSON.js"></script>
然後在 data 用
data: JSON.stringify({arg:$('#myform').toJSON()}),
就可以輕鬆將表單欄位組成 JSON 物件了!