Question

您好我的mvc项目有问题。我需要为工人制作多个日历（每个工人一个日历与工人日期）。这是我的代码。

public JsonResult Index()
     {
        var employees = this.employeeManager.EmployeeList();
        var eventList = new List();
        foreach (var employee in employees)
        {
            var eventList = from e in employee.Mounts
                            select new
                            {
                                id = e.Id,
                                firstName = e.Name,
                                dateFrom = e.DateFrom,
                                dateTo = e.DateTo,
                            };
        }
        return Json(eventList, JsonRequestBehavior.AllowGet);
    }

我需要在自己的日历中显示每位员工的挂载列表。这是我的javascript代码：

function GetEvents() {
$.ajax({
    dataType: "json",
    contentType: "application/json",
    data: "{}",
    url: "/Employee/Index",
    dataType: "json",
    success: function (data) {
        $('#calendar').fullCalendar({
            theme: false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            defaultView: 'basicWeek',
            editable: true,
            events: $.map(data, function (item, i) {
                var event = new Object();
                event.start = moment(item.DateFrom).utc();
                event.end = moment(item.DateTo).utc();
                event.title = item.name;
                event.id = item.id;
                return event;
            }),
            eventClick: function (calEvent, jsEvent, view) {

                alert('Event: ' + calEvent.title);
                $(this).css('border-color', 'red');

            },
        });

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#cal_error").text(errorThrown); //Handle Error
    }
});
}

如何在json对象中返回对象列表？

员工类：

public class EmployeeDto
{
    public long Id { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string PhoneNumer { get; set; }

    public string Email { get; set; }

    public MountDto[] Mounts { get; set; }

    public bool Active { get; set; }

}

装载课程：

public class MountDto
{
    public long? Id { get; set; }

    public string Name { get; set; }

    public string Place { get; set; }

    public string PhoneNumber { get; set; }

    public DateTime DateTo { get; set; }

    public DateTime DateFrom { get; set; }

}

Answer 1

我的回答增加了上述答案。在客户端代码中迭代您的数据，以创建多个日历控件。以下代码未经过测试，但应该可以使用。

function GetEvents() {
$.ajax({
    dataType: "json",
    contentType: "application/json",
    data: "{}",
    url: "/Employee/Index",
    dataType: "json",
    success: function (data) {
        data.forEach(function(item)
       {
        $('#calendar').fullCalendar({
            theme: false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            defaultView: 'basicWeek',
            editable: true,
            events:  $.map(item.eventsList, function (currEvent, i) {
            var event = new Object();
            event.start = moment(currEvent.DateFrom).utc();
            event.end = moment(currEvent.DateTo).utc();
            event.title = currEvent.name;
            event.id = currEvent.id;
            return event;
        }),
            eventClick: function (calEvent, jsEvent, view) {

                alert('Event: ' + calEvent.title);
                $(this).css('border-color', 'red');

            },
        });  
     });

Answer 2

您可以尝试重写查询以返回按员工ID分组的数据列表：

public JsonResult Index()
{
    var employees = this.employeeManager.EmployeeList();

    var employeesList = employees.Select(e => new 
                    {
                        id = e.Id,
                        firstName = e.Name,
                        eventsList = e.Months.Select(o => new {
                             id = o.Id,
                             firstName = o.Name,
                             dateFrom = o.DateFrom,
                             dateTo = o.DateTo
                        }).ToList()
                    }).ToList();

    return Json(employeesList, JsonRequestBehavior.AllowGet);
}

您还需要重写客户端代码以迭代返回的数据。

如何显示对象列表的多个日历

2 个答案: