网站引导制作,校园网网站建设费用,淘宝店标logo在线制作免费,涞源县住房和城乡建设局网站前文ViewBag数据在服务端动态生成页面#xff0c;也可以传到客户端浏览器供JS使用。
一、数据从控制器到客户端
前文介绍#xff0c;动态生成页面时#xff0c;控制器的数据 并没有传递到 客户端#xff0c;而是给自己来用#xff0c;生成View 再利用http传递到客户端浏…前文ViewBag数据在服务端动态生成页面也可以传到客户端浏览器供JS使用。
一、数据从控制器到客户端
前文介绍动态生成页面时控制器的数据 并没有传递到 客户端而是给自己来用生成View 再利用http传递到客户端浏览器。
当然数据也是可以传递给客户端的但有需要先搞明白传递到客户端的 数据 给谁用谁能够使用这些数据 答案很简单: JS (JavaScript ) 其他的JQuery 等可以视为对JS的包装也可以在客户端 “动起来”
传递方法
1、直接用 HTML 的元素的 属性来进行数据来传递样式设置为 styledisplay:none 不显示该元素
参考代码
页面
input idtest styledisplay:none valueViewBag.data/
scriptwindow.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代码也是控制器生成的 代码如下
scriptvar 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);ListTestUser list new ListTestUser();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;}}
}页面
scriptvar msg Html.Raw(ViewBag.data);window.onload function () {alert(msg);}
/script
运行结果 要注意使用Html.Raw 函数页面如果改成
scriptvar msg ViewBag.data;window.onload function () {alert(msg);}
/script
则运行结果为 很显然对双引号的解释出了问题。
服务器JSON还有其他方法如JSON.NET 和 扩展包Newtonsoft.Json ViewBag.data JsonConvert.SerializeObject(list);
2、客户端JS使用JSON
代码
scriptvar 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序列化传递到服务端控制器进行解释当然可以后续再探讨。
