Consuming WCF Service Using JavaScript

Introduction

I was recently working on a project in which I needed to call the WCF Service using JavaScript in an ASP.NET web application. So, I created a sample application in which we'll see how to access the service using JavaScript.

Overview

In this article, we'll use the following sections:

• Creating and Working with a WCF Service
• Creating an ASP.NET Web Application
• Consuming the Service
• Running the application

So, let's begin the procedure in which I need to insert the data to the database table and for that we'll create the service and consume it to the another application.

Creating and Working with WCF Service

In this section we'll create the WCF Service Library with the following procedure.

Step 1: Open Visual Studio and create the WCF Service Library named DataServices.

Step 2: Now we'll create the operation contract in the interface as in the following:

using System.ServiceModel;

namespace DataServices
{
    [ServiceContract]
    public interface IDataService
    {
        [OperationContract]
        string InsertData(string Name, string Email, string Message);
    }
}

In the code above, the string type of InsertData() is created with three parameters.

Step 3: Now we'll create the class with the following code:

using System;
using System.Data;
using System.Data.SqlClient;

namespace DataServices
{
    public class DataService : IDataService
    {
        public string InsertData(string Name, String Email, string Message)
        {
            SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog="DataBase Name";User ID="User Name";Password="Password"");
            SqlCommand cmd = new SqlCommand("SP_InsertProc", con);
            cmd.CommandType = CommandType.StoredProcedure;

            cmd.Parameters.AddWithValue("@name", Name);
            cmd.Parameters.AddWithValue("@email", Email);
            cmd.Parameters.AddWithValue("@message", Message);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            return "Success";
        }
    }
}

 In the code above, I've simply created the function with which we can insert the record into the database.

Step 4: Open your App.Config file and modify the code from the highlighted code below: 

<service name="DataServices.DataService" behaviorConfiguration="DataServiceBehavior">

 <endpoint address="" binding="basicHttpBinding" contract="DataServices.IDataService">  

and

 <behavior name="DataServiceBehavior">  

There is no need to change the rest of the text. The rest is configured automatically.

Creating ASP.NET Web Application

Now we'll add another project and in which we'll create an ASP.NET Web Application. So . let's begin with the following procedure.

Step 1: Right-click on the Solution and add a new project.

Step 2: Select an ASP.NET Web Application and enter the name as WcfDataApplication.

Step 3: Select the Empty Project Template from the One ASP.NET Wizard.

Step 4: Now add a text file in the application and save it as "WcfDataService.svc".

It is good to add the Ajax-enabled WCF Service, but it creates its own operation contract. So, I want to resemble the situation in which I can re-use an existing operation contract implemented in a separate service library.

Step 5: Copy the following code into the svc file: 

<%@ServiceHost language="C#" debug="true"
Service="DataServices.DataService"
Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"%>

Step 6: Now select the Service and click on the Show all files icon and copy all files from the Debug folder as shown below:

Step 7: Paste all files into the application Debug folder.

Step 8: Right-click on the WcfDataService.svc file and show it in the browser.

Step 9: Now just change the URL as http://localhost:1234/WcfDataService.svc/jsdebug. This will show the JavaScript as in the following:

Note: Please note that if you open this in Firefox, it'll display directly as shown in the preceding screenshot. Internet Explorer does not show it for security reasons. It'll ask you to save it.

Step 10: Now add a Web Form to the application and add the following code:

<body>
    <form id="form1" runat="server">
        <div>
            <table style="height: 170px; width: 295px">
                <tr>
                    <td>Name:</td>
                    <td>
                        <input type="text" id="TxtName" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" id="TxtEmail" /></td>
                </tr>
                <tr>
                    <td>Message:</td>
                    <td>
                        <input type="text" id="TxtMessage" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="BtnSendDetails" value="Submit" onclick="CallDataService()" /></td>
                    <td>
                        <label id="LblMessage"></label>
                    </td>
                </tr>
            </table>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Services>
                    <asp:ServiceReference Path="~/WcfDataService.svc" />
                </Services>
            </asp:ScriptManager>
        </div>
    </form>
</body>

 In the code above, I've added the content in a table and added a ScriptManager. In the ScriptManager, the path of the Service Reference is the WxfDataService.svc file.

Consuming the WCF Service

In this section, we'll create the scripting code to consume the service in the web form page. Proceed with the following structure:

Step 1: Open the Service.svc file in the browser and copy the object name as in the following:

Using this object you can do something to the function of the service.

Step 2: In the web form, edit the head section with the following code:

<head runat="server">
    <title>Data Application</title>
    <script type="text/javascript">
        function CallDataService() {
            var UserName = document.getElementById("TxtName").value;
            var UserEmail = document.getElementById("TxtEmail").value;
            var UserMessage = document.getElementById("TxtMessage").value;
            tempuri.org.IDataService.InsertData(UserName, UserEmail, UserMessage, ShowMessage, null, null);
        }

        function ShowMessage() {
            LblMessage.innerHTML = "Data Inserted Successfully";
        }
    </script>
</head>

 In the code above, there are two methods defined. The first method accepts all the values from the control and the values are passed to the service method to further process and call the next method. The next method just displays the text.

Run the Application

Now we'll run the web form. Enter the values.

After clicking on the Submit button, the data is inserted to the database as in the following:

Summary

This article described how to create the WCF Service and access the service in the web application using JavaScript. Thanks for reading. Happy Coding.