How to array from model to use it with jquery in mvc

Question

I need to loop through model collection in razor and then use that collection in jquery in client side

I need something like that var MyArray = @item.TagName and after that i need to use MyArray with jquery in client side Here is my code

  @foreach (var item in Model.Tags)
  {

          @item.TagName

   }

Thank you

`var tags = '@Html.Raw(Json.Encode(Model.Tags))'; var firstTagName = tags[0].TagName;` — , Mar 18 '16 at 21:18

score 1 · Accepted Answer · answered Mar 18 '16 at 20:24

I made a small example using Json.Encode:

@{
    var list = new List<TagItem>() {
        new TagItem() { TagName = "1" },
        new TagItem() { TagName = "2" },
        new TagItem() { TagName = "3" },
        new TagItem() { TagName = "4" },
        new TagItem() { TagName = "5" },
        new TagItem() { TagName = "6" },
        new TagItem() { TagName = "7" },
        new TagItem() { TagName = "8" }
    };

    var onlynames = list.Select(x => x.TagName);
}

@section Scripts {
    <script>
        var json = @Html.Raw(Json.Encode(list));
        var json1 = @Html.Raw(Json.Encode(onlynames));
    </script>
}

Variable json will be an array of TagItems and json1 will be an array of names.

Value of json

[Object, Object, Object, Object, Object, Object, Object, Object]

which every object will contain the property TagName inside it.

json1 will be directly a string.

["1", "2", "3", "4", "5", "6", "7", "8"]

It's working. Thank you so much for your help and effort – Lucia Mar 18 '16 at 22:49 — Lucia, Mar 18 '16 at 22:49

score -1 · Answer 2 · answered Mar 18 '16 at 17:11

-1

That code that you have executes on the server. Its purpose is to render HTML markup that will later be processed by the browser. Since HTML can contain JS code, you have the opportunity to render a SCRIPT tag that contains data that you want.

For example:

<script>

    var arr = [];

         @foreach (var item in Model.Tags)
          {

                 arr.push("@item.TagName");

           }
</script>

This should be placed before/above the code that would be using that arr variable. I only guessed the syntax related to quotes in arr.push("@item.TagName");; it might needs some tweaks, but as a result, you want to see something like this in the page-source within the browser:

<script>    
    var arr = [];    
    arr.push("tag1");
    arr.push("tag2");
</script>

EDIT: Maybe try this within that @foreach:

"arr.push(\"" + @item.TagName + "\";"

answered Mar 18 '16 at 17:11

Hari Lubovac

622
4
14

You're implying that that solution above is hard, which it isn't. No, I can't think of any other simpler solution that accommodates your setup. Of course, you could expose the same data through a dedicated HTTP endpoint, but that's even more complex (while it may be a better fit; who knows). I think you should just try the above; you'll be surprised. – Hari Lubovac Mar 18 '16 at 17:45
Take a look at the accepted answer for the question that @twernt pointed to - the syntax for the "push" statement might be more accurate/correct then what I suggested. I haven't worked with razor that much to be certain, and I'm lazy to set that up. That's an exercise for you :) – Hari Lubovac Mar 18 '16 at 17:48
Or, take a look at how to **serialize** an array (or an object, in general) to JSON. You need to serialize `this.Model.Tags.Select(t=>t.TagName).ToArray()` to JSON array to get this in page-source (sample): `var arr = [ "tag1", "tag2", "tag3" ]`. Still wrap with SCRIPT tags, of course. – Hari Lubovac Mar 18 '16 at 17:53

How to array from model to use it with jquery in mvc

2 Answers2