I have a problem in How to use javascript variables in C# and vise versa : I have this Model passing to the view:

public List<Tache> Get_List_Tache()
{
    Equipe _equipe = new Equipe();
    List<Tache> liste_initiale = _equipe.Get_List_tache();
    return liste_initiale;
}

It's a list of objects Tache in which I'd like to use it's three fields Tache_description, Begin_date and End_date.

In my JavaScript code I have this function and it works fine:

       <script>

        $(document).ready(function () {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#calendar').fullCalendar({
                theme: true,
                header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'},
                editable: true,
                events: [
                         @foreach (var m in Model.Get_List_Tache())
                          {
                        @:{title : @m.Tache_description , start: @m.Begin_date , end :  @m.Begin_date }
                          }
                        ]

                });
                                        });

</script>

The values of the array events are just for test, and I need to fill events by the value of the Model. For each element like this: title = Tache_description, start = Begin_date and end = End_date.

So how can I do this task? Any suggestions?

I have a problem in How to use javascript variables in C# and vise versa : I have this Model passing to the view:

public List<Tache> Get_List_Tache()
{
    Equipe _equipe = new Equipe();
    List<Tache> liste_initiale = _equipe.Get_List_tache();
    return liste_initiale;
}

It's a list of objects Tache in which I'd like to use it's three fields Tache_description, Begin_date and End_date.

In my JavaScript code I have this function and it works fine:

       <script>

        $(document).ready(function () {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#calendar').fullCalendar({
                theme: true,
                header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'},
                editable: true,
                events: [
                         @foreach (var m in Model.Get_List_Tache())
                          {
                        @:{title : @m.Tache_description , start: @m.Begin_date , end :  @m.Begin_date }
                          }
                        ]

                });
                                        });

</script>

The values of the array events are just for test, and I need to fill events by the value of the Model. For each element like this: title = Tache_description, start = Begin_date and end = End_date.

So how can I do this task? Any suggestions?

• c#
• javascript
• .net
• asp.net-mvc
• razor

• 2 Is there anyway you could return a JSON result, and perhaps make a call to the data that way? – Stuart.Sklinar Commented Jul 16, 2013 at 8:22

6 Answers 6

Try this,

foreach (var item in YourList)
{
    events: [{ title: '@item.title', start: '@item.start', end: '@item.end'}]
}

So, in this code just replace name your model entity.

Make a foreach razor loop within javascript :

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
    theme: true,
    header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'},
    editable: true,
    events: [
    @
    {
      bool isFirst = true;
    }
    @foreach(var m in Model)
    {
        if(!isFirst)
        {
          @:,
        }

        @:{title: @m.Tache_description, ...<other properties here>}

        isFirst = false;
    }
    ]
});

For title, you can do title = "@Tache_description"

Not sure about the format/type of your Begin_date and End_date, you may need some function to read the date into a javascript format. Shouldnt be that hard.

Loop through each element and add the elements to the events array. It is something like...

events = new Array()
@foreach(tache in list){
    item = { blah : blah, blah : blah };
    events.push(item);
}

for each c# item in this c# list, write these lines of javascript. You may end up with a very long javascript code block, but it should do the trick. Above is pseudocode.

To add to Darin's answer: If you need the server-side variables in an external JavaScript file, take a look this blog post: Generating External JavaScript Files Using Partial Razor Views

1: if your model is expecting the list of Tache then you have the whole list you can manipulate.

2: you can get the data using jquery ajax as json data by calling your action Get_List_Tache().

Assuming this javascript is inline in your page you could do the following:

@model IList<Tache>
<script type="text/javascript">
    var events = @Html.Raw(Json.Encode(Model.Select(x => new { title = x.Description, start = x.Begin.ToString("o"), end = x.End.ToString("o") })));

    $('#calendar').fullCalendar({
        theme: true,
        header: { 
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: events
    });
</script>

This example assumes that your Tache model has properties Description, Begin and End:

public class Tache
{
    public string Description { get; set; }
    public DateTime Begin { get; set; }
    public DateTime End { get; set; }
}

And if this script is in a separate javascript file you could still set a global events variable in your view which will later be used by your script. Alternatively you could fetch this model using an AJAX call.