Converting a list in c# to a table in javascript

Question

I have an asp.net mvc application with razor view's engine. I need to store the values of a list passed as a model in my view by using javascript

@section logout {
    <a href='@Url.Action("Retour", "Client")'><img src="~/Content/images/home-icon.png" /></a>
    <a href='@Url.Action("Logout", "Home")' style="margin-left: 91.6%"><img src="~/Content/images/images.jpg" style="width:37px; height:37px" /></a>
    }
@Json.Encode(Model.Get_List_Tache());

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="~/Content/jquery.treeview.css" />
    <script src="~/Content/jquery.cookie.js" type="text/javascript"></script>
    <script src="~/Content/jquery.treeview.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/Content/demo.js"></script>
    <!-- partie calendrier-->
     <link rel="stylesheet" href="~/Scripts/Calendar/theme.css" />
    <link href="~/Scripts/Calendar/fullcalendar.css" rel="stylesheet" />
<link href="~/Scripts/Calendar/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="~/Scripts/Calendar/fullcalendar.min.js"></script>


      <style>
        body
        {
            background-color:#eee;
        }

        #tree {
            background-color:#eee;
        }

        .affaire {
            color:black;
                font-size: 16px;

        }
        .tache {
            color:black;
                font-size: 12px;
        }
         .projet {
            color:blue;
                font-size: 20px;
        }
           .sequence {
            color:blue;
                font-size: 13px;
        }
           #calendar {
        width: 700px;
        margin: 0 auto;
        }
    </style>

    <script>

        $(document).ready(function () {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var titles=  Json.Parse(Model.Get_List_Tache());
            $('#calendar').fullCalendar({
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,


                events: [

                        {
                id: 999,
            title: titles[0],
            start: new Date(y, m, d - 3, 16, 0),
            allDay: false
        }


        ]
        });

        });

</script>
</head>
<body>



        <table><tr><td style="width:200px;display:block;margin-top:80px;" id="tree">
            <ul id="red"  style="width: 100%; display:block;width:100%;margin-top:0%">
                @for (int i = 0; i < Model.Get_List_Projet().Count; i++)
                {
    <li><span class="projet">Projet : @Model.Get_List_Projet()[@i].Description</span>
        <br />
        <br />
        <ul>
              @for (int j = 0; j < Model.Get_List_Affaire_By_Projet(Model.Get_List_Projet()[@i].Id_projet).Count; j++)
                {
             int id_affaire = @Model.Get_List_Affaire_By_Projet(Model.Get_List_Projet()[@i].Id_projet)[@j].Id_affaire;
              <li><span class="affaire"> @Model.Get_List_Affaire_By_Projet(Model.Get_List_Projet()[@i].Id_projet)[@j].Affaire_description</span>
                 <br />
               <br />
                <ul>

                    @for (int k = 0; k < @Model.Get_List_Sequence_By_Affaire(id_affaire).Count; k++)
                       {
                           int id_sequence = @Model.Get_List_Sequence_By_Affaire(id_affaire)[k].Id_séquence;

                    <li><span class="sequence">@Model.Get_List_Sequence_By_Affaire(id_affaire)[k].Sequence_description </span>

                    <ul>
                          @for (int t = 0; t < @Model.Get_List_Tache_By_Sequence(id_sequence).Count; t++)
                       {
                           int id_tache = @Model.Get_List_Tache_By_Sequence(id_sequence)[t].Id_tache;
                        <li><span class="tache">Tache :   @Html.ActionLink((string)@Model.Get_List_Tache_By_Sequence(id_sequence)[t].Tache_description, "GererTache", new { id = id_tache })</span></li>
                       }
                        <li>@Html.ActionLink("AjouterTache", "AjouterTache", new { id = id_affaire }) </li>
                         <li>@Html.ActionLink("GérerSéquence", "GererSequence", new { id = id_sequence }) </li>
                    </ul>

                    </li>
                       }
                     @for (int g = 0; g < @Model.Get_List_Tache_By_Affaire(id_affaire).Count; g++)
                       {
                           int id_task = @Model.Get_List_Tache_By_Affaire(id_affaire)[g].Id_tache; 
                    <li><span class="tache">Tache: @Html.ActionLink((string)@Model.Get_List_Tache_By_Affaire(id_affaire)[g].Tache_description, "GererTache", new { id = id_task })</span>

                    </li>
                       }
                </ul>
                <ul><li>@Html.ActionLink("AjouterSéquence", "AjouterSéquence", new { id = id_affaire }) </li>

                    <li>@Html.ActionLink("AjouterTache", "AjouterTache", new { id = id_affaire }) </li>
                    <li>@Html.ActionLink("Gérer cette affaire", "GererAffaire", new { id = id_affaire }) </li>
                </ul>
               </li>
     }

        </ul>
    </li>
                }          


    <br />


                </ul>

 </td> <td > 
        <div id='calendar'></div>
</td>

            </tr>
            </table>
    <a href='@Url.Action("Choice", "Travail")'>Retour</a>
    </body>
</html>

But i don't know how can i pass from server side to client side, to pass from a C# List to Javascript table.

So i need suggestions to do this task

I'm not quite sure I understand, for server to Javascript, use @this.Model.myVariable and for the reverse, either $.post the data using JSON.stringify or create a form with hidden fields where the name attribute matches your model's property name. — NibblyPig, Commented Jul 15, 2013 at 13:52
Your question is a little vague. Do you have a List<Event> that you need to convert to an event array? — Andre Calil, Commented Jul 15, 2013 at 13:52
Here I answered simmilar question stackoverflow.com/questions/17485568/send-model-to-jquery/… — Alexandr Mihalciuc, Commented Jul 15, 2013 at 13:52
If you already have a List<Events> you just need to JSON.stringify (serialize) it and in your JavaScript JSON.parse it into your events: array. — Louis Ricci, Commented Jul 15, 2013 at 13:55

NibblyPig · Accepted Answer · 2013-07-15 15:14:09Z

1

You need to wrap your code in a loop, consider something like this:

var someArray = []

@for (int i=0; i < this.Model.myArray.length; i++)
{
  someArray.push([{ Prop = this.Model.myArray[i].someProp . . . } ]);
}

Alternatively you could add a property to your model, eg.

public class MyModel
{

    public string SerialisedData {
        get { 
            return string.Format("[{ name = {0}, someProp = {1} ...... }]", this.Name, this.someProp .....);
        }
    }
}

But remember to escape quotes.

answered Jul 15, 2013 at 15:14

NibblyPig

53.2k75 gold badges220 silver badges383 bronze badges

sorry but i don't understand what you mean by this snippet i add this to my code ` $(document).ready(function () { var someArray = []; @for (int i=0; i < this.Model.Get_List_Tache.Count; i++) { someArray.push([{ Prop = this.Model.Get_List_Tache[i]} ]); }` but the variable someArray is undefined!!
– Lamloumi Afif
Commented Jul 16, 2013 at 7:38
1

I think you may have to explicitly tell it that someArray isn't C# code, it's javascript. You might have to put @: on the line eg: @: someArray.push.....
– NibblyPig
Commented Jul 16, 2013 at 11:20

Add a comment |

Collectives™ on Stack Overflow

Converting a list in c# to a table in javascript

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related