ASP.Net MVC calling a controller action from FullCalendar's javascript function not loading the view

Question

I am developing an ASP.Net MVC application. In one of my views, I am using FullCalendar control. I am having 2 issues with my fullcalendar control - My First issue is - On event click function, I am calling an action of some other controller from a Javasript function. My script is -

    <script>
        $(document).ready(function () {

            var sourceFullView = { url: '/Calendar/GetDiaryEvents/' };
            var sourceSummaryView = { url: '/Calendar/GetDiaryEvents/' };
            var CalLoading = true;

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                defaultView: 'month',
                editable: true,
                allDaySlot: false,
                selectable: true,
                slotMinutes: 15,
                events: '/Calendar/GetDiaryEvents/',
                eventClick: function (calEvent, jsEvent, view) {
                    if (!confirm('You selected Election ID: ' + calEvent.title
                        + "\nElection Date: " + calEvent.start.toDateString()
                        + "\n\nDo you want to Vote for this Election?")) {
                        return;
                    }
                    var electionID = calEvent.id;
                    $.ajax({
                        url: '@Url.Action("Tally", "Voting")',
                        type: 'GET',
                        dataType: 'json',
                        cache: false,
                        data: { id: calEvent.id }
                    });
                },

                eventResize: function (event, dayDelta, minuteDelta, revertFunc) {

                    if (confirm("Confirm change appointment length?")) {
                        UpdateEvent(event.id, event.start, event.end);
                    }
                    else {
                        revertFunc();
                    }
                },

                viewRender: function (view, element) {

                    if (!CalLoading) {
                        if (view.name == 'month') {
                            $('#calendar').fullCalendar('removeEventSource', sourceFullView);
                            $('#calendar').fullCalendar('removeEvents');
                            $('#calendar').fullCalendar('addEventSource', sourceSummaryView);
                        }
                    }
                }

            });

            CalLoading = false;


        });

    </script>

This is calling Tally method of VotingController -

            [HttpGet]
            public ActionResult Tally(int id)
            {
                return View(id);
            }

When I debug through View of Tally then also it is looking fine but the new view called from action Tally is not loaded and browser still shows my calendar control.

My second issue is I want to display only monthly calendar. When I click next or prev button on calendar then my GetDiaryEvents function is called thrice.

Answer 1

Try to use a JsonResult in the Tally method. You could also render the view to string and include it in the json return.

[HttpGet]
        public JsonResult Tally(int id)
        {   //fill your model
            return Json( new { viewdata=model } );
        }

And in the ajax call return you just need to read json return object

 success: function (return) {
            $("#element").append(return.viewdata);

        }