将后台数据(C#)转换成JSON字符串传到页面转换成json对象存储在JS中

本文介绍了如何在MVC .NET环境下,将C#后台数据序列化为JSON字符串,通过ViewData传递到前端页面,并在JavaScript中解析为JSON对象进行存储。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在加载页面时,有时候需要将后台数据传到页面并保存在js中,现在一般都是通过json来操作这些数据,下面通过一个简单的例子讲解一下怎样实现这个过程。

本例在MVC  .NET上实现。

比如后台有这样一些数据:

public class 级别模型
        {
            public long id;
            public string name;
            public List<级别模型> 下级列表;

            public 级别模型()
            {
                this.下级列表 =new List<级别模型>();
            }
        }

        public static readonly List<级别模型> 级别列表 = new List<级别模型>
        {
            new 级别模型
            {
                id = 100,
                name = "司令部",
                单位列表 = new List<级别模型>
                {
                    new 级别模型
                    {
                        id=110,
                        name = "二级部",
                        单位列表 = new List<级别模型>
                        {
                            new 级别模型
                            {
                                id=111,
                                name="处",
                                单位列表 = new List<级别模型>()
                            }
                        }
                    },
                }
            }
        };
现在需要将级别列表的数据传到页面上   ,我们可以先在Controller的Action里面这样写:

public ActionResult Register()
        {
//将数据获取到  通过JsonConvert序列化  将C#对象转换成json字符串</span>
            ViewData["jsonUser"] = JsonConvert.SerializeObject(级别列表);
            return View("Register");
        }


上一步我们将后台数据序列化后通过ViewData传到页面,接下来就在页面上接收并处理。


在页面上js代码中,操作如下:

<script type="text/javascript">
$(function(){
        var dataUser = "@ViewData["jsonUser"]";
        var reg = new RegExp("&quot;", "g"); //创建正则RegExp对象  
        var data = JSON.parse(dataUser.replace(reg, '"'));

    });
</script>
由于是MVC,可以通过Razor语法直接将ViewData传来的数据赋值给js变量,然后进行处理。在Action进行JsonConvert序列化后传到js中字符串中会有的双引号会被解析成&quot;  ,因此需要替换一到,而且必须替换成双引号,JSON.parse才能正确解析成json对象。

这样就可以把数据传到页面上并保存成json数据了。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值