【ASP.NET MVC】数据到客户端(7)

前文ViewBag数据在服务端动态生成页面,也可以传到客户端浏览器供JS使用。

一、数据从控制器到客户端

前文介绍,动态生成页面时,控制器的数据 并没有传递到 客户端,而是给自己来用,生成View 再利用http传递到客户端浏览器。

当然数据也是可以传递给客户端的,但有需要先搞明白传递到客户端的 数据 给谁用?谁能够使用这些数据? 答案很简单: JS   (JavaScript ) ,其他的JQuery 等可以视为对JS的包装,也可以在客户端 “动起来” 

传递方法:

1、直接用 HTML 的元素的 属性来进行数据来传递(样式设置为 style="display:none" ,不显示该元素)

参考代码:

页面

<input id="test" style="display:none" value='@ViewBag.data'/>
<script>window.onload = function () {alert(document.getElementById("test").value);}
</script>

控制器里添加:

  ViewBag.data = "Just test!";

思路比较简单,服务器生成页面的时候 取 ViewBag 数据,并将数据赋值给id 为test 的 input 元素的 属性value ,传递到客户端后,JS转载,在页面加载完成后 ( window.onload ),自动执行代码 alert(document.getElementById("test").value);  

2、直接在JS代码中传数据

比第一种方法更简单的是在JS代码中值贴数据,JS代码也是控制器生成的! 代码如下:

<script>var msg = '@ViewBag.data';window.onload = function () {alert(msg);}
</script>

要理解,var msg = '@ViewBag.data';  这行也是在服务端生成的!所ViewBag可以使用。

var msg = @ViewBag.data; 语法错误,记得带(单双)引号。

二、数据类型

以上可以解决数据传递到浏览器,但是数据类型也是需要解决的问题——数据类型肯定不限于简单的值类型,肯定还有其它复合数据类型,比如集合类型?组合类型?

例:Echarts用来绘制图形的数据就很可能是一系列的数据(X轴,Y轴),对应就是集合类型的数据。

服务器与客户端数据传递数据,目前而言,比较通用的是JSON——搞明白它的用途,理解JSON就并不难了

JSON就是用一种指定 方式来让数据保持它原有的类型信息。网络传输使用的是字节流:什么面向对象、集合类型、甚至是普通的整数、浮点数都没有!就是一堆字节(八位二进制),那么肯定需要一种方法来对数据进行“补充”说明,以此来解释传送过来的一堆字节流!

JSON补充一些符号,比如双引号(“”),括号(中括号、大括号)、逗号等,通过嵌套组合来描述数据之间的关系。

其实最主要的就两种结构: 集合与组合,值得注意的是它们两可以相互嵌套,如:传送一个学生集合,学生又包括了姓名、年龄等(组合类型),而且学生还包括选修的课程列表,组合的学生类型里又包括了一个选修课的集合类型!

以上比较繁琐地分析JSON的用途。

1、服务端使用JSON

可以使用C#以及其他扩展包提供的JSON操作函数来实现数据“序列化"——JSON把特定涵义的数据变成字节流,传递到客户端后,再按照JSON格式进行解释,完美!

方法很多:

JavaScriptSerializer 法

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using TestWeb.Models;namespace TestWeb.Controllers
{public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){DataSet set= TestMysql.Query("select * from user");List<TestUser> list = new List<TestUser>();foreach (DataRow row in set.Tables[0].Rows){TestUser tmp = new TestUser(row["name"].ToString(), row["psw"].ToString(), int.Parse(row["age"].ToString()));list.Add(tmp);}ViewBag.stu_list = list;JavaScriptSerializer jss = new JavaScriptSerializer();ViewBag.data = jss.Serialize(list);return View();}}public class TestUser{public string name;public string psw;public int age;public TestUser(string _name, string _psw, int _age){name = _name;psw = _psw;age = _age;}}
}

页面:

<script>var msg = '@Html.Raw(ViewBag.data)';window.onload = function () {alert(msg);}
</script>

运行结果

要注意使用@Html.Raw 函数,页面如果改成:

<script>var msg = '@ViewBag.data';window.onload = function () {alert(msg);}
</script>

