如何在ASP.NET中动态地将数据库数据添加到Jquery控件?

时间:2014-12-20 10:03:55

标签: javascript c# jquery asp.net c#-4.0

我是Jquery的新手。我想在JQuery日历控件中显示每日报告,但我没有动态从数据库加载数据任何人请帮帮我

<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'
            }

        ]
    });

});

然后请告诉我如何加载此标题并从asp.net中的数据库动态启动

1 个答案:

答案 0 :(得分:1)

您必须实现休息服务并使用AJAX调用它。最常见的方法是创建ApiController(如果您使用的是MVC)或为ASMX Service添加WebForms。您还可以通过WebApiWebForms导入NuGet项目。

完整的解释太长了。我会给你一些片段:

配置路由表。在{action}

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

创建ApiController方法:

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

使用Jquery调用api方法并获取JSON:

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