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 Apihttp://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



实时演示:

 

posted @ 2015-03-18 14:30  Insus.NET  阅读(1319)  评论(0编辑  收藏  举报