Jquery 如何实现基于id的完整日历视图？

我正在构建一个MVC项目，跟踪员工使用的假期。我有一个基于“employeeID”的网络网格，它将显示休假天数。我希望能够使用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; }
}`

假期管理员

//
    // 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
        }));
    }

//
//休假/
公共操作结果索引（[Bind（Prefix=“id”）]int-employeeId）
{
var Employee=db.Employees.Find（employeeId）；
if（Employee！=null）
{
返回视图（员工）；
}
返回HttpNotFound（）；
}
公共行动结果日历（）
{
返回视图（）；
}
[HttpPost]
公共行动结果列表（长起点、长终点）
{
var epoch=新日期时间（1970,1,1）；
var startDate=epoch.add毫秒（开始）；
var endDate=epoch.add毫秒（结束）；
var ctx=新的FullCalendarTestContext（）；
var数据=ctx.假期
.Where（i=>startDate new{EventDate=i.Key，VacationCodeID=i.FirstOrDefault（））.Take（20.ToList（）；
返回Json（data.Select（i=>new
{
title=（i.VacationCodeID.VacationCode.VacationType！=null）？i.VacationCodeID.VacationCode.VacationType:“无标题”，
start=i.EventDate.ToShortDateString（），
全天
}));
}

假期索引视图：

    @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.Employee
@Model.FullName

@Html.Partial（“_Partial1”，Model.Vacation）
@模型IEnumerable

@ActionLink（“新建”、“创建”）

@{
WebGrid grid=newWebGrid（模型，行页面：10，canPage:true，canSort:true，defaultSort:EventDate）；
grid.SortDirection=SortDirection.Descending；
}
@GetHtml（列：new[]{
grid.Column（“Employee.FullName”、“Name”），
网格列（“VacationCode.VacationType”、“VacationCode”），
grid.Column（“EventDate”，“Date”，format:（item）=>string.format（“{0:MMM-dd-yy}”，item.EventDate）），
网格栏（“小时”、“小时”），
网格栏（“注释”、“注释”），
网格.列（“”，
标题：“编辑选项”，
格式：@
@ActionLink（“编辑”，“编辑”，新的{id=item.VacationID}）
@ActionLink（“删除”，“删除”，新的{id=item.VacationID}）
)
})

日历视图：

    @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>

@model FullCalendarTest.Models.Vacation
@节脚本{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
事件单击：功能（i、evt、视图）{
},
事件：函数（开始、结束、回调）{
$.ajax({
类型：“post”，
url:'@url.Action（“列表”、“假期”）？start='+start.getTime（）.toString（）+“&end=“+end.getTime（）.toString（），
成功：功能（d）{
var列表=[]；
对于（变量i=0，len=d.length；i

一种方法是：

• 在控制器端添加一个额外的

  employeeId

  ，并在查询中使用它，如下所示：

  .Where(i => i.employeeId == employeeId && startDate <= ...
  

---

我在这方面还没有任何运气。我想以类似于“索引”到“详细信息”视图的方式将EmployeeID传递到日历。@Hugh:你所说的“索引”到“详细信息”视图是什么意思？“索引”将EmployeeID传递到“详细信息”视图，并提供仅与该员工相关的数据。与上面的假期控制器类似，该索引收集EmployeeID，wbgrid仅在局部视图中显示该员工的假期日期。我花了相当长的时间才完全理解如何实施您的建议，当时我做得非常好。传递ID的最后一个组件是使用Html.HiddenFor助手。

.Where(i => i.employeeId == employeeId && startDate <= ...

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='+...

    })
}