訪客連結到線上表單填寫資料，可送出、暫存及列印表單。送出表單後，資料也會同步到CRM裡。多麼簡單的需求描述，可不是嗎？但這裡並不打算詳述實作上的細節，僅分享可行的實作方式及想法。
表單製作
Boostrap在這部份主要是扮演排版的角色，其提供的CSS類別可讓表單風格看起來整齊一致。由於需要提供使用者輸入生日的功能，找到了幾個師出同門的套件如Datepicker for Bootstrap、bootstrap-datepicker及Date/Time Picker for Twitter Boostrap，最後選用了Datepicker for Bootstrap。
在表單欄位的配置上，因為有textbox、checkbox、radio button、drop-down list、button，所以必須對KnockoutJS的幾個部份有一定程度的了解，如Creating view models with observables、Using computed observables、Working with observable arrays、The visible binding、The text binding、The foreach binding、The with binding、The click binding、The submit binding、The enable binding、The value binding、The checked binding、The options binding、The data-bind syntax及The binding context。
表單送出
表單資料送出到Server端時一定會先做資料驗証。KnockoutJS本身並沒有提供驗證的功能，不過已有現成的extender可以使用 - KnockoutJS Validation，當然你也可以使用jQuery Validation Plugin，如jQuery驗証Email及DropDownList控制項的資料驗証 - 使用RequiredFieldValidator & jQuery Validation Plugin。我選擇使用KnockoutJS Validation，因為它可以優雅地與KnockoutJS整合，使用上就如同在Server端的ViewModel加上Data Annotation那樣簡單。
在送出資料時有兩種選擇，同步與非同步，我選用非同步機制。在KnockoutJS使用非同步機制送出資料，請務必參考Documentation裡的Loading and saving JSON data及Tutorials裡的Loading and saving data。至於Server端接收資料，有更多種選擇，可以是ASP.NET MVC的Action、Web Services、WCF Services、泛型處理常式或是ASP.NET Web Forms的PageMethods。我使用了PageMethods來實作，因為之前有經驗且它可自動幫我將JSON反序列化回物件。
表單暫存
由於需要輸入的欄位不少，我們希望提供使用者一個暫存的機制，以防萬一。Cookie可能因資料大小限制關係不敷使用，所以先以Session用來存放暫存至Server端的反序列化物件，這未必是個好方法，不過以目前需求來說，足以。既然有暫存，表示我們需要將它取出。由PageMethods取出Server端物件時會自動轉換為JSON物件，這時我們就可將這JSON物件更新回ViewModel，接著KnockoutJS會自動幫我們更新相對應的UI。取回的JSON物件要更新回ViewModel，除了手動處理外，也可參考The mapping plugin。
表單列印
要列印表單，可以將使用者畫面切到預覽頁面並提供列印按鈕，所以你可能需要準備兩個版本的表單，一個是填寫用的表單，一個是列印用的表單，再以ViewModel搭配Knockout的visible binding做畫面上的切換，如此便不需要自行操作DOM。如果CSS能力不錯，甚至可能只要準備一個列印用的CSS類別再做畫面切換即可。在列印表單時，如果想要控制列印版面配置，可參考The @page Rule或W3C的CSS規格文件。
前端、後端及CRM整合
整個需求實際上是由兩個人負責實作，我負責前端與部份後端，而同事負責後端與CRM的整合。後端與CRM溝通是透過WCF Service，我們在後端與CRM中間安插了Service Agent，如此我不需要知道如何使用這支WCF Service或與CRM溝通的實作細節如何，只需提供Service Agent需要的資料即可。
No comments:
Post a Comment