KnockoutJS-与服务端交互

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

  Demo地址: https://gitee.com/530521314/koInstance.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前后端交互的方式,对于其它表单提交等等,都比较简单,最后,祝大家新年快乐!。

 

 本文地址: https://www.cnblogs.com/CKExp/p/9296350.html 

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

 

2019-01-02,望技术有成后能回来看见自己的脚步

转载于:https://www.cnblogs.com/CKExp/p/9296350.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/484426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络无法区分异同,而且这个缺陷是本质性的

来源&#xff1a;混沌巡洋舰1969年《芝麻街》的第一集中有一个片段叫做“这些东西中的一个与众不同”。观众们被要求考虑一张展示三个2和一个 w 的海报&#xff0c;然后一边跟着游戏的同名广告歌唱&#xff0c;一边决定哪个符号不属于这个标志。《芝麻街》中的很多集重复了这个…

matlab计算级数和

级数(series)是指将数列的项依次用加号连接起来的函数。典型的级数有正项级数、交错级数、幂级数、傅里叶级数等。 —百度百科 matlab提供了直接计算级数的两个方法&#xff0c;symsum的两种形式&#xff08;做题刚开始以为是重载&#xff0c;直接导致了上一篇帖子的产生 &…

北国风光

转载于:https://www.cnblogs.com/ssyfj/p/10214328.html

“期待已久的UFO报告”公布了

来源&#xff1a;环球网 作者&#xff1a;张晓雅多家美媒表示&#xff0c;调查没有得出确切结论。包括美国有线电视新闻网&#xff08;CNN&#xff09;、美联社、美国哥伦比亚广播公司&#xff08;CBS&#xff09;在内多家美媒最新消息&#xff0c;美国政府当地时间25日发布报告…

Bmp格式与编程读取解析

Bmp格式 DigitalImage图像类设计 图像加载函数,通过bmp图片路径&#xff0c;加载图像数据&#xff0c;通过类构造函数来实现。 DigitalImage::DigitalImage(LPCTSTR lpszPath) {StrCpy(m_FilePath, lpszPath);CFile RdBmp;if (!RdBmp.Open(m_FilePath, CFile::modeRead | CFil…

关于奈氏准则和香农公式

对于带宽固定的信道&#xff0c;提高信息传输速率有两种方式&#xff1a; 提高码元在信道中的传输速率&#xff1b;提高信噪比&#xff1b; 我们以高速公路的例子来理解&#xff1a; 码元相当于车辆&#xff0c;信道相当于公路&#xff0c;所有的汽车都在运输相同的货物&…

五角大楼公布UFO报告,不明飞行物到底是什么?(全文)

来源&#xff1a;大数据实验室五角大楼周五发布的一份有关不明飞行物的重要报告称&#xff0c;国防和情报分析人员缺乏足够的数据来确定军事飞行员观察到的神秘飞行物体的性质&#xff0c;包括它们是先进的地球技术、大气层还是外星天体。这份报告提交国会并向公众公布&#xf…

python 词云小demo

词云小demo jiebawordcloud一 什么是词云&#xff1f; 由词汇组成类似云的彩色图形。“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出&#xff0c;形成“关键词云层”或“关键词渲染”&#xff0c;从而过滤掉大量的文本信息&#xff0c;使浏览网页者只要一眼…

python--类与GUI编程框架

类属性 类的数据属性&#xff08;静态成员&#xff09;&#xff1a;仅仅是定义的类变量在类创建后被使用可以由类的方法来更新&#xff0c;也可以在主程序中更新类属性和实例无关&#xff0c;修改类属性需要使用类名 class Dog(object):counter0def __init__(self,name):self.…

信道复用技术之码分复用

2020730第一次修改&#xff1a;提升了图片的清晰度 1. 首先来说说什么是信道复用 信道复用&#xff0c;顾名思义&#xff0c;就是把多个用户使用的信道合并在一条信道&#xff0c;即一条信道承载着多个用户传输数据的任务&#xff1b; ps&#xff1a;信道&#xff1a;数据信息传…

《新一代城市大脑建设与发展》专家研讨会在京举办

2021年6月26日&#xff0c;新一代城市大脑建设与发展专家研讨会在京举办&#xff0c;本次活动由城市大脑全球标准研究组主办&#xff0c;远望智库承办。20多位专家参与本次研讨会&#xff0c;对城市大脑、智慧城市的发展趋势&#xff0c;存在的问题&#xff0c;产生的新成果等方…

【基于Python+Flask项目部署系列--03】开发测试环境配置-基于Ubuntu16.04

一、开发测试环境介绍 前提已经部署完【基于PythonFlask项目部署系列--02】Ubuntu16.04服务器安装。建议部署2套环境&#xff1a;开发测试环境生产环境。 这篇文章主要讲解测试环境如何配置python flask项目与运行。 测试环境主要使用【虚拟环境】进行部署代码部署&#xff0c;…

机器学习

机器学习 sklearn基础功能&#xff1a; 主要使用python的sklearn库:sklearn库共分为6大部分&#xff0c;分别用于完成分类任务、回归任务、聚类任务、降维任务、模型选择以及数据的预处理。各模块功能介绍 分类任务分类模型加载模块最近邻算法neighbors.NearestNeighbors支持…

费米悖论的三十种解释

© David B. Mattingly来源&#xff1a;利维坦 文&#xff1a;Ella Alderson译&#xff1a;Rachel校对&#xff1a;Yord原文&#xff1a;/medium.com/predict/30-solutions-to-the-fermi-paradox-aaabfce56280利维坦按&#xff1a;我个人现阶段觉得&#xff0c;与其说接受宇…

无监督学习

目标 利用无标签的数据学习数据的分布或数据与数据之间的关系被称作无监督学习。 有监督学习与无监督学习的最大去区别在于数据是否有标签。 无监督学习最常见的应用场景是聚类和降维。 聚类 聚类&#xff0c;就是根据数据的“相似性”将数据分为多类的过程。相似性评估&am…

重磅!三星宣布3nm成功流片!

来源&#xff1a;世界先进制造技术论坛(AMT)编辑&#xff1a;小艾 6月29日&#xff0c;据外媒最新报道&#xff0c;三星宣布&#xff0c;3nm制程技术已经正式流片! 据悉&#xff0c;三星的3nm制程采用的是GAA架构&#xff0c;性能上完胜台积电的3nm FinFET架构!据报导&#xff…

前端实战:仿写小米官网第一天

前端实战的第一天 小米官网 目前效果&#xff1a; 实现功能&#xff1a; 导航栏&#xff0c;首页切换&#xff0c;无淡入淡出效果的轮播图&#xff0c;搜索功能&#xff0c;产品展示栏下滑 代码&#xff08;便于记录&#xff0c;将js、css和html糅合在了一起&#xff09;&…