This article explains about the Ajax Enabled WCF service which creates an Ajax Enabled WCF service. Visual Studio provides by default a template for that. So let us learn step-by-step about the Ajax Enabled WCF service so beginners also can understand.
Requirements to understand this tutorial
If you are a beginner and need to understand what a WCF service is, refer to the following article of mine:
- Introduction to WCF Service
- Creating WCF Service
- Endpoints in WCF Service
- Contracts in WCF Service
- Bindings in WCF Service
Windows Communication Foundation (WCF)
WCF is a library for applications of various platforms or the same platform to communicate over the various protocols such as TCP, HTTP, HTTPS and so on.
Now the next requirement is for you to at least be aware of Ajax. If you are unfamiliar with Ajax then please refer to the following article of mine:
What is Ajax Enabled Services?
An Ajax Enabled Service is a template in Visual Studio that provides a configuration by default to consume a WCF service using Ajax and jQuery. So let us demonstrate this concept with a web application.
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New WebSite" - "C#" - "ASP.NET Empty Web Application" (to avoid adding a master page).
- Provide the web site a name such as "AjaxEnabledWCFServiceApplication" or another as you wish and specify the location.
- Then right-click on Solution Explorer - "Add New Item". You will see the Ajax Enabled WCF service template as same as the following image,
Now click on "Add". The Solution Explorer will then look as in the following:
Step 2Add a web page to the new web application as in the following:
- Right-click on Solution Explorer then select "Add New Item". You will see the Web Form template then click on Add.
- Now drag and drop one Input Button, a Text Box to the Default.aspx Page. Then the source code of the Default.aspx page will look as follows:
Step 3Step 4
Create a method in the Service.svc file as in the following:
After adding the preceding line, the Service class will look as follows:
Let us see the UI of the .aspx page:
In the preceding UI you saw that there is a TextBox that accepts integer type numbers and there is the Get Result HTML button that calls the jQuery function to call the WCF Method.
Refer to the jQuery library script Path file as in the following:
Now see the the Web.config file configuration as follows:
Create a jQuery function to call the service method using JSON as in the following:
In the preceding function we are passing the input value to the server method using JSON and displaying the response in an alert box. The entire source code will look as follows:
Now click F5 to run the application. Enter a number into the TextBox and click on the Get Result button, it will show the following output:
In the preceding image the output is returned from the WCF service as 1000.
- Don't forget to refer to the jQuery Script file Reference.
From all the examples above we have learned what an Ajax Enabled WCF service is and how to call a service using JSON. I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me.