Pass Razor Model From Foreach To jQuery

Question

Okay so I'm iterating over models with a Razor foreach, and I'd like to send the model to jQuery. I can send individual parameters as seen in this answer, but not the full object.

Example:

<table>
@foreach (var contact in Model)
{
    <tr>
        <td>
            <a href="#" onclick="myFunction('@contact.Name')">@contact.Name</a>
        </td>
        <td>
            <a href="#" onclick="myFunction('@contact.Company')">@contact.Company.Name</a>
        </td>
    </tr>
}
</table>

and

<script type="text/javascript">
    function myFunction(contact) {
        console.log(contact);
    };
</script>

Here, sending @contact.Name will send the value in Name to the function as expected, but @contact.Company (which is a Company object, rather than a string) will send the string value ProjectName.Models.Company. Is it possible to do what I'm trying to do?

Here's an example of one of the actual models I'm using (note that every model I use, like this one, also has another object type as a field).

 public class Note
 {
   public long NoteId { get; set; }
   public string Content { get; set; }
   public DateTime CreatedOn { get; set; }
   public User CreatedBy { get; set; } 
 }

Do you want to send the `Company` model to the function (so you can access all the properties of `Company`, or do you just want to send the `Company.Name` property? — , Nov 07 '14 at 05:01

score 1 · Answer 1 · answered Nov 07 '14 at 05:04

1

Javascript has no concept of your model, but your can encode it and parse it to a javascript object so that you access its properties in your script

<a href="#" onclick="myFunction(JSON.parse('@Html.Raw(Json.Encode(contact.Company))'))">@contact.Company.Name</a>

<script type="text/javascript">
  function myFunction(company) {
    console.log(company.Name);
  };
</script>

answered Nov 07 '14 at 05:04

This is actually throwing an error for me (`Uncaught SyntaxError: Unexpected token ILLEGAL`). If I call `JSON.parse` in the JS function, rather than inline, it works fine. – tarrball Nov 07 '14 at 21:43
Then its because of another issue. If you post you model for `Company` I can have a look. (Note the 'link only answer' will probably be deleted by the moderators) – Nov 07 '14 at 22:40
Yep, sure thing. I added one of my models to the bottom. I also noted that all of the models I'm using have other objects as fields within them, wasn't sure if that might be the cause of the error. – tarrball Nov 07 '14 at 23:48
That should not be a problem. If `Note` is a property of `contact` and you use `onclick="myFunction(JSON.parse('@Html.Raw(Json.Encode(contact.Note))'))", then in the script, add `console.log(company);` you should see something like `Object {NoteId : 1, Content : "Some text", CreatedBy: Object}` (and you could expand `CreatedBy` to see the properties of `User`). One thing that may cause an issue is if you have any circular references. For example `Note` has a property for `User` which has a property for `Note`. – Nov 08 '14 at 00:04

Pass Razor Model From Foreach To jQuery

1 Answers1