利用javascript實做 MVC 網頁(三)

前面利用javascript實做 MVC 網頁(二) 已說明如何將Submit 的 Form 傳給後端的程式，也說明後端程式如可將對應的欄位資料及屬性以 Dictionary<> 方式傳給前端的 AJAX (或插入 javascript 的變數)，接著就來探討前端在接收到 Dictionary 物件後如何對應指定給網頁上的欄位(以 id 來對應)!
這篇續文拖了一個多月，因為在此期間另外被要求開發Android上的App (題庫模擬測驗，改天再發表成果)，所以暫停了這個主題的實作。
不論從網頁Submit過來的資料，或由後端回傳的資料，我們都已用JSON格式轉化成字串，故此前端的Javascript必須解析此一字串的內容，雖然說寫程式要站在巨人的肩膀上，可是現成處理前端往後送的模組很多，例如：jForm，甚至jQuery內帶的功能都可以幫我們把欄位或表單打包來Post給後端程式，但是處理JSON 資料對表單欄位對應的模卻少見，最多的是表格(Grid)的處理，所以就自己動手寫一支! cmj.formRender.js 可以從我的 google.Docs 下載!
對照利用javascript實做 MVC 網頁(二)的說明，要供前端應用的JSON字串會長成這個樣子：
{"userid":{"value":"i123","style":"color:red;text-align:right;"}} (單一欄位時) 或

{"userid":{"value":"i123","style":"color:red;text-align:right;"},
"title":{"value":"科長","style":"color:red;text-align:right;"}} (多欄位時) 或

[{"value":"1","style":"color:red;text-align:right;","text":"選項一"},
{"value":"2","style":"color:blue;text-align:left;","text":"選項二","selected":"selected"}] (單欄多值時)
上列的字串要先經 JSON.parse() 轉換成 JavaScript 的物件，再傳給 cmj.formRender.js 的函數!

cmj.formRender.js 提供5個函數：
rendForm(formData) ：  會利用欄位的 id 屬性，自動設定欄位的值(value 或  text 或 checked 或 selected)

而下方的四個函數則針對 Option, Radio, CheckBox 及 List 的操值，這些欄位有一個共同的特性：多個選項清單

rendOption(parentObj, targetData, addTo)

rendRadio(parentObj, targetData, addTo, itemsPerLine)

rendCheckbox(parentObj, targetData, addTo, itemsPerLine)

rendList(parentObj, targetData, listType, itemsPerLine, addTo)

    說明：

       parentObj ： 由 $(SELECTOR) 找到的物件

        targetData: 即上面回傳經 JSON.parse() 後的物件

        addTo: 是否附加到現有的項目之下(或者要先清現有項目)

        itemsPerLine: 針對 checkbox, radio 橫向要顯示幾個項目。

        listType: 字串 checkbox, radio, ol, ul 表示要產製的項目類別，rendRadio/rendCheckbox 會呼叫此一函數

也就是說呼叫rendCheckbox(parentObj, targetData, addTo, itemsPerLine)

和呼叫

       rendList(parentObj, targetData, 'checkbox', itemsPerLine, addTo)

是一樣的!

---

透過上面的5個函數，幾乎可以處理頁面上欄位「值」的問題，至於其他特效或 Grid 就借用現成的模組了!

系列連結：
利用javascript實做 MVC網頁(一)
利用javascript實做 MVC網頁(二)