则运行结果为:

 很显然,对双引号的解释出了问题。

服务器JSON还有其他方法如:JSON.NET 和  扩展包Newtonsoft.Json

 ViewBag.data = JsonConvert.SerializeObject(list);

2、客户端JS使用JSON

代码:

<script>var msg = JSON.parse('@Html.Raw(ViewBag.data)');window.onload = function () {for (var i = 0; i < msg.length; i++) {alert("姓名:"+msg[i].name +" 年龄:"+msg[i].age +" 密码:"+msg[i].psw);}}
</script>

效果:

 很显然,浏览器对服务器传递的JSON字节流进行了正确的解释。

问题:

客户端是否可以将数据JSON序列化,传递到服务端控制器进行解释?当然可以,后续再探讨。

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

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

相关文章

神经概率语言模型

本文主要参考《A Neural Probabilistic Language Model》这是一篇很重要的语言模型论文,发表于2003年。主要贡献如下: 提出了一种基于神经网络的语言模型&#xff0c;是较早将神经网络应用于语言模型领域的工作之一&#xff0c;具有里程碑意义。采用神经网络模型预测下一个单词…

Linux环境下VS code的python与C++调试环境的安装

Linux环境下VS code的python与C调试环境的安装 文章目录 Linux环境下VS code的python与C调试环境的安装前言一、云服务器的环境二、VS code相关信息三、python 开发环境配置四、C开发环境配置1.测试main.cpp2.进行debug3.进行debug程序4.运行main.cpp程序步骤 前言 最近写的 C&…

Meta AI研究团队新AI模型: Llama 2 大语言模型

Llama是Facebook Research团队开发的基础语言模型集&#xff0c;旨在提供广泛的语言理解能力。它基于转换器架构&#xff0c;参数范围从7B到65B。通过使用Llama模型&#xff0c;研究人员和开发人员可以构建更先进的自然语言处理系统。您可以在GitHub上找到相关的代码和资源&…

【BASH】回顾与知识点梳理(二)

【BASH】回顾与知识点梳理 二 二. Shell 的变量功能2.1 什么是变量&#xff1f;2.2 变量的取用与设定: echo, 变量设定规则: set/unset2.3 环境变量的功能用 set 观察所有变量 (含环境变量与自定义变量)export&#xff1a; 自定义变量转成环境变量那如何将环境变量转成自定义变…

【Spring Cloud 五】OpenFeign负载均衡

这里写目录标题 系列文章目录背景一、OpenFeign是什么Feign是什么Feign的局限性 OpenFeign是什么 二、为什么要有OpenFeign三、如何使用OpenFeign服务提供者order-servicepom文件yml配置文件启动类实体ParamController 服务消费者user-servicepom文件yml配置文件启动类接口类Us…

怎么维护自己的电脑?

方向一&#xff1a;我的电脑介绍 我使用的是一台来自知名品牌的笔记本电脑。它具有高性能的核心配置&#xff0c;如快速处理器、大容量内存和高性能显卡&#xff0c;以及宽敞的存储空间。我选择这台电脑主要是因为它的出色性能和可靠性&#xff0c;能够满足我在学习和工作中的…

Bean的实例化方法

目录 1.工厂模式通常有三种形态&#xff1a; 2.简单工厂 2.1 静态工厂 2.1通过factory-bean实例化 2.3通过FactoryBean接口实例化 3.测试 关于容器的使用 3.1获得spring文件方式 3.2getBean方式 4.关闭容器 1.工厂模式通常有三种&#xff1a; 第一种&#xff1a;简单工…

(杭电多校)2023“钉耙编程”中国大学生算法设计超级联赛(5)

1001 Typhoon 计算几何 对于每一个避难点,计算其到所有线段的距离,取min即可 AC代码&#xff1a; #include<iostream> #include<algorithm> #include<cstring> #include<vector> #include<deque> #include<cmath> #include<cstdio&…

【Linux命令200例】whereis用于搜索以及定位二进制文件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…

nexus迁移

