Fetching List of int from controller to View ASP.NET

Question

I am trying to fetch a set of data from controller to view, I have the following;

Index.cshtml

<input type="button" value="submit" class="btn btn-default" id="btnGet" name="btnGet" onclick="displayCalendar()" />

Upon pressing the button, the displayCalendar() function calls the jQuery fullCalendar which populates all the events from the controller.

The problem is that I have a set of integers that I also want to be fetched in that AJAX call or separately.

Controller:

 return Json(totalList, JsonRequestBehavior.AllowGet);

Now what have I tried? I tried using ViewBag, ViewData, TempData. like this;

        TempData["countWeekDays"] = countWeekDays;
        TempData["countPresents"] = countPresents;
        TempData["countAbsence"] = countAbsence;
        TempData["countLates"] = countLates;
        TempData["countFines"] = countFines;

and then display them in the same Index.cshtml but it did not work. I, then made a list of integers and tried to bind that list along with the already list of objects that was passed in the json like;

        List<int> statsView = new List<int>();
        statsView.Add(countWeekDays);
        statsView.Add(countPresents);
        statsView.Add(countAbsence);
        statsView.Add(countLates);
        statsView.Add(countFines);

  IEnumerable<object> completeObjects = totalList.Cast<object>().Concat(statsView.Cast<object>());


    return Json(completeObjects, JsonRequestBehavior.AllowGet);

When I tried the above method, I could see the list in the console debug in the browser but the problem is that it doesnt populate the calendar then. if I exclude the list statsView then the calendar is properly populated with the events.

Maybe a function within the displayCalendar() that is when called, it fetches the list from the controller and simply displays it in the view?

UPDATED:

<div id='calendar'></div>
@section scripts{
    <script>
        function h() {
            id = $('#EmpId').val();

            s = $("#startDate").val();
            e = $("#endDate").val();


                $.post("/Controller/method",
                    {
                        ENum: id,
                        StartDate: s,
                        EndDate: e
                    },
                    function (response) {
                        callCalendar(response);
                    }
                 );
        }
        function displayCalendar(e)
        {

            $("#calendar").fullCalendar('removeEvents');
            $("#calendar").fullCalendar('addEventSource', e);
            $("#calendar").fullCalendar('rerenderEvents');

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaDay'
                },
  }
            });
            //stats here
        }
    </script>
    <script>
        $(document).ready(function () {
            displayCalendar('');
        });
    </script>
}

Can you share the code which displays list of integers in calendar? What is the code of displayCalendar method? — Chetan
– Chetan, Commented Dec 3, 2017 at 15:25
How are you using the data inside the ajax success/done event ? — Shyju
– Shyju, Commented Dec 3, 2017 at 15:49
@ChetanRanpariya I am not displaying the list on the calendar, the calendar is being populated with other data. I have a list of int type that I want to display just below the calendar but I dont know how to since the method is already returning json (for calendar). — user9046719
– user9046719, Commented Dec 3, 2017 at 17:00
@Shyju that is being done correctly and rendering fine. Right now we have a list as shown above statsView that I want to display on the view. (debugged, the values are in it just not being able to take to the view) — user9046719
– user9046719, Commented Dec 3, 2017 at 17:01

Shyju · Accepted Answer · 2017-12-03 17:45:49Z

1

If your current code is working to correctly populate the calendar and if you want to send some additional data (list of integers), you may return a new annonymous object with 2 properties, one for your original data and second for the additional data.

List<int> statsView = new List<int>();
statsView.Add(countWeekDays);
statsView.Add(countPresents);
statsView.Add(countAbsence);
statsView.Add(countLates);
statsView.Add(countFines);

return Json(new { list = totalList, statusList = statsView },
                                                     JsonRequestBehavior.AllowGet);

Now make sure you update the client side code to use the list property of the response object for your callCalendar method call. To get the statusView collections, use the statusList property of the response object.

var d = { ENum: id, StartDate: s, EndDate: e };
$.post("/Controller/method",d ,function (response) {
        console.log(response.statusList); 
        callCalendar(response.list);
});

If you want to display the items in response.statusList in the page, you may loop through them and add it to any existing DOM element. You can use $.each for iterating the array.

$.post("/Controller/method",d ,function (response) {
        console.log(response.statusList); 

        var items="";
        $.each(response.statusList,function(a,b){
           items+='<p>'+b+'</p>';
        });
        $("#StatusList").html(items);

        callCalendar(response.list);
});

Assuming you have a div with id set to StatusList in your page

<div id="StatusList"></div>

edited Dec 3, 2017 at 17:45

answered Dec 3, 2017 at 17:14

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

15 Comments

user9046719 Over a year ago

Same problem, I get the int list but the calendar does not populate with this, If I change the json return to the back it populates fine but i cant get the list then. Image > ibb.co/kb3aVG PS. the int list has nothing to do with calendar I just want to display it plain format maybe in a table.

Shyju Over a year ago

the response.list will be same array as the array returned by your old code . If your old code worked fine,this should also works fine as long as you use response.list. compare the two outputs and see what is missing.

Shyju Over a year ago

Also, the JsonRequestBehavior.AllowGet has to be second parameter, not part of the anonymous object( I missed the bracket earlier,Fixed now)

Shyju Over a year ago

I do not know what your callCalendar method does, hence cannot tell you what is wrong. But like i mentioned in my earlier comment, If your previous approach worked fine, all you need to do is compare the data in two approaches. As long as the response from previous approach and response.list are returning the same type of data (the array of items), your code should work fine.

user9046719 Over a year ago

Now make sure you update the client side code to use the list property of the response object read this line again and now I fixed the calendar population. How do I display the statusList on the page now? > console.log(response.statusList);

|

Collectives™ on Stack Overflow

Fetching List of int from controller to View ASP.NET

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related