How to add database data to Jquery control dynamically in ASP.NET?

Question

I'm new to Jquery .I want to display daily reports in JQuery calender control but I'm failing to load data dynamically from data base any one please help me

<script>

$(document).ready(function() {

    $('#calendar').fullCalendar({
        defaultDate: '2014-11-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2014-11-01'
            },
            {
                title: 'Long Event',
                start: '2014-11-07',
                end: '2014-11-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2014-11-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2014-11-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2014-11-11',
                end: '2014-11-13'
            },
            {
                title: 'Meeting',
                start: '2014-11-12T10:30:00',
                end: '2014-11-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2014-11-12T12:00:00'
            }

        ]
    });

});

Then please tell me how to load this title and start dynamically from database in asp.net

opewix · Accepted Answer · 2014-12-20 10:15:48Z

1

You have to implement rest service and call it using AJAX. The most common way is create ApiController (if you are using MVC) or add ASMX Service for WebForms. You also able to import WebApi to WebForms project via NuGet.

The full explanation is too long. I'll give you some snippets:

Configure route table. Insert {action} placeholder in routeTemplate

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

Create ApiController method:

    [HttpGet]
    public List<CalendarEvent> GetEvents(int count)
    {
        return new List<CalendarEvent>();
    }

Call your api method with Jquery and get JSON:

        $.getJSON('http://yoursite.com/api/GetEvents', {
            count: 5
        }, function (data) {
            var jsonData = data;
        });

edited Dec 20, 2014 at 10:15

answered Dec 20, 2014 at 10:10

opewix

5,1031 gold badge22 silver badges43 bronze badges

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

2 Comments

Lax_me Over a year ago

Isn't there any simple way by using simple for loop ?

opewix Over a year ago

@Lax_me if you want to fetch data from server you don't need loops. You need to call server method from client-side. Get jsondata and set it to calendar events property

Collectives™ on Stack Overflow

How to add database data to Jquery control dynamically in ASP.NET?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related