数据和配置迁移 打包两个目录&#xff0c;配置nexus-2.13.0-01和数据sonatype-work 数据量大可以split分割之后迁移再合并 大概看下文件目录 [roottest nexus]# tree -L 3 . ├── nexus-2.13.0-01 │ ├── bin │ │ ├── jsw │ │ ├── nexus │ │ …

selenium 遇到更新chorme驱动

打开浏览器,在地址栏输入chrome://version/便可以查看到谷歌当前的版本号 谷歌浏览器驱动的下载网址 http://chromedriver.storage.googleapis.com/index.htmlhttp://chromedriver.storage.googleapis.com/index.html 解压后把chromedriver.exe 放到python安装的目录下&am…

谈一谈缓存穿透,击穿,雪崩

缓存穿透 缓存穿透是指在使用缓存系统时&#xff0c;频繁查询一个不存在于缓存中的数据&#xff0c;导致这个查询每次都要通过缓存层去查询数据源&#xff0c;无法从缓存中获得结果。这种情况下&#xff0c;大量的请求会直接穿透缓存层&#xff0c;直接访问数据源&#xff0c;…

电动自行车上架eBay的UL2849、16CFR1512测试标准

在奥运经济的带动下&#xff0c;今年以来运动自行车消费有较大幅度增长&#xff0c;其中高端消费者对进口自行车需求扩张&#xff0c;上半年竞赛型自行车进口量同比增长49.5%。另外&#xff0c;电助力自行车在国际市场也倍受追捧&#xff0c;国际自行车贸易总额的60%来自中国&a…

嵌入式入门教学——C51

一、前期准备 1、硬件设备 2、软件设备 二、预备知识 1、什么是单片机&#xff1f; 在一片集成电路芯片上集成微处理器、存储器、IO接口电路&#xff0c;从而构成了单芯片微型计算机&#xff0c;及单片机。STC89C52单片机&#xff1a; STC&#xff1a;公司89&#xff1a;所属…

【计算机网络】应用层协议 -- DNS协议

文章目录 1. DNS背景2. 域名简介3. 域名解析过程4. 使用dig查看DNS过程 1. DNS背景 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 TCP/IP当中通过IP地址和端口号的方式&#xff0c;来确定…

调试正在运行的程序(Keil)

大家好&#xff0c;我是惊觉。接上一篇调试正在运行的程序(STM32CubeIDE)&#xff0c;今天Keil的实现方法。调试正在运行的程序&#xff0c;属于附着调试&#xff0c;在启动调试器时不会重置单片机的运行状态&#xff0c;从而可以定位死机等问题。没看过上一篇的同学&#xff0…

SystemC的调度器

文章目录 前言调度器初始化evaluatewait updatenotify delta notificationtime notification仿真结束 前言 SystemC是基于C的库&#xff0c;主要用来对 IC 进行功能建模和性能建模。有时也被用来当做 RTL (register transfer level) 级的升级版 HLS(High Level synthesis) 直接…

力扣 416. 分割等和子集

题目来源&#xff1a;https://leetcode.cn/problems/partition-equal-subset-sum/description/ C题解&#xff08;思路来源代码随想录&#xff09; &#xff1a; 背包问题有多种背包方式&#xff0c;常见的有&#xff1a;01背包、完全背包、多重背包、分组背包和混合背包等等。…

JVM基础篇-虚拟机栈

JVM基础篇-虚拟机栈 定义 Java Virtual Machine Stacks &#xff08;Java 虚拟机栈&#xff09; 每个线程运行时所需要的内存&#xff0c;称为虚拟机栈每个栈由多个栈帧&#xff08;Frame&#xff09;组成&#xff0c;对应着每次方法调用时所占用的内存每个线程只能有一个活动…

Manim(一款强大的数学可视化动画引擎)学习历程

相逢情便深&#xff0c;恨不相逢早 第一眼看见上面这种类型的视频我就深深被它的简约清楚所折服&#xff0c;我觉得它完全符合我的审美&#xff0c;我也相信只要了解过制作这种视频的软件的人都会喜欢上它。运用这种风格比较有名的是b站里的一位up主名叫3Blue1Brown&#xff0…