Question

我正在建立一个跟踪员工使用假期的MVC项目。我有网格，将根据＆＃34; employeeID＆＃34;显示休假日。我希望能够一次使用FullCalendar为单个员工显示这些日期。目前我可以显示所有员工或没有。我对此非常陌生，希望得到进一步的指导。我的代码到目前为止.... 员工模型

`public class Employee
{
    public int EmployeeID { get; set; }
    [Required(ErrorMessage = "Last name is required.")]
    [Display(Name = "Last Name")]
    [MaxLength(50)]
    public string LastName { get; set; }
    [Display(Name = "First Name Middle Initial")]
    [MaxLength(50, ErrorMessage = "First name cannot be longer than 50 characters.")]
    public string FirstMidName { get; set; }
    public string FullName
    {
        get
        {
            return FirstMidName + " " + LastName;
        }
    }
    public virtual ICollection<Vacation> Vacation { get; set; }
}`

假期模型

 ` public class Vacation
    {

        public int VacationID { get; set; }
        public int EmployeeID { get; set; }
        public int VacationCodeID { get; set; }
        [DataType(DataType.Date)]
        public DateTime EventDate { get; set; }
        public int Hours { get; set; }
        public string Notes { get; set; }

        public virtual Employee Employee { get; set; }
        public virtual VacationCode VacationCode { get; set; }
    }`

VacationController

//
    // GET: /Vacation/
    public ActionResult Index([Bind(Prefix = "id")]int employeeId)
    {
        var Employee = db.Employees.Find(employeeId);
        if (Employee != null)
        {
            return View(Employee);
        }
        return HttpNotFound();
    }

public ActionResult Calendar()
    {

        return View();
    }

    [HttpPost]
    public ActionResult List(long start, long end)
    {
        var epoch = new DateTime(1970, 1, 1);
        var startDate = epoch.AddMilliseconds(start);
        var endDate = epoch.AddMilliseconds(end);

        var ctx = new FullCalendarTestContext();
        var data = ctx.Vacations
        .Where(i => startDate <= i.EventDate && i.EventDate <= endDate)
        .GroupBy(i => i.EventDate)
        .Select(i => new { EventDate = i.Key, VacationCodeID = i.FirstOrDefault() }).Take(20).ToList();

        return Json(data.Select(i => new
        {
            title = (i.VacationCodeID.VacationCode.VacationType != null) ? i.VacationCodeID.VacationCode.VacationType : "Untitled",
            start = i.EventDate.ToShortDateString(),
            allDay = true
        }));
    }

假期指数查看：

    @model FullCalendarTest.Models.Employee

<h1>@Model.FullName</h1>

<hr />

@Html.Partial("_Partial1", Model.Vacation)

    @model IEnumerable<FullCalendarTest.Models.Vacation>


<p>
    @Html.ActionLink("Create New", "Create")
</p>
@{
    WebGrid grid = new WebGrid(Model, rowsPerPage: 10, canPage: true, canSort: true, defaultSort: "EventDate");
    grid.SortDirection = SortDirection.Descending;
}

@grid.GetHtml(columns: new[]{

grid.Column("Employee.FullName", "Name" ),
grid.Column("VacationCode.VacationType","Vacation Code"),
grid.Column("EventDate", "Date",format: (item) => string.Format("{0:MMM-dd-yy}", item.EventDate)),
grid.Column("Hours","Hours"),
grid.Column("Notes","Notes"),
grid.Column("",
header:"Edit Options",
format: @<text>
    @Html.ActionLink("Edit", "Edit", new { id = item.VacationID })
    @Html.ActionLink("Delete", "Delete", new { id = item.VacationID })
</text>
)
})

日历视图：

    @model FullCalendarTest.Models.Vacation

@section scripts{
    <link href="@Url.Content("~/Content/fullcalendar.css")"rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
    <script>
        $("#calendar").fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            eventClick: function (i, evt, view) {
            },
                              events: function (start, end, callback) {
                $.ajax({
                    type: "post",
                    url: '@Url.Action("List", "Vacation")?start=' + start.getTime().toString() + "&end=" + end.getTime().toString(),
                    success: function (d) {
                        var list = [];
                        for (var i = 0, len = d.length; i < len; i++) {
                            var item = d[i];
                            item.start = new Date(item.start);
                            list.push(item);
                        }

                        callback(list);
                    },
                    error: function (e) {
                        debugger;
                    }
                });
            }
        });
    </script>
}
<h2>Calendar</h2>
<div id='calendar' style="width: 75%"></div>

Answer 1

一种方法是：

在控制器端添加一个额外的employeeId，并在查询中使用它，就像这样：
```
.Where(i => i.employeeId == employeeId && startDate <= ...
```

在javascript端将参数添加到请求中：

events: function(...){
    // Get the expected employeeId from some source :
    // an html node, a specific attribute, a javascript variable ...
    // For example, if the "displayed employee" is chosen from a select :
    var employeeId = $('#selectEmployee').val(); 
    $.ajac({
        url: '@Action...?employeeId='+employeeId+'&start='+...

    })
}

如何实现基于id的FullCalendar视图？

1 个答案: