MVC后台数据赋值给前端JS对象

Controller中的数据,不管是使用的是ViewModel 还是ViewBag.Data,要将他传递到View中,这个很容易,但是如果要将它传递给JS中的某个对象,这个改如何处理呢?

后台的数据格式:

    public class ViewModel
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public List<string> Data { get; set; }
    }

Controller 传递到View的数据:

        public ActionResult Index()
        {
            ViewBag.ID = 1;
            ViewBag.Name = "WWW";
            ViewModel viewModel = new ViewModel()
            {
                ID = 100,
                Name = "WWW",
                Data = new List<string> {"A","B","C","D","E" }
            };
            return View(viewModel);
        } 

前台JS 中的一个对象

    var viewModel = {
        id: 0,
        name: ‘‘,
        data:[]
    }

  

1. 如果需要传递整形数字到JS中

<script>
        [email protected];
        or
        [email protected];
</script>

2.  如果需要传递字符串到JS中

<script>
        viewModel.name=‘@ViewBag.Name‘;
        or
        viewModel.name=‘@Model.Name‘;
</script>

3.如果需要传递复杂的数据类型到JS中,如对象,数组,集合等,

<script>
        viewModel.data = @Html.Raw(Json.Encode(Model.Data));
</script>

更多方法请参见:http://stackoverflow.com/questions/3850958/pass-array-from-mvc-to-javascript

另外将JS 中的对象传递到Controller中,这个直接采用Ajax,就可以实现,详细请参见  http://stackoverflow.com/questions/16824773/passing-an-array-of-javascript-classes-to-a-mvc-controller

 

时间: 2024-09-30 00:46:49

MVC后台数据赋值给前端JS对象的相关文章

node.js ejs模板引擎将后端数据赋值给前端js

使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使用ejs,选它是因为跟Asp.Net的模板引擎有点相似吧. 先来看一下这几个模板引擎: jade模板 html head title #{title} meta(charset="UTF-8") body div.description #{description} ul - each d

Asp.Net Mvc后台数据验证自测小Demo

*.这里只做后台数据验证,利用mvc数据验证标记验证数据,并获取错误信息提示后页面中. 1.实现效果如下: 2.model类 People.cs using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace WebTest.Areas.Validation.Models { pub

vue created钩子使用后台数据赋值给data里的变量,报错‘undefined’

created: function () { this.$axios.post('/jsonData').then( function (res) { this.cares = res.data; console.log(this.cares) }) 以上报错‘undefined’ 经过查询得知,.then回调里的this指向的不是vue实例,所以出错. 解决办法: 1.修改this指向,原生js可以用.bind()方法 2.ES6 箭头函数 .then(  res => { this.care

js对象与json格式的转换

目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递

后台返回数据为map集合,前端js处理方法

当后台返回的数据不是json而是map集合的时候,前端js中处理就将其看作是一个数组,例如后台返回的代码入下: Map<String, String> result = new HashMap<String, String>(); map.put("code", "200"); map.put("title", result.get("title")); map.put("content&qu

iBase4j前端01_bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求

1 准备 1.1 模拟的json数据 { "info": [ { "message": "信息", "value": [ { "userName": "淳芸", "shortAccount": "chunyun", "userId": 20001 }, { "userName": "orion-01

spring mvc接收ajax提交的JSON数据,并反序列化为对象

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo

使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wamp打开,并且在Dreamweaver里面新建一个phpStudy站点.这篇文章我们需要两个文件,一个test.html前端的页面,一个tigong.php数据的提供页,下面分别进行介绍. tigong.php我们在Dreamweaver,phpStudy站点下面,新建一个tigong.php页面,里

EF5(7) 后台使用SelectListItem传值给前台显示Select下拉框;mvc后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式

一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Order控制器,显示订单列表,并且在修改订单的时候,把用户的id 用 select 下拉框显示出来,并且可以提交修改数据   1.1 我们通过比较原始的方法,来把数据 传递到前台后,前台使用  循环来显示 select 并且显示是哪个元素被选中 我们在前台的cshtml中,使用 @model 命令 指定