MVVM架构~Knockoutjs系列之js接收C#数据集合的方式

简介:

在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());
        });

怎么样,只是代码的位置不同,结果就完全不同吧,呵呵!所以说,我们对问题的理解程度,有时,应该有一种“模棱两不可”的精神!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~Knockoutjs系列之js接收C#数据集合的方式,如需转载请自行联系原博主。

目录
相关文章
|
25天前
|
C# 数据库
c# dev Form1 gridview1使用Form2 gridview1的数据
c# dev Form1 gridview1使用Form2 gridview1的数据
|
2月前
|
存储 SQL 关系型数据库
ClickHouse(02)ClickHouse架构设计介绍概述与ClickHouse数据分片设计
ClickHouse的核心架构包括执行过程和数据存储两部分。执行过程涉及Parser与Interpreter解析SQL,通过Column、DataType、Block、Functions和Storage模块处理数据。Column是内存中列的表示,Field处理单个值,DataType负责序列化和反序列化,Block是内存中表的子集,Block Streams处理数据流。Storage代表表,使用不同的引擎如StorageMergeTree。数据存储基于分片和副本,1个分片由多个副本组成,每个节点只能拥有1个分片。
90 0
ClickHouse(02)ClickHouse架构设计介绍概述与ClickHouse数据分片设计
|
2月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
43 0
|
25天前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
|
25天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
2月前
|
SQL C# 数据库
C# 读取多条数据记录导出到 Word 标签模板
C# 读取多条数据记录导出到 Word 标签模板
|
2月前
|
安全 数据处理 C#
C# Post数据或文件到指定的服务器进行接收
C# Post数据或文件到指定的服务器进行接收
|
2月前
|
存储 安全 C#
C#使用集合组织相关数据
C#使用集合组织相关数据
12 0
|
1天前
|
JavaScript Java 持续交付
构建高效微服务架构:后端开发的新范式
【5月更文挑战第3天】 在现代软件开发的浪潮中,微服务架构以其灵活性、可扩展性和技术多样性而受到重视。本文深入探讨了如何构建一个高效的微服务系统,包括关键的设计原则、技术选型、以及实现细节。我们将通过分析微服务的核心概念,提供一套实用的步骤和最佳实践,以指导开发者构建出既健壮又易于维护的分布式系统。文章将重点讨论如何在保证系统性能和稳定性的前提下,实现服务的解耦与独立部署,从而推动后端开发工作流的优化和创新。