【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序列化,传递到服务端控制器进行解释?当然可以,后续再探讨。

相关推荐
阑梦清川2 天前
SpringMVC案例学习(二)--表白墙/图书管理系统1.0版本
spring·mvc·springboot·案例
网安_秋刀鱼2 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
HaiFan.2 天前
Spring MVC
java·spring·mvc
源码12152 天前
Asp.net Mvc 电脑销售系统
后端·asp.net·mvc
lucky.帅2 天前
基于BindingList的WinForm数据绑定机制与DataGridView动态刷新技术
开发语言·windows·c#·asp.net·.net·visual studio
计算机毕设定制辅导-无忧学长3 天前
《深入理解 Spring MVC 工作流程》
java·spring·mvc
花之亡灵3 天前
.net 7.0 解决“The keyword field is required”的问题
windows·visualstudio·c#·asp.net
宝桥南山3 天前
.NET 9 - BinaryFormatter移除
microsoft·微软·c#·asp.net·.net·.netcore
潜洋3 天前
Spring Boot教程之三:Spring Boot 与 Spring MVC 及 Spring的区别
java·spring boot·spring·mvc
清酒伴风(面试准备中......)3 天前
Spring MVC——针对实习面试
java·后端·spring·面试·mvc·实习