如何实现基于id的FullCalendar视图？(How to implement id based FullCalendar views?)
我正在建立一个跟踪员工使用假期的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; } }`假期模型
` 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>I am building an MVC project that tracks vacation days used by employees. I have web grid that will display vacation days taken based on "employeeID". I would like to be able to display these dates using FullCalendar for a single employee at a time. Currently I can display all employees or none. I am very new to this and would like further guidance. My Code so far.... Employee Model
`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; } }`Vacation Model
` 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 })); }Vacation Index View:
@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> ) })Calendar View:
@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>最满意答案
一种方法是：
在控制器端添加一个额外的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='+... }) }One way is to :
add an extra employeeId on the controller side, and use it in the query, something along the line :
.Where(i => i.employeeId == employeeId && startDate <= ...add the parameter to the request, on the javascript side :
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='+... }) }更多推荐
发布评论