Lesson 2 - Implement the Insert/Update/Delete Appointment Functionality

  • 6 min to read

This step-by-step guide demonstrates how to update a simple application created in the Lesson 1 to enable end-users to add new appointments, modify existing appointments and delete them if necessary.

To enable the appointment editing functionality, do the following.

Step 1. Add an Action Method

To edit appointments, implement an action method named EditAppointment. It will perform all required modifications, update the scheduler appointment data and pass it to the view for rendering.

@*#region #SchedulerPartial*@
@Html.DevExpress().Scheduler(
settings => {
    settings.Name = "scheduler";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "SchedulerPartial" };
    settings.EditAppointmentRouteValues = new { Controller = "Home", Action = "EditAppointment" };
    settings.Storage.Appointments.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultAppointmentStorage);
    settings.Storage.Resources.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultResourceStorage);

    settings.Storage.EnableReminders = true;

    settings.ActiveViewType = SchedulerViewType.FullWeek;
    settings.Views.FullWeekView.Styles.ScrollAreaHeight = 600;
    settings.Start = new DateTime(2015, 4, 18);

}).Bind(Model.Appointments, Model.Resources).GetHtml()
@*#endregion #SchedulerPartial*@

A request for editing can be issued if there is 1) a new appointment to insert 2) one or more appointments with modified properties so they should be updated 3) one or more appointments to delete. To handle all these situations, the UpdateAppointment method calls the SchedulerExtension.GetAppointmentsToInsert<T>, SchedulerExtension.GetAppointmentsToUpdate<T> and the SchedulerExtension.GetAppointmentsToRemove<T> MVC Scheduler extension methods.

Methods GetAppointmentsTo* have several overloads intended for use in different situations. This example utilizes a simple method overload that takes the name of a Scheduler, appointment and resource data and mappings as parameters. The method creates a fake scheduler, applies post data and binds the scheduler to data. Since a SchedulerSettings instance is not passed to the method, there might be some settings that are missed in this case. If these settings affect the number of retrieved appointments, this method overload can produce results different from those expected. To overcome this problem, another method overload is implemented that receives a SchedulerSettings instance. It guarantees correct operation but causes difficulties for the developer.

When appointments are retrieved, the helper methods convert them to data objects and update the data source.

Step 2. Provide Insert, Update, Delete Methods

The SchedulerDataHelper class is extended with three methods that handle insert, update and delete operations with appointments.

Note that this sample code uses the standard GetHashCode method to assign a unique ID for a newly created appointment. This technique is not generally recommended since the database can provide its own ID via auto incremented field. If this is the case as it is in the CodeCentral example mentioned above, the ID is overwritten after submitting changes via the DataContext.SubmitChanges method. Consider implementing a proper technique to obtain the unique appointment id.

@*#region #SchedulerPartial*@
@Html.DevExpress().Scheduler(
settings => {
    settings.Name = "scheduler";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "SchedulerPartial" };
    settings.EditAppointmentRouteValues = new { Controller = "Home", Action = "EditAppointment" };
    settings.Storage.Appointments.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultAppointmentStorage);
    settings.Storage.Resources.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultResourceStorage);

    settings.Storage.EnableReminders = true;

    settings.ActiveViewType = SchedulerViewType.FullWeek;
    settings.Views.FullWeekView.Styles.ScrollAreaHeight = 600;
    settings.Start = new DateTime(2015, 4, 18);

}).Bind(Model.Appointments, Model.Resources).GetHtml()
@*#endregion #SchedulerPartial*@

Step 3. Modify a View

Now provide a route for the edit appointment action. The code of the Scheduler partial view is shown below.


@Html.DevExpress().Scheduler(
settings => {
    settings.Name = "scheduler";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "SchedulerPartial" };
    settings.EditAppointmentRouteValues = new { Controller = "Home", Action = "EditAppointment" };
    settings.Storage.Appointments.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultAppointmentStorage);
    settings.Storage.Resources.Assign(MVCSchedulerEditable.Models.SchedulerStorageProvider.DefaultResourceStorage);

    settings.Storage.EnableReminders = true;

    settings.ActiveViewType = SchedulerViewType.FullWeek;
    settings.Start = new DateTime(2015, 4, 18);

}).Bind(Model.Appointments, Model.Resources).GetHtml()

Step 4. Observe the Result.

Run the project. You will see the scheduler with editable appointments on a page as illustrated in the following image.

Scheduler_Editable_Result

See Also