MVVM架构~Knockoutjs系列之js接收C#数据集合的方式
2014-01-04 14:07
288 查看
返回目录
在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockoutjs只是在前台数据绑定中做了一点调整,它不在依赖于后台具体数据,你完全可以在
最后去为它动态绑定数据,一般地,我们会为这种页面添加一个JS文件,用来获取数据,以实现前台开发人员与后台代码开发人员的分离。
从view层拿数据的方式有两种,第一是通过ViewBag,ViewData,TempData,Model等容器来存储,然后在View上直接取即可,而第二种方式是通过一个GET请求,它通常是异步的,你可以使用JQ里的getJSON,它可以方便的实现数据的获取工作,它对集合的支
持是比较好的。
这时,json变量已经是一个Json数组了,它将C#里的IEnumable集合转换成了JSON对象
不仔细看,看不出问题,但一运行程序,问题就出来了,“从服务器那边获取不到数据”,这是为什么呢,明明有数据呀,这就是AJAX的陷阱了,你的 ko.applyBindings(new Cart())没有等待上面的取数据完,就输出了,所以,什么都没有,下面是正常的代码
你可以对比一下:
怎么样,只是代码的位置不同,结果就完全不同吧,呵呵!所以说,我们对问题的理解程度,有时,应该有一种“模棱两不可”的精神!
返回目录
在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockoutjs只是在前台数据绑定中做了一点调整,它不在依赖于后台具体数据,你完全可以在
最后去为它动态绑定数据,一般地,我们会为这种页面添加一个JS文件,用来获取数据,以实现前台开发人员与后台代码开发人员的分离。
从view层拿数据的方式有两种,第一是通过ViewBag,ViewData,TempData,Model等容器来存储,然后在View上直接取即可,而第二种方式是通过一个GET请求,它通常是异步的,你可以使用JQ里的getJSON,它可以方便的实现数据的获取工作,它对集合的支
持是比较好的。
方式一,通过ViewBag等容器实现的集合
var json =@Html.Raw(Json.Encode(ViewBag.Category));
这时,json变量已经是一个Json数组了,它将C#里的IEnumable集合转换成了JSON对象
方式二,通过getJSON等方式实现异步获取
注意,异步执行,它的意思是说,你的页面在一个ajax请求时,不会去等待它,而是直接执行下面的语句,这样,对于大数据量情况下,浏览器不会假死,用户体验会好一些,但有时,开发人员在写代码时,往往会掉到AJAX的陷阱中,看下面代码:$.getJSON("http://localhost:2166/api/values/", function (data) { var Cart = function () { // Stores an array of lines, and from these, can work out the grandTotal var self = this; //self.lines = ko.observableArray([new CartLine()]); self.lines = ko.observableArray(data); // Operations self.addLine = function () { self.lines.push(new CartLine()) }; self.removeLine = function (line) { self.lines.remove(line) }; } }); ko.applyBindings(new Cart());
不仔细看,看不出问题,但一运行程序,问题就出来了,“从服务器那边获取不到数据”,这是为什么呢,明明有数据呀,这就是AJAX的陷阱了,你的 ko.applyBindings(new Cart())没有等待上面的取数据完,就输出了,所以,什么都没有,下面是正常的代码
你可以对比一下:
$.getJSON("http://localhost:2166/api/values/", function (data) { var Cart = function () { // Stores an array of lines, and from these, can work out the grandTotal var self = this; //self.lines = ko.observableArray([new CartLine()]); self.lines = ko.observableArray(data); // Operations self.addLine = function () { self.lines.push(new CartLine()) }; self.removeLine = function (line) { self.lines.remove(line) }; } ko.applyBindings(new Cart()); });
怎么样,只是代码的位置不同,结果就完全不同吧,呵呵!所以说,我们对问题的理解程度,有时,应该有一种“模棱两不可”的精神!
返回目录
相关文章推荐
- 微软核心基础架构优化模型[CIO]
- 免费电子书网站大全
- 让A段架构师身价百倍的不二法门
- Android Sensor 架构深入剖析
- 网站的高性能架构
- 见多识广:CodePen项目网站简介
- MVVM架构~Knockoutjs系列之对象与对象组合
- Camera driver&V4L2驱动架构介绍
- 2012新.Net架构必备工具列表
- 网站SEO的一般操作流程
- 我自己建了一个个人博客网站,欢迎大家访问,后续功能还在添加之中
- 企业网站具有价值内页如何炼成的-www.bjrp.com
- 101个实用性网站你知道多少?
- 网站应用程式架构
- 三种让网站图片生成灰色效果的方法
- 利用LVS+Keepalived 实现高性能高可用负载均衡服务器
- ARM硬件架构学习体会
- RetHat 6.5 LAMP架构编译及安装
- VS2012发布网站详细步骤
- VS2012发布网站详细步骤