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

转载 2016年08月31日 14:10:12

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

后台的数据格式:

1
2
3
4
5
6
7
8
public class ViewModel
{
    public int ID { getset; }
 
    public string Name { getset; }
 
    public List<string> Data { getset; }
}

Controller 传递到View的数据:

1
2
3
4
5
6
7
8
9
10
11
12
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 中的一个对象

1
2
3
4
5
var viewModel = {
    id: 0,
    name: '',
    data:[]
}

  

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

1
2
3
4
5
<script>
        viewModel.id=@ViewBag.ID;
        or
        viewModel.id=@Model.ID;
</script>

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

1
2
3
4
5
<script>       
        viewModel.name='@ViewBag.Name';
        or
        viewModel.name='@Model.Name'
</script> 

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

1
2
3
<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

 

相关文章推荐

ASP.NET MVC后台输出js代码

1.用Content return Content("alert('javascript')"); 2.用JavaScript,页面用$.getScript()接收。 前台引用jquery文件。 ...

mvc js获取页面model里的值

方法1: $("#Province").val('@Model.Province'); 方法2: 将MODEL的值赋给hidden通过JS获取
  • linybo
  • linybo
  • 2015-05-05 19:14
  • 6765

MVC 从控制器将数据对象赋值给前端JS对象

@{ Layout = null; } 示例 //将数据对象转换为 JSON 格式,是为了在网页中通过使用JS将数据作为文本进行处...

ASP.NET MVC3中Controller与View之间的数据传递总结

在ASP.NET MVC中,经常会在Controller与View之间传递数据,因此,熟练、灵活的掌握这两层之间的数据传递方法就非常重要。本文从两个方面进行探讨: 1 Controller向View...
  • sknice
  • sknice
  • 2015-01-01 22:59
  • 40859

js与mvc 数据的交互

在做考试系统中,遇到最头疼的问题,就是前台与后台的交互。对于使用easyui来说,刚接触不久,有点陌生。     查着文档,看着Demo。做起来着实有点头疼。       首先,前台使用的是MVC+...

springmvc前台向后台传值几种方式从简单到复杂

1. 基本数据类型(以int为例,其他类似): Controller代码: @RequestMapping("saysth.do") public void test(int count) ...
  • revent
  • revent
  • 2017-03-20 14:58
  • 4702

Maven项目:Spring MVC + Ajax + Json + RequestBody:POST后台服务器接收前端JSON数据并注解到POJO内

最近一直看Java服务器端开发,用的架构在Maven项目内的Web后台服务器,用了两天时间明白了怎么整合这些框架,很累找了很多资料,尤其在整个过程中Eclipse还时不时崩溃,正常的jsp文件都打不开...

微信小程序----关于变量对象data 和 前端wxml取后台js变量值

(一)页面变量对象data 对象data 有两个方面用途 第一,前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的 第二,定义JS页面中的页面局部变量,使其整个页面中可使用或...

前端Js中利用Ajax异步调用后台处理数据

/********************************* * JS中Ajax异步调用后台处理数据(XML返回方式) * 并将后台查询数据拼入XML,然后返回给前端解析处理 * ...

MVC项目中与后台协调写出的关于表格数据读取、修改、删除、提交、新增数据的JS事件

在项目开发中,给后台处理相关数据交互(提交、编辑、新增、删除)时,数据这块都要用一个包裹,同时再第一行加一个,确保在点击事件发生时为这个form赋值一个ID,不然后台无法操作。在全局JS中定义自定义方...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)