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

本文关键字：数据 数据库 添加 控件 Jquery ASP NET 动态 | 更新日期: 2023-09-27 18:34:44

我是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

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

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

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

配置路由表。在routeTemplate中插入{action}占位符 

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

创建 API 控制器方法：

    [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;
        });
相关文章：