如何从mvc list类型的模型中检索jquery中的数据

时间:2017-03-31 11:01:33

标签: jquery asp.net-mvc asp.net-mvc-4

我有一个如下课程:

public class CustomBenefitCommittee
{
    public bool? IsChecked { get; set; }
    public bool PropertyError { get; set; }
}

我在MVC模型中使用此类作为列表类型,如:

@model List<CustomBenefitCommittee>

我想在jQuery中从这个模型中检索数据。我现在正在尝试

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var json = serializer.Serialize(Model);
}

var model = @Html.Raw(json);
if(model != null && @Html.Raw(json) != "undefined")
{
    $.each(model, function () {
        alert(model.PropertyError );
    });
}

这让我无法发现。有人可以帮助我从这个模型中获取值。

3 个答案:

答案 0 :(得分:1)

制作一个这样的循环:

 $.each(model, function(key, value) { alert(value.PropertyError); });

它会起作用。

答案 1 :(得分:0)

从服务器端: 首先,您需要在控制器中添加动作,返回JsonResult。

public JsonResult GetData(int id)
{
    var data = new 
    {
      id,
      age = 23
    }
    return Json(data,JsonRequestBehavior.AllowGet);
}

从客户端: 你需要ajax调用来检索数据

function getData(id){
   var data = {id: id};
   $.get('/Home/GetData/', data,
         function (response) {
             alert(JSON.stringify(response));
             },'json'
    };
}

如果要将数据发送到模型,并且想要在javascript或jquery代码中使用它,则可以使用NewtonSoft.Json。

首先在解决方案中安装Package:

PM> install-package NewtoSoft.Json

其次,你可以这样看待你的观点:

@model ...
@using Newtonsoft.Json

<script type="text/javascript">

    var data = @Html.Raw(JsonConvert.SerializeObject(this.Model));

</script>

比你可以使用这样的数据:

$.each(model, function(index, item) { alert(item.PropertyError); });

您也可以使用Konockout.jsangularjs

等javascript框架

答案 2 :(得分:0)

在你的控制器中创建一个返回模型列表(以json格式)的方法,如:

public JsonResult LoadList()
{
   var modelList=new List<CustomBenefitCommittee>();
   modelList=   //get your list of model
   var jsonResult = Json(modelList, JsonRequestBehavior.AllowGet);
   return jsonResult;
}

现在在View上通过jquery调用此方法,如:

<script> 
 $(document).ready(function() {
 $.getJSON('/"Controller Name"/"Action Name as "LoadList', function (data) {

 if (data.length == 0) {
 alert('No data');
 }
 else{
 $(data).each(function() {
 alert(this.PropertyError);
 });
 }

 });

});
</script>