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

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

后台的数据格式:

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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值