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.
|
The Schedule control in JavaScript supports CRUD operations (Create, Read, Update, and Delete) to be performed by making use of the Web Service methods either in an ASP.NET or MVC application. The following steps helps you to perform the CRUD operations like adding, editing and deleting appointments on the Schedule control by using the web services in an ASP.NET application. Step 1: Create an empty ASP.NET application and add a new HTML page with the default schedule rendering code. Also, add and refer the required scripts and stylesheets to it by referring here. Step 2: Now, Create a database table with the necessary fields, as follows. SQL Table Script CREATE TABLE [dbo].[Appointments] ( [Id] INT NOT NULL, [Subject] NVARCHAR (50) NULL, [Description] NVARCHAR (100) NULL, [StartTime] DATETIME NULL, [EndTime] DATETIME NULL, [AllDay] BIT NULL, [Recurrence] BIT NULL, [RecurrenceRule] NVARCHAR (100) NULL, [StartTimeZone] NVARCHAR (50) NULL, [EndTimeZone] NVARCHAR (50) NULL, PRIMARY KEY CLUSTERED ([Id] ASC) );
Note: You can create the table through Visual Studio as a local database or by using SQL Server Management Studio
Step 3: Add the connection String configuration in the Web.Config page. Refer to the following code example. Web.Config <configuration> ----------------- -------------------------- <connectionStrings> <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-ScheduleCRUDWithWebServices-20150626103804;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-ScheduleCRUDWithWebServices-20150626103804.mdf" providerName="System.Data.SqlClient" /> <add name="ScheduleDataConnectionString" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\ScheduleData.mdf;Integrated Security=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" /> </connectionStrings> ---------------- ------------------------ </configuration>
Note: Change the ConnectionString value based on the database connection. Here, the “local database” connection string is mentioned
Step 4: Create a web service with the CRUD operation functionality using the following steps:
Figure 1: Creation of the webservice
Figure 2: WebService1.asmx.cs file
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace ScheduleCRUDWithWebServices
{
/// <summary>
/// Summary description for WebService1
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public List<Appointment> GetData()
{
return db.Appointments.ToList();
}
[WebMethod]
public List<Appointment> Crud(List<Appointment> added, List<Appointment> changed, List<Appointment> deleted)
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
if (added != null && added.Count > 0)
{
var value = added[0];
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = new Appointment();
appoint.Id = value.Id;
appoint.Subject = value.Subject;
appoint.StartTime = startTime;
appoint.EndTime = endTime;
appoint.StartTimeZone = value.StartTimeZone;
appoint.EndTimeZone = value.EndTimeZone;
appoint.AllDay = value.AllDay;
appoint.Description = value.Description;
appoint.Recurrence = value.Recurrence;
appoint.RecurrenceRule = value.RecurrenceRule;
db.Appointments.InsertOnSubmit(appoint);
db.SubmitChanges();
}
if (changed != null && changed.Count > 0)
{
var filterData = db.Appointments.Where(c => c.Id == Convert.ToInt32(changed[0].Id));
if (filterData.Count() > 0)
{
var value = changed[0];
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = db.Appointments.Single(A => A.Id == Convert.ToInt32(value.Id));
appoint.StartTime = startTime;
appoint.EndTime = endTime;
appoint.StartTimeZone = value.StartTimeZone;
appoint.EndTimeZone = value.EndTimeZone;
appoint.Subject = value.Subject;
appoint.Description = value.Description;
appoint.AllDay = value.AllDay;
appoint.Recurrence = value.Recurrence;
appoint.RecurrenceRule = value.RecurrenceRule;
}
db.SubmitChanges();
}
if (deleted != null && deleted.Count > 0)
{
foreach (Appointment dele in deleted)
{
var app = db.Appointments.ToList().Where(c => c.Id == Convert.ToInt32(dele.Id)).FirstOrDefault();
if (app != null)
{
db.Appointments.DeleteOnSubmit(app);
}
}
db.SubmitChanges();
}
return db.Appointments.ToList();
}
[WebMethod]
public List<Appointment> add(Appointment value)
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
int intMax = db.Appointments.ToList().Count > 0 ? db.Appointments.ToList().Max(p => p.Id) : 0;
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = new Appointment()
{
Id = intMax + 1,
StartTime = startTime,
EndTime = endTime,
StartTimeZone = value.StartTimeZone,
EndTimeZone = value.EndTimeZone,
Subject = value.Subject,
AllDay = value.AllDay,
Recurrence = value.Recurrence,
RecurrenceRule = value.RecurrenceRule,
};
db.Appointments.InsertOnSubmit(appoint);
db.SubmitChanges();
return db.Appointments.ToList();
}
[WebMethod]
public List<Appointment> remove(string key)
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
Appointment app = db.Appointments.Where(c => c.Id == Convert.ToInt32(key)).FirstOrDefault();
if (app != null) db.Appointments.DeleteOnSubmit(app);
db.SubmitChanges();
return db.Appointments.ToList();
}
[WebMethod]
public List<Appointment> update(Appointment value)
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
var filterData = db.Appointments.Where(c => c.Id == Convert.ToInt32(value.Id));
if (filterData.Count() > 0)
{
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
Appointment appoint = db.Appointments.Single(A => A.Id == Convert.ToInt32(value.Id));
appoint.StartTime = startTime;
appoint.EndTime = endTime;
appoint.StartTimeZone = value.StartTimeZone;
appoint.EndTimeZone = value.EndTimeZone;
appoint.Subject = value.Subject;
appoint.AllDay = value.AllDay;
appoint.Recurrence = value.Recurrence;
appoint.RecurrenceRule = value.RecurrenceRule;
}
db.SubmitChanges();
return db.Appointments.ToList();
}
public class EditParams
{
public string key { get; set; }
public string action { get; set; }
public List<Appointment> added { get; set; }
public List<Appointment> changed { get; set; }
public List<Appointment> deleted { get; set; }
public Appointment value { get; set; }
}
}
}
WebService1.aspx.vb
Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.ComponentModel Imports System.Web.Script.Serialization Imports System.Data.SqlClient Imports System.Web.Script.Services ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. ' <System.Web.Script.Services.ScriptService()> _ <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _ <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <ToolboxItem(False)> _ <System.Web.Script.Services.ScriptService()> _ Public Class WebService1 Inherits System.Web.Services.WebService <WebMethod()> _ Public Function HelloWorld() As String Return "Hello World" End Function <WebMethod()> _ Public Function GetData() As List(Of ScheduleAppointment) Dim context As New ScheduleDataDataContext() Return context.ScheduleAppointments.ToList() End Function <WebMethod> _ Public Sub Crud(added As List(Of [ScheduleAppointment]), changed As List(Of [ScheduleAppointment]), deleted As List(Of [ScheduleAppointment])) Dim db As New ScheduleDataDataContext() If added IsNot Nothing AndAlso added.Count > 0 Then Dim value = added(0) Dim startTime As DateTime = Convert.ToDateTime(value.StartTime) Dim endTime As DateTime = Convert.ToDateTime(value.EndTime) Dim appoint As New ScheduleAppointment() appoint.Id = value.Id appoint.Subject = value.Subject appoint.StartTime = startTime appoint.EndTime = endTime appoint.AllDay = value.AllDay appoint.Description = value.Description appoint.Recurrence = value.Recurrence appoint.RecurrenceRule = value.RecurrenceRule db.ScheduleAppointments.InsertOnSubmit(appoint) db.SubmitChanges() End If If changed IsNot Nothing AndAlso changed.Count > 0 Then Dim filterData = db.ScheduleAppointments.Where(Function(c) c.Id = Convert.ToInt32(changed(0).Id)) If filterData.Count() > 0 Then Dim value = changed(0) Dim startTime As DateTime = Convert.ToDateTime(value.StartTime) Dim endTime As DateTime = Convert.ToDateTime(value.EndTime) Dim appoint As ScheduleAppointment = db.ScheduleAppointments.[Single](Function(A) A.Id = Convert.ToInt32(value.Id)) appoint.StartTime = startTime appoint.EndTime = endTime appoint.Subject = value.Subject appoint.Description = value.Description appoint.AllDay = value.AllDay appoint.Recurrence = value.Recurrence appoint.RecurrenceRule = value.RecurrenceRule End If db.SubmitChanges() End If If deleted IsNot Nothing AndAlso deleted.Count > 0 Then For Each dele As Object In deleted Dim app = db.ScheduleAppointments.ToList().Where(Function(c) c.Id = Convert.ToInt32(dele.Id)).FirstOrDefault() If app IsNot Nothing Then db.ScheduleAppointments.DeleteOnSubmit(app) End If Next End If End Sub <WebMethod> _ Public Sub add(value As [ScheduleAppointment]) Dim db As New ScheduleDataDataContext() Dim startTime As DateTime = Convert.ToDateTime(value.StartTime) Dim endTime As DateTime = Convert.ToDateTime(value.EndTime) Dim appoint As New ScheduleAppointment() appoint.Id = value.Id appoint.Subject = value.Subject appoint.Description = value.Description appoint.StartTime = startTime appoint.EndTime = endTime appoint.AllDay = value.AllDay appoint.Recurrence = value.Recurrence appoint.RecurrenceRule = value.RecurrenceRule db.ScheduleAppointments.InsertOnSubmit(appoint) db.SubmitChanges() End Sub <WebMethod> _ Public Sub remove(key As String) Dim db As New ScheduleDataDataContext() Dim app = db.ScheduleAppointments.ToList().Where(Function(c) c.Id = Convert.ToInt32(key)).FirstOrDefault() If app IsNot Nothing Then db.ScheduleAppointments.DeleteOnSubmit(app) End If db.SubmitChanges() End Sub <WebMethod> _ Public Sub update(value As [ScheduleAppointment]) Dim db As New ScheduleDataDataContext() Dim filterData = db.ScheduleAppointments.Where(Function(c) c.Id = Convert.ToInt32(value.Id)) If filterData.Count() > 0 Then Dim startTime As DateTime = Convert.ToDateTime(value.StartTime) Dim endTime As DateTime = Convert.ToDateTime(value.EndTime) Dim appoint As ScheduleAppointment = db.ScheduleAppointments.[Single](Function(A) A.Id = Convert.ToInt32(value.Id)) appoint.StartTime = startTime appoint.EndTime = endTime appoint.Subject = value.Subject appoint.Description = value.Description appoint.AllDay = value.AllDay appoint.Recurrence = value.Recurrence appoint.RecurrenceRule = value.RecurrenceRule End If db.SubmitChanges() End Sub End Class
Step 5: Build the sample and add the WebReference to your application using the following steps,
Figure 3: Select the Add ServiceReference option
Figure 4: WebService details
Figure 5: Service Reference Settings window
Figure 6: Add Web Reference
Figure 7: WebServices details
Figure 8: Details of the created WebServices
Figure 9: Reference added
Step 6: Now include the JavaScript code and also map the field names to the Schedule control’s appointmentSettings to perform the CRUD operation.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://cdn.syncfusion.com/13.4.0.53/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link href="http://cdn.syncfusion.com/13.4.0.53/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/13.4.0.53/js/web/ej.web.all.min.js"></script>
</head>
<body>
<div id="Schedule1"></div>
<script>
var data = ej.DataManager({
url: "WebService1.asmx/GetData", // This will trigger to bind the appointments data to schedule control
batchUrl: "WebService1.asmx/Crud", // This will trigger while saving the appointment through detail window
insertUrl: "WebService1.asmx/add", // This will trigger while saving the appointment through quick window
updateUrl: "WebService1.asmx/update", //This will trigger while saving the resize or drag and drop the appointment
removeUrl: "WebService1.asmx/remove", // This will trigger to delete the single appointment
adaptor: new ej.WebMethodAdaptor()
});
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2015, 5, 15),
appointmentSettings: {
dataSource: data,
id: "Id",
subject: "Subject",
description: "Description",
startTime: "StartTime",
endTime: "EndTime",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
}
});
</script>
</body>
</html>
Step 8: Run the sample and now you can perform CRUD operations on the schedule appointments which gets reflected appropriately in the Web Services too. |
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
