How to perform CRUD operation in Scheduler with SignalR concept?
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.
Figure 1 - SignalR script 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.
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: https://www.syncfusion.com/downloads/support/directtrac/146344/ze/Sample-972961372
