How to perform CRUD operation on JS Scheduler using Web Service?

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

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

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:

1. Create a web service by selecting the new item in the solution.

Figure 1: Creation of the webservice

2. The WebService1.asmx.cs file opens with the details as shown in the screenshot.

Figure 2: WebService1.asmx.cs file

3. Now, add the CRUD operation code to this page.

WebService1.aspx.vb

Step 5: Build the sample and add the WebReference to your application using the following steps,

1. Right-click Reference and select the Add ServiceReference option as shown in the following screenshot.

Figure 3: Select the Add ServiceReference option

2. Click Discover to get the created WebServices details.

Figure 4: WebService details

3. Click the Advanced button so that the Service Reference Settings window opens. Select Add Web Reference in that window.

Figure 5: Service Reference Settings window

4. The Add Web Reference dialog opens as shown in the following screenshot.

Figure 6: Add Web Reference

5. Select the Web Services in this solution option from the three options, and the available WebServices details are displayed.

Figure 7: WebServices details

6. Select the WebService (Ex: WebService1) link and it displays the details of the created WebServices with the web reference name. For example, localhost is displayed here.

Figure 8: Details of the created WebServices

7. Click the Add Reference button and the reference is successfully added to your application.

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.

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.

Sample Links:

C#:

http://www.syncfusion.com/downloads/support/directtrac/141631/ze/JS_Schedule_CRUD_with_Web_Service-786210131

VB: http://www.syncfusion.com/downloads/support/directtrac/141631/ze/JS_CRUD(VB)_with_Web_Service-81506973