另類的表單數據"序列化"

背景:最近在做項目時,由于編輯頁面需要提交的數據量有些多,而且在提交前還需要做一些邏輯處理,所以如果按照正常的方式,一個個的獲取值然后拼接json對象傳到后臺的話相對工作量較大,而且容易出錯,后期的維護工作也相對困難,于是愛偷懶的我就像能不能有個辦法不用一個個的去獲取值,拼json對象,還能直接以與數據庫表結構相同的model的方式接收數據呢?就我所知的好像目前現有的方式都是通過序列化插件什么的,而我當時也有考慮用這個,但是我覺得這些插件尤其讓人人用著不爽的缺點:

(1)需要提交的內容必須在<form>標簽內

(2)序列化后的json包含<form>里面的全部表單內容

(3)無法滿足一些個性化要求(如多選時以","隔開;既需要去下拉框的value也需去text)

而我的項目中有以下幾個要求

(1) 部分數據在母版頁中(會隨著用戶的不同操作而改變)

(2)用戶不同操作,提交的數據也不一致

(3)有些數據需要做特殊處理

有的朋友可能會說既然這樣那你完全可以把form放在母版頁里呀, 處理好的數據放在頁面的隱藏域利亞.可是如果這樣處理的話那么提交的內容將相當多,隱藏域也相當的多,所以我選擇了用以下方式:

為了方便理解以下代碼均做了簡化處理

html如下:

 1 <div id="demos">
 2     <input id="Id" type="hidden" value="14" />
 3     <input id="ActivityName" type="text" value="" />
 4     <input id="ActivityContent" type="text" value="" />
 5     <input id="ActivityTime" type="text" value="" />
 6     <input id="ActivityAddress" type="text" value="" />
 7     <input id="PersonInChage" type="text" value="" />
 8     <input id="Field1" type="text" value="" />
 9     <input id="Field2" type="text" value="" />
10     <input id="Field3" type="text" value="" />
11     <input id="Field4" type="text" value="" />
12 </div>

js如下

 1  function GetFormParamsInfo() {
 2         var jsonModle = {};
 3         $("#demos input").each(function () {
 4             var fieldName = $(this).attr("id");
 5             var fieldValue = $(this).val();
 6             jsonModle[fieldName] = fieldValue;
 7         });
 8         return jsonModle;
 9     };
10 
11     $.ajax({
12         type: "POST",
13         url: "Home/Index",
14         data: GetFormParamsInfo(),
15         success: function (msg) {
16            //.....
17         }
18     });

以上代碼中GetFormParamsInfo方法中可以在return之前任意的添加自己特定處理的代碼如

if(a==b)

{

　　jsonModle["xxx"] = xxxx;

}else{

jsonModle["xxxxx"] = xxxxxxxxx;

}

return jsonModle;

等等,可以任意的去

后臺代碼:

 public class HomeController : Controller
    {
        public ActionResult Index(ViewModcl model)
        {
            //處理
            return View();
        }

    }

    public class ViewModcl
    {
        public string Id { set; get; }
        public string ActivityName { set; get; }
        public string ActivityContent { set; get; }
        public string ActivityTime { set; get; }
        public string ActivityAddress { set; get; }
        public string PersonInChage { set; get; }
        public string Field1 { set; get; }
        public string Field2 { set; get; }
        public string Field3 { set; get; }
        public string Field4 { set; get; }

    }

說明如下:

html中的需要提交的內容之div中然后我獲取需要提交的內容時只需要通過each遍歷組裝成json對象,然后通過ajax直接提交到后臺,而后臺以實體類對象方式直接接收就好了

有點:

1,無需form

2,可以任意制定參數規則

3,提交最小數量的數據內容(不相關的數據都不提交)

4,幾乎無需隱藏域(編輯時存儲id)

由于個人能力有限,自然有些考慮不到的,還望各位路過的大牛們能幫忙指點指點,小弟在此先謝謝了.

posted @ 2014-10-29 22:36 風隨月影飄閱讀(1440) 評論(7) 收藏舉報

刷新頁面返回頂部

louis.cheng

另類的表單數據"序列化"

公告