KnockoutJS-与服务端交互

  几乎所有Web应用程序都要和服务器端交换数据,交换数据时最方便的就是使用JSON格式。Knockout可以实现很复杂的客户端交互,对于前后端交互使用的技术最为基本且常用的是Ajax,本次利用Ajax和ko的双向绑定完成一些简单的功能,可以快速展示出ko的方便之处。

  代码地址: https://gitee.com/530521314/Partner.TreasureChest.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提供的转换方式,这样一来,前后端交互,前端绑定,传递到后端都是使用帕斯卡命名规则,对于前端来讲最好是使用驼峰式,同样也可以做相应的改变,比如对服务端视图模型属性中使用JsonProperty特性。

  

  3、POST提交前端数组并序列化后到服务端中,后端控制器中并无修改,只在前端相应变化即可

  

  至此,已完成了knockoutJS前后端交互的方式,对于其它表单提交等等,都比较简单,最后,祝大家新年快乐!。

 

 欢迎关注微信订阅号,有新的文章将同步到订阅号中

 

2019-01-02,望技术有成后能回来看见自己的脚步
posted @ 2019-01-02 22:12  微笑刺客D  阅读(524)  评论(0编辑  收藏  举报
返回顶部