To make a WCF service AJAX-enabled, we can use the WebServiceHostFactory class in ServiceHost directive of the .svc file or else create an ajax endpoint with WebHttpBinding and configure it accordingly.
In VS.NET, creating AJAX-enabled WCF Service is really made easy by providing a separate template for the purpose. When we use this template VS.NET takes care of configuring the right endpoints and behaviours. It creates a new system.serviceModel tag in web.config for this purpose. Moreover, all the parameters and results are serialized in JSON format when this template is used.
In this demo we create an Ajax-enabled WCF service and consume it from ASP.NET AJAX.
Then Enter Data into table as follows:
1. Start a website normally and create the forms and databases as required.
Here we design a form with a html texbox and button to input the Player name. The results will be displayed in the provided label and image html controls.
The form looks as given below:
2. For our service we’ll use EDM for accessing data from SQL Database. We have a database called Countries from which we need to get details from Images table. To create an Entity Data Model right click the project in Solution Explorer and select Add New Item ADO.NET Entity Data Model and give name as CountriesModel. Then select Generate from Database option and choose the required database. In the final step choose the tables you want the data from. In
our demo we have selected Images from Countries database. This step will create an object of our table in the program. The advantage of usingentities here is that they are automatically serialized and there is no need of using [DataContract] attribute for them.
3. Now we’ll create a WCF service which retrieves the data and provides to the clients. For this again from Add New Item, choose AJAX-enabled WCF Service and name it as CountriesService.
This step will create a .svc file which is needed for our service get hosted in IIS. It will also create endpoints for the service with WebHttpBinding and its behaviours. This can be seen in web.config file as follows:
4. Along with .svc file, by default a .cs file with the same is created in App_Code folder to write the code. In this file we write methods necessary to get data from the Entities.
Whatever methods need to be exposed to the client should be decorated with [OperationContract] attributes.
We write the following method in our service:
This method gets the details of a given country from the created entities and returns in the form of a list.
5. For consuming, write the following code in the page source:
Now let’s try to understand this script. For this we should know what controls are placed in the form. Removing table formatting, the source view of the controls is shown below:
When the button is clicked the code in function Btn_Click() is executed. The WCF service is called in that function. To call a service, a ScriptManager is needed which creates the needed proxy to interact with the service. The Service Reference should be provided in ScriptManager as follows:
Country.value is the parameter i.e. country name that we are passing to the method. Success and failure are the parameters which represent the functions that are called respectively when the method is executed successfully or failed.
The parameter x passed in the function success(x) is the result obtained from the method GetDetails(). This result is assigned to relevant controls in this function. When the method fails to execute properly, the function failure() is called.
The final result is as shown in the screenshot below: