刷新FullCalendar取决于Dropdown / Viewbag

时间:2018-04-10 18:53:01

标签: jquery ajax

我正在开发一个应用程序,人们可以通过管理员预约约会。管理员有不同的时间表。

我希望用户能够选择管理员的下拉框。点击下拉列表后,我希望能够刷新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中使用

0 个答案:

没有答案