5

I'm using asp.net MVC4 for web app development.

I would like to traverse a list of objects from a ViewModel.

Below is the class of the object:

public class User
{
        public int Id {get; set;}
        public string Name {get; set;}
        public string Address {get; set;}
        public string Department {get; set;}
}

Below is my ViewModel class:

public class UserViewModel
{
      public List<User> AllUsers {get; set;}
      public bool IsDeleted {get; set;}
}

As seen in the UserViewModel class, I have a list of objects of type User. Now i would like to iterate through each of the user object in AllUsers list using Jquery and fetch data from them.

In order to do so, I tried doing something like the following:

$(@Model.AllUsers).each( function(){ .... });

I have tried different combination using the above approach, but couldn't succeed. Can anyone suggest a solution for the same.

Thanks in advance.

Zax
  • 2,870
  • 7
  • 52
  • 76
  • What error do you get? Did you try using `$.each()` function in that way: `$.each(@Model.AllUsers, function() {});` ? – SzybkiSasza Jun 09 '15 at 10:58
  • if you wanna do a normal looping `@foreach(var user in @Model.AllUsers) {//try }` . cheers – super cool Jun 09 '15 at 11:00
  • Syntax errors most of the times – Zax Jun 09 '15 at 11:00
  • @supercool: If i use that approach i cannot access any variables outside the for each loop. In my casei need to perform some conditional checks. – Zax Jun 09 '15 at 11:02
  • is it ? i believe you can access . $.each or @foreach whatever EOD all do the same thing . if you want to access outside variables you can easily access them via `@` notation i.e `@if(@status == false)` inside loop . – super cool Jun 09 '15 at 11:13
  • @supercool: Seemed good, but when tried, it showed, status (as in you example) does not exist in this context. – Zax Jun 09 '15 at 11:23
  • have you declared i.e `@ {bool status = true}` – super cool Jun 09 '15 at 11:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80047/discussion-between-zax-and-super-cool). – Zax Jun 09 '15 at 11:29

4 Answers4

14

Assign your collection to a javascript variable using

var users = @Html.Raw(Json.Encode(Model.AllUsers))

which you can then iterate over

$.each(users, function(index, item) {
  // access the properties of each user
  var id = item.Id;
  var name = item.Name;
  ....
});
  • Thanks for the answer. Could you please elaborate on the the traversal part? That is with respect to the above User class. – Zax Jun 09 '15 at 11:03
  • 1
    just `Html.Raw()` will not work ? Json.Encode is needed for it? – Ehsan Sajjad Jun 09 '15 at 11:04
  • @StephenMuecke: I'm getting the below exception on JSON.parse: A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.User_D02A520B40433C88E2D653B140881AE8C121BC55EC122BCB5567A8B08366EA2A'. – Zax Jun 09 '15 at 11:18
  • That means that typeof `User` would contain a property `User` - but that's not what the code in your question indicates? –  Jun 09 '15 at 11:20
3
<script type="text/javascript">

    var UsersList = @Html.Raw(Json.Encode(Model.AllUsers))

    for (var i = 0; i < UsersList.length; i++) {
        alert(UsersList[i].Id);
        alert(UsersList[i].Name);

    } 
 </script>
Abbas Galiyakotwala
  • 2,949
  • 4
  • 19
  • 34
0

JavaScript generally is unhappy with razor components although if the above is part of an CSHTML file it will work.

The other approaches are:

  1. Display the collection using razor @foreach ...
  2. Pass the collection as a parameter from you webpage into a JavaScript function on some event

How are you calling this function and what does it do?

Peter Smith
  • 5,528
  • 8
  • 51
  • 77
0

In My Case, I fixed by this way :

 @for(int i=0;i<Model.AllUsers.Count;i++)
 {
   @: var name = '@Html.Raw(@Model.AllUsers[i].Name)';
   @:alert(name);
 }
maryam ghoreishi
  • 81
  • 4