幾乎所有Web應用程序都要和服務器端交換數據，交換數據時最方便的就是使用JSON格式。Knockout可以實現很復雜的客戶端交互，對於前後端交互使用的技術最為基本且常用的是Ajax，本次利用Ajax和ko的雙向綁定完成一些簡單的功能，可以快速展示出ko的方便之處。

　　Demo地址： https://gitee.com/530521314/koInstance.git

一、服務端返回數據綁定到客戶端

　　1、準備好一些初始數據，直接通過View方法將視圖實體返回到視圖文件中。

　　2、前端設置為強類型，初始化ko並從Model中獲取數據並加載到ko對象中，同時完成了頁面渲染。(註意暫時未使用Mapping插件)

　　3、效果實現圖

二、客戶端通過Get請求服務端數據

　　1、通過前端請求，完成將服務端數據加載到當前頁面中，使用$.get方法或是$.getjson方法或是$.ajax方法都行，本次直接使用$.get方法，當獲取服務端數據成功後，清除界面上的已有數據，並將新數據循環綁定到viewModel中

　　2、服務端編寫簡單的方法，在原來基礎數據的基礎上增加一條新數據，並將數據打包成Json格式，註意將獲取成功與否的操作結果返回

　　3、效果實現圖

三、客戶端POST提交數據到服務端(手動綁定)

　　前端數據提交到後端的方式可以有簡單的get提交，提交幾個參數跟在url後面，用於查詢相關信息，也有使用post提交表單數據或是json或xml格式的數據，本次只使用一下post提交json數據

　　1、post提交單條數據，將單條數據轉換為json格式，使用ko提供的直接將viewModel中的集合轉換成json格式的數據，該過程也可以使用其它方式完成，並非完全依賴ko

　　2、服務端指定接收參數，完成相應操作返回結果，註意使用了FromBody特性，只允許最多一個參數，如果有多余參數要使用，則將參數打包成一個新的類，大多使用dto

　　3、前端提交整個集合到後臺，先將集合打包成Json格式，然後使用ajax完成提交，操作過程中，由於集合是存在於observableArray的監控數組中，不能直接序列化，因此需要使用其它方式進行轉換

　　4、在服務端使用List<>來接收，通過asp.net core提供的模型綁定，將前端請求中的json數據完成綁定到List集合中

　　5、效果實現圖

四、客戶端POST提交數據到服務端(自動綁定)

　　對於之前的一些操作，有些操作可以使用ko提供的插件直接幫助我們完成綁定工作，而無需進行大量屬性的綁定工作和處理復雜的嵌套結構，如同在後端的AutoMapper工具，在ko中有一個ko.mapping插件，可以很大程度上提高我們的開發效率。

　　mapping插件使得JavaScript簡單對象（或JSON結構）轉換成Observable的view model，這樣一來，無需在前端聲明一些view Model類了。

　　1、從後臺返回的List集合通過mapping插件綁定到前端viewModel實例屬性中

　　2、獲取服務端的List集合綁定到前端頁面中，使用ko插件直接綁定

　　註意：在使用asp.net core時，服務端返回的json格式為駝峰式，當在上一步操作中，初始化時為首字母大寫使用的是帕斯卡命名方式，並且在頁面元素中也是使用首字母大寫的形式，因此需要改變服務端默認的駝峰式規則。

　　在StartUp中，修改mvc的默認規則，使用Newtonsoft提供的轉換方式，這樣一來，前後端交互，前端綁定，傳遞到後端都是使用帕斯卡命名規則，對於前端來講最好是使用駝峰式，同樣也可以做相應的改變。

　　3、POST提交前端數組並序列化後到服務端中，後端控制器中並無修改，只在前端相應變化即可

　至此，已完成了knockoutJS前後端交互的方式，對於其它表單提交等等，都比較簡單，最後，祝大家新年快樂！。

　本文地址： https://www.cnblogs.com/CKExp/p/9296350.html

　歡迎關註微信訂閱號，有新的文章將同步到訂閱號中

2019-01-02,望技術有成後能回來看見自己的腳步

KnockoutJS基礎知識(四)