Web Api其中的PUT功能示範

標籤：

Insus.NET這幾天均在學習Web API知識，並練習。怎樣擷取資料，提交資料或是儲存資料。你可以溫習一下《Post model至Web Api建立或是儲存資料》http://www.cnblogs.com/insus/p/4343833.html 和《添加JSON Data到已經存在的JSON檔案中》http://www.cnblogs.com/insus/p/4344547.html ，這均是把json序列化資料儲存至檔案中。

即然有對資料擷取，提交儲存，那當然有更新資料的功能了。本篇中，我們就將學會怎樣去操作Web Api進行資料更新，特別是對檔案中資料進行編輯更新。

需要對資料更新，那得先把資料顯示在網頁上，然後編輯，再進行更新。去擷取Web API的資料顯示於網頁，我們有學習了，在此也可以重新溫習一下:
《ASP.NET MVC的Web Api的實練》http://www.cnblogs.com/insus/p/4334316.html
《Html網頁使用jQuery傳遞參數並擷取Web API的資料》http://www.cnblogs.com/insus/p/4337409.html
《傳遞多個參數並擷取Web API的資料》http://www.cnblogs.com/insus/p/4341026.html
《Post model至Web Api》http://www.cnblogs.com/insus/p/4343538.html


去Api控制器，添加一個PUT的方法，邏輯處理均有說明，參考之。

判斷List<Order>是否有存在的記錄：

var oo = orders.Where(d => d.OrderNumber == order.OrderNumber).FirstOrDefault(); if (oo != null) {    //...}

View Code

現在我們建立一個html網頁，去顯示資料和更新資料，動態產生的資料表中，添加多一列，是希望在每行後動態產生一個更新銨鈕。好讓使用者能對資料進行更新。

 

OK,接下來，我們可以寫jQuery程式了，先是顯示資料。在處理此部之前，由於前面一系列擷取資料，均來自Entity的，現在是來自檔案，因此需要對Get()稍作修改：

下面是從Web Api擷取了資料，並動態顯示於span或是text的簽標上：


在設計時你應該知道哪些資料是可編輯的，那些是唯讀資料而使用不同的html標籤來處理：
此時如果沒有什麼問題，資料應該能正常顯示出來：

下面我們可以寫Update銨鈕的事件，這裡有一點需要注意的就是這個銨鈕是動態產生的，我們處理它的Click事件時，得使用jQuery的delegate委託，有關jQuery的事件處理更多參考《jQuery動態產生的銨鈕怎樣實現事件處理》http://www.cnblogs.com/insus/p/4315984.html



即時示範：

 

Web Api其中的PUT功能示範