KnockoutJS-與服務端交互

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

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

 

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

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

　　

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

　　

　　三、效果實現圖

　　

2、客戶端經過Get請求服務端數據

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

　　

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

　　

　　三、效果實現圖

　　

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

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

　　一、post提交單條數據，將單條數據轉換爲json格式，使用ko提供的直接將viewModel中的集合轉換成json格式的數據，該過程也可使用其它方式完成，並不是徹底依賴ko

　　

　　二、服務端指定接收參數，完成相應操做返回結果，注意使用了FromBody特性，只容許最多一個參數，若是有多餘參數要使用，則將參數打包成一個新的類，大多使用dto

　　

　　三、前端提交整個集合到後臺，先將集合打包成Json格式，而後使用ajax完成提交，操做過程當中，因爲集合是存在於observableArray的監控數組中，不能直接序列化，所以須要使用其它方式進行轉換

 　　

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

　　

　　五、效果實現圖

 　　

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

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

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

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

　　

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

　　

　　注意：在使用asp.net core時，服務端返回的json格式爲駝峯式，當在上一步操做中，初始化時爲首字母大寫使用的是帕斯卡命名方式，而且在頁面元素中也是使用首字母大寫的形式，所以須要改變服務端默認的駝峯式規則。

　　在StartUp中，修改mvc的默認規則，使用Newtonsoft提供的轉換方式，這樣一來，先後端交互，前端綁定，傳遞到後端都是使用帕斯卡命名規則，對於前端來說最好是使用駝峯式，一樣也能夠作相應的改變，好比對服務端視圖模型屬性中使用JsonProperty特性。

　　

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

　　

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

 

　本文地址： http://www.javashuo.com/article/p-dnwsgrlf-eh.html 

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

　

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