We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to perform CRUD operation in Scheduler with SignalR concept?

Platform: ASP.NET Web Forms |
Control: Schedule |
Published Date: November 20, 2015 |
Last Revised Date: May 24, 2019

The following steps shows how to perform CRUD (Create, Update and Delete) operations on schedule control with the SQL table data making use of SignalR concept.

Step 1: Create a Schedule sample with CRUD operations by referring the link.

Step 2: Add the necessary scripts of SignalR and other assembly reference as shown below.

SignalR script reference

Figure 1 - SignalR script reference

 

SignalR assembly reference

Figure 2 - SignalR assembly reference

Step 3: To make use of the SignalR concept, create a SignalR Hub class in your application as shown in the below image.

SignalR Hub Class creation

Figure 3 - SignalR Hub Class creation

Step 4: Add the below highlighted SignalR mapping code in the Startup class to avoid the SignalR/hubs not found script error.

[Startup.cs]

public partial class Startup {
        public void Configuration(IAppBuilder app) {
            ConfigureAuth(app);
            app.MapSignalR();
        }
    }

 

Step 5: Define the method “Modify” within the scheduleHub class, where the method name (modify) to be used in the client side is declared as given below.

[scheduleHub.cs]

// Here the Schedule action and appointment details are received from the server and passed to the client machine/browser
public void Modify(string action, Object data)
        {
            Clients.Others.modify(action, data);
        }

 

Step 6: In the Default.aspx page, add the following script code which gets executed every time, whenever the Scheduler appointments in the page is being added/ modified/ deleted/ dragged/ resized/ navigated simultaneously in one or many of the browser instances. Also, once it is executed, those changes will be reflected parallel on all the clients.

[JavaScript]

<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeadContent" runat="server">    
    -------
    -------
    -------
    <script type="text/javascript"> 
 
        $(function () {            
            window.signal = $.connection.scheduleHub; // Here we are creating the connection with the created scheduleHub class
 
            // The following code example will execute in the client machine/browser while performing the CRUD operation
            window.signal.client.modify = function (action, data) { // Here the action holds the details of the currentAction (ex: appointmentSaved) and data holds the details of the appointment
                if (data != null) {
                    var id = data.Id != null ? data.Id : data[0].Id;
                    var subject = data.Subject;
                    var startTime = new Date(data.StartTime);
                    var endTime = new Date(data.EndTime);
                    var description = data.Description;
                    var allDay = data.AllDay;
                    if (data.Recurrence) {
                        var recurrence = data.Recurrence;
                        var recurrenceRule = data.RecurrenceRule;
                    }
                    var startTimeZone = data.StartTimeZone;
                    var endTimeZone = data.EndTimeZone;
                    var object = { Id: id, Subject: subject, StartTime: startTime, EndTime: endTime, Description: description, AllDay: allDay, Recurrence: recurrence, RecurrenceRule: recurrenceRule, StartTimeZone: startTimeZone, EndTimeZone: endTimeZone };
                    var schedule = $("#Schedule1").data("ejSchedule");
                    if (action == "appointmentSaved") { 
                    // This block code example will execute when the appointment is created
                        new ej.DataManager(schedule._currentAppointmentData).insert(object);
                        schedule._appointmentProcessing(object);
                        schedule._renderAppointmentAll();
                    }
                    else if (action == "appointmentEdited" || action == "resizeStop" || action == "dragStop") { 
                    // This block code example will execute when the appointment is edited
                        new ej.DataManager(schedule._processed).remove("Id", object.Id);
                        schedule._appointmentProcessing(object);
                        schedule._renderAppointmentAll();
                    }
                    else if (action == "appointmentDeleted") { 
                    // This block code example will execute when the appointment is deleted
                        var appointment = new ej.DataManager(schedule._processed).executeLocal(new ej.Query().where("Id", ej.FilterOperators.equal, id));
                        new ej.DataManager(schedule._currentAppointmentData).remove("Id", appointment[0].Id);
                        new ej.DataManager(schedule._processed).remove("Id", appointment[0].Id);
                        schedule._renderAppointmentAll();
                    }
                }
            };
            $.connection.hub.start().done(function () {
                // The following code example will execute while performing the CRUD operation
                window.actionComplete = function (args) {
                    if (args.methodType == "public")
                        args.appointment = null;
                    var appointmentDetails = args.appointment;
                    if (args.type == "appointmentSaved" || args.type == "appointmentEdited" || args.type == "appointmentDeleted" || args.type == "resizeStop" || args.type == "dragStop") {
                        window.signal.server.modify(args.type, appointmentDetails); // Here we are passing the current action and the appointment details to the hub class
                    }
                };
            });
        });
 </script>
</asp:Content>

 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%-- Here we have declared (highlighted) the necessary client side method--%>
 
    <ej:schedule clientidmode="Static" runat="server" id="Schedule1" datasourceid="ScheduleData" width="100%" height="525px" ResizeStop="actionComplete" DragStop="actionComplete" AppointmentDeleted="actionComplete" AppointmentEdited="actionComplete" AppointmentSaved="actionComplete" Navigation="actionComplete" currentdate="3/3/2015" currentview="Workweek" onserverappointmentsaved="Schedule1_ServerAppointmentSaved" onserverappointmentedited="Schedule1_ServerAppointmentEdited" onserverappointmentdeleted="Schedule1_ServerAppointmentDeleted" OnServerDragStop="Schedule1_ServerDragStop" OnServerResizeStop="Schedule1_ServerResizeStop" actionComplete="actionComplete">
         
    -------
    -------
    -------
 
</ej:schedule>
 
</asp:Content>

 

Step 7: Run the below attached sample with which you can perform insert, edit, and delete operations on the schedule appointments that simultaneously reflects on the SQL database and also on all the client systems.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/146344/ze/Sample-972961372

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon