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

 

mvc js获取页面model里的值

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

js与mvc 数据的交互

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

MVC使用jQuery从视图向控制器传递Model的2种方法

using System.ComponentModel.DataAnnotations; namespace MvcApplication1.Models { public class Mo...
  • make1828
  • make1828
  • 2014年06月10日 15:21
  • 10755

Asp.net - Razor - 将Model中变量的值赋值给Javascript变量

@{var _userID = Model.UserId.HasValue ? Model.UserId.Value : 0;} // 赋值给Javacript变量 var ...
  • yuxuac
  • yuxuac
  • 2015年11月27日 10:29
  • 1708

MVC学习笔记之使用JQuery方式发送Ajax请求调用后台Controller

通常情况下在MVC模式中我们会采用使用controller获取业务数据(model)并将业务数据提交给view,或者由view传递数据给controller,再由controller更新model。在...
  • huangyezi
  • huangyezi
  • 2015年04月25日 22:53
  • 54900

【前端js】实现一个函数可以对JavaScript中的5种主要数据类型进行赋值

//实现一个函数,可以对JavaScript中的5种主要数据类型(Number,String,Boolean, //Array,Object)进行复制 function clone(obj){ var...
  • Elane1027
  • Elane1027
  • 2017年03月07日 22:29
  • 491

如何将.net后台数据库的值动态的传给前台的javascript

我现在想实现一个将数据中的值动态的传给前台的javascript,但是用了好多种方法都实现不了,请高手请教。谢谢。 ...
  • tottttot
  • tottttot
  • 2007年05月15日 09:05
  • 1055

多种方式实现JS调用后台方法进行数据交互

多种方式实现JS调用后台方法进行数据交互     项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性、Button提交表...
  • u011233568
  • u011233568
  • 2015年04月29日 14:25
  • 2513

关于Web前端做前后台数据交互的那些事儿

这里以用户登录为例,用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度。本文将使用PHP和jQuery来实现登录和退出功...
  • zw_div
  • zw_div
  • 2015年12月31日 14:39
  • 16124

ASP.NET MVC后台输出js代码

1.用Content return Content("alert('javascript')"); 2.用JavaScript,页面用$.getScript()接收。 前台引用jquery文件。 ...
  • horizon0503
  • horizon0503
  • 2016年11月01日 20:01
  • 2970
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVC后台数据赋值给前端JS对象
举报原因:
原因补充:

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