How to retrieve data in jquery from mvc list type of model

Question

I have a class like below:

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

And I am using this class as a list type in MVC model like:

@model List<CustomBenefitCommittee>

I want to retrieve data from this model in jQuery. I am trying right now as

@{
    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 );
    });
}

This is giving me undefind. Can someone help me out getting the values from this model.

var model = @Html.Raw(Json,Encode(Model)); $.each(model, function(index, item) { alert(item.PropertyError); }); — user3559349
– user3559349, Commented Mar 31, 2017 at 11:05
@StephenMuecke var model = @Html.Raw(Json,Encode(Model)); This part gives an error of ;, Json and Encode. — M. Adeel Khalid
– M. Adeel Khalid, Commented Mar 31, 2017 at 11:32
Json.Encode (dot not comma - typo in comment above). And the syntax error for the ; can be ignored - its just VS not recognizing perfectly valid code. — user3559349
– user3559349, Commented Mar 31, 2017 at 11:35
@MAdeelKhalid, You added the correct solution in your edit (OP's issue is that model.PropertyError is undefined because model is the collection, not an item in the collection) but you immediately deleted it :) - it was your original answer that was wrong — user3559349
– user3559349, Commented Mar 31, 2017 at 11:40
I thought I was wrong that's why I removed the answer, I undo that delete. — M. Adeel Khalid
– M. Adeel Khalid, Commented Mar 31, 2017 at 11:47

M. Adeel Khalid · Accepted Answer · 2017-03-31 11:50:16Z

1

Make a loop like this:

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

It will work.

edited Mar 31, 2017 at 11:50

answered Mar 31, 2017 at 11:20

M. Adeel Khalid

1,7902 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

M. Adeel Khalid Over a year ago

I could be wrong, can you explain the reason for downvoting, I might learn something which I don't.

user3559349 Over a year ago

Converting it to a string and then parsing it back again is pointless.

M. Adeel Khalid Over a year ago

I got it. That was my thought too before I was testing but whenever I do JSON.parse, it gives correct result but with only @Html.Raw It doesn't. There could be some other issue.

user3559349 Over a year ago

Just delete the original bit (which is pointless) - its the last code snippet which is correct.

M. Adeel Khalid Over a year ago

Edited the answer and thumbs up for you for the correction.

Arslan Naeem · Accepted Answer · 2017-03-31 13:46:57Z

1

Make an method in you controller that returns model list (in json format) like:

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

Now on View call this method throught jquery like:

<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>

answered Mar 31, 2017 at 13:46

Arslan Naeem

861 silver badge8 bronze badges

Comments

Mohamed Awadallah · Accepted Answer · 2017-03-31 11:55:33Z

From Server Side: First you need to add actions in the controller returns JsonResult.

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

From Client Side: you need ajax call to retrieve the data

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

OR if you are sending data to model and you want to use it in your javascript or jquery code you can use NewtonSoft.Json.

First install the Package in your solution:

PM> install-package NewtoSoft.Json

Second you can make your view like this:

@model ...
@using Newtonsoft.Json

<script type="text/javascript">

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

</script>

than you can use this data like this:

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

And also you can use one the javascript frameworks like Konockout.js or angularjs

Collectives™ on Stack Overflow

How to retrieve data in jquery from mvc list type of model

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related