mvc model inside jquery code

Question

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: "[email protected]", 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

If this is a view then just pull the data from the db in the controller method and load it using razor. — nurdyguy
– nurdyguy, Commented Feb 12, 2018 at 20:31
but how i can load data inside jquery script? can i use foreach loop inside dataSource: [...? — Waqas Rauf
– Waqas Rauf, Commented Feb 12, 2018 at 20:39
You could do it inside or define dataSource:[] and then in a razor for each loop do dataSource.push({...}). — nurdyguy
– nurdyguy, Commented Feb 12, 2018 at 20:43
Note, it is a razor foreach loop NOT a javascript for loop. stackoverflow.com/questions/11261590/mvc-razor-foreach — nurdyguy
– nurdyguy, Commented Feb 12, 2018 at 20:45

nurdyguy · Accepted Answer · 2018-02-13 20:43:41Z

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

edited Feb 13, 2018 at 20:43

answered Feb 12, 2018 at 21:31

nurdyguy

2,9433 gold badges29 silver badges33 bronze badges

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

4 Comments

Waqas Rauf Over a year ago

thanks i will implement this code, if i get any problem i will get back to you

nurdyguy Over a year ago

I just noticed that I was missing a closing paren after parentId. Try now.

Waqas Rauf Over a year ago

@model  IEnumerable<HR.Models.Official>  <script type="text/javascript">     var peopleElement = document.getElementById("people");     var orgChart = new getOrgChart(peopleElement, {         primaryFields: ["name", "title", "phone", "mail"],         photoFields: ["image"],         dataSource: [             @foreach (var item in Model)             {                               <text>                     {id: @(item.EmpId), name: "@(item.Name)", parentId: @(item.Id) }                 </text>             }         ]     }); </script>

nurdyguy Over a year ago

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.

Neville Nazerane · Accepted Answer · 2018-02-13 21:54:23Z

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, ... }));

edited Feb 13, 2018 at 21:54

answered Feb 13, 2018 at 20:57

Neville Nazerane

7,0894 gold badges53 silver badges88 bronze badges

2 Comments

Waqas Rauf Over a year ago

where this static class i should put?

Neville Nazerane Over a year ago

For convince put it directly inside the web project (no folder). Class can have any name

Collectives™ on Stack Overflow

mvc model inside jquery code

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related