我正在开发一个应用程序,人们可以通过管理员预约约会。管理员有不同的时间表。
我希望用户能够选择管理员的下拉框。点击下拉列表后,我希望能够刷新FullCalendar,具体取决于下拉列表中的内容。
我不确定在哪里进行此操作:控制器或ajax调用。使用ajax调用,我不知道是否会刷新我的FullCalendar。
这是我的控制器方法:
// GET: Appointments/Create
public ActionResult Create()
{
ViewBag.ChurchId = new SelectList(db.Churches, "ChurchId", "Name");
ViewBag.Details = new SelectList(new[] { "Confession", "Baptism Meeting", "Wedding Meeting", "Personal Meeting" });
ViewBag.AdminId = new SelectList(db.Admins, "AdministrationId", "AdministratorName");
return View();
}
// POST: Appointments/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "AppointmentId,DetailsOfAppointment,RoomType,DateOfAppointment,Confirmed,NameOfApplicant, ThemeColour, ApplicantPhoneNumber, ApplicantEmail,AdministrationId,ChurchId")] Appointments appointments)
{
if (ModelState.IsValid)
{
bool checkUserLoggedIn = (System.Web.HttpContext.Current.User != null)
&& System.Web.HttpContext.Current.User.Identity.IsAuthenticated;
appointments = ValidateEmail(appointments);
var currentBooking = db.Appointments
.Any(b => (appointments.DateOfAppointment == b.DateOfAppointment
&& appointments.AdministrationId == b.AdministrationId));
var checkPriestHolidays = db.PriestLeave
.Any(b => (appointments.DateOfAppointment >= b.StartDate && appointments.DateOfAppointment <= b.EndDate));
if (currentBooking)// && checkCeremony)
{
TempData["Error"] = "Room, Date and Admin booked for appointment";
}
else if(checkPriestHolidays)
{
TempData["Error"] = "Priest on Leave";
}
else
{
db.Appointments.Add(appointments);
db.SaveChanges();
var app = (from a in db.Appointments
where appointments.AppointmentId == a.AppointmentId
select a).FirstOrDefault();
string churchName = (from c in db.Churches
where c.ChurchId == appointments.ChurchId
select c.Name).FirstOrDefault();
string adminName = (from a in db.Admins
where a.AdministrationId == appointments.AdministrationId
select a.AdministratorName).FirstOrDefault();
string adminEmail = (from a in db.Admins
where a.AdministrationId == appointments.AdministrationId
select a.EmailAddress).FirstOrDefault();
UserMailer.AppointmentDetails(app, churchName, adminName, adminEmail).Send(); //Send() extension method: using Mvc.Mailer
return RedirectToAction("Index", "Home");
}
}
if (appointments.DetailsOfAppointment.Equals("Confession"))
{
ViewBag.Rooms = new SelectList(new[] { "Sacristy", "Confession Room" });
}
else if (appointments.DetailsOfAppointment.Equals("Baptism Meeting") || appointments.DetailsOfAppointment.Equals("Wedding Meeting") || appointments.DetailsOfAppointment.Equals("Personal Meeting"))
{
ViewBag.Rooms = new SelectList(new[] { "GP Room", "Parish Office" });
}
ViewBag.Details = new SelectList(new[] { "Confession", "Baptism Meeting", "Wedding Meeting", "Personal Meeting" });
ViewBag.ChurchId = new SelectList(db.Churches, "ChurchId", "Name", appointments.ChurchId);
ViewBag.AdminId = new SelectList(db.Admins, "AdministrationId", "AdministratorName", appointments.AdministrationId);
return View(appointments);
}
public JsonResult UnAvailableSlots()
{
var events = (from a in db.Appointments
select a).ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
我的观点:
<div class="form-group">
@Html.LabelFor(model => model.AdministrationId, "Parish Admin", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AdministrationId", ViewBag.AdminId as SelectList, new { })
@Html.ValidationMessageFor(model => model.AdministrationId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ChurchId, "Church Name", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("ChurchId", null, htmlAttributes: new {})
@Html.ValidationMessageFor(model => model.ChurchId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DateOfAppointment, "Date of Appointment", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DateOfAppointment)
@Html.ValidationMessageFor(model => model.DateOfAppointment, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.NameOfApplicant, "Name of Applicant", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.NameOfApplicant)
@Html.ValidationMessageFor(model => model.NameOfApplicant, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ApplicantEmail, "Email of Applicant", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ApplicantEmail)
@Html.ValidationMessageFor(model => model.ApplicantEmail, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ApplicantPhoneNumber, "Phone Number of Applicant", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ApplicantPhoneNumber)
@Html.ValidationMessageFor(model => model.ApplicantPhoneNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<script>
$(document).ready(function () {
var events = [];
var dateToday = new Date();
$.ajax({
type: "GET",
url: "/Appointments/UnAvailableSlots",
success: function (data) {
$.each(data, function (i, v) {
events.push({
details: v.DetailsOfAppointment,
date: moment(v.DateOfAppointment),
room: v.RoomType,
confirmed: v.Confirmed,
colour: v.ThemeColour,
church: v.Church.Name,
parishAdminName: v.Admins.AdministratorName,
parishAdminUser: v.Admins.AdminUsername,
parishAdminId: v.Admins.AdministratorId,
fee: v.Fee,
id: v.AppointmentId
})
})
GenerateCalender(events);
},
error: function (error) {
alert("failed");
console.log(error);
}
})
function GenerateCalender(events) {
$('#calendar').fullCalendar({
contentHeight: 300,
header: {
left: 'prev,next today',
center: 'title',
right: 'basicWeek, agenda'
},
dayClick: function (date, allDay, jsEvent, view)
{
if (allDay)
{
var d = document.getElementById("DateOfAppointment");
d.value = date.format("DD/MM/YYYY HH:mm");
}
},
defaultView: "agenda",
minTime: "09:00:00",
maxTime: "17:00:00",
minDate: dateToday,
timeFormat: 'HH:mm',
eventLimit: true,
eventColor: events.ThemeColour,
events: events,
eventRender: function (event, element) {
if (event.fee == null) {
if (event.confirmed == false) {
element.css('background-color', '#FF0000');
element.css('border-color', '#FF0000');
}
else {
element.css('background-color', '#008000');
element.css('border-color', '#008000');
}
}
else {
element.css('background-color', '#0000FF');
element.css('border-color', '#0000FF');
}
编辑我认为refetchEvents需要在FullCalendar中使用