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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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

Figure 2: WebService1.asmx.cs file

  1. 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

 

  1. Click Discover to get the created WebServices details.

Figure 4: WebService details

 

  1. 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

 

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

 

Figure 6: Add Web Reference

 

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

Figure 7: WebServices details

 

  1. 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

 

  1. 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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6208 02/03/2016 02/18/2016 JavaScript ejSchedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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