0

I need to add foreach loop and add model data instead of this hardcoded data. I don't know how to add it inside javascript code with jQuery. 

 @model  IEnumerable<HR.Models.Officials>


   @foreach (var item in Model)
        {




                            @Html.DisplayFor(modelItem => item.Id),
                            @Html.DisplayFor(modelItem => item.parentId),
@Html.DisplayFor(modelItem => item.Name)
    }
<script type="text/javascript">
        var peopleElement = document.getElementById("people");
        var orgChart = new getOrgChart(peopleElement, {
            primaryFields: ["name", "title", "phone", "mail"],
            photoFields: ["image"],
            dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" } ]
        });
    </script>

I need to add a foreach loop with my model and add model instead of this hardcoded data. For example id:1 = id:@model.id. I need it in the foreach loop. Kindly need someone to guide me

Waqas Rauf
  • 9
  • 7
  • If this is a view then just pull the data from the db in the controller method and load it using razor. – nurdyguy Feb 12 '18 at 20:31
  • but how i can load data inside jquery script? can i use foreach loop inside dataSource: [...? – Waqas Rauf Feb 12 '18 at 20:39
  • You could do it inside or define `dataSource:[]` and then in a razor for each loop do `dataSource.push({...})`. – nurdyguy Feb 12 '18 at 20:43
  • Note, it is a razor foreach loop NOT a javascript for loop. https://stackoverflow.com/questions/11261590/mvc-razor-foreach – nurdyguy Feb 12 '18 at 20:45
  • can you give me little practical example how i can use it? – Waqas Rauf Feb 12 '18 at 20:50
  • Sure, but fix your `@model iEnumerable`. Should be `@model iEnumerable`. Then also post what your class definition is so I can use it in my example. – nurdyguy Feb 12 '18 at 20:52
  • i have edit my post can you check foreach loop i need this kind of loop inside dataasource where i have hardcore data now – Waqas Rauf Feb 12 '18 at 20:58
  • Just convert your model to a javascript array. - Refer [this answer](https://stackoverflow.com/questions/48689889/how-to-bind-mvc-model-data-to-html-data-attribute/48696024#48696024) for an example –  Feb 12 '18 at 23:39

2 Answers2

1

This is one option:

@model  IEnumerable<HR.Models.Officials>


@foreach (var item in Model)
{
    @Html.DisplayFor(modelItem => item.Id),
    @Html.DisplayFor(modelItem => item.parentId),
    @Html.DisplayFor(modelItem => item.Name)
}
<script type="text/javascript">
    var peopleElement = document.getElementById("people");
    var orgChart = new getOrgChart(peopleElement, {
        primaryFields: ["name", "title", "phone", "mail"],
        photoFields: ["image"],
        dataSource: [
            @for(var i = 0; i < Model.Count; i++)
            {
                <text>
                    { id: @(Model[i].Id), name: "@(Model[i].name)", parentId: @(Model[i].parentId) }@(i < Model.Count - 1 ? "," : "")
                </text>
            }
        ]
    });
</script>

Note: If the value coming in needs to be a string in the javascript then you need to wrap quotes around it, like with "@(Model[i].name)". Because these are in the declaration of the array, the objects need a , between them which is why I made it a for loop instead of a foreach (though it could be done with a foreach as well).

nurdyguy
  • 2,876
  • 3
  • 25
  • 32
  • thanks i will implement this code, if i get any problem i will get back to you – Waqas Rauf Feb 12 '18 at 21:38
  • I just noticed that I was missing a closing paren after `parentId`. Try now. – nurdyguy Feb 13 '18 at 20:44
  • `@model IEnumerable ` – Waqas Rauf Feb 13 '18 at 21:29
  • You are missing the commas between the elements of the array. If you inspect the page you'll see the javascript error. I used `@(i < Model.Count - 1 ? "," : "")` to put the commas in. – nurdyguy Feb 13 '18 at 21:53
0

Create something like this in a static class: 

public static IHtmlContent ToJS(this IHtmlHelper htmlHelper, object obj)
{
    return htmlHelper.Raw(JsonConvert.SerializeObject(obj));
}

In your "_ViewImports.cshtml" also you can import System.Linq if needed.

Now you can simply do this: 

<script type = "text/javascript" >
    var peopleElement = document.getElementById("people");
    var orgChart = new getOrgChart(peopleElement, {
        primaryFields: ["name", "title", "phone", "mail"],
        photoFields: ["image"],
        dataSource: @Html.ToJS(Model);
</script>

If you want to customize your array object, you can import Linq mentioned above and set dataSource this way: 

dataSource: @Html.ToJS(Model.Select(m => new { m.id, m.name, m.parentId, ... }));
Neville Nazerane
  • 6,622
  • 3
  • 46
  • 79