2013年5月22日 星期三

利用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 物件了!

沒有留言:

張貼留言