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



实时演示：