Calling Web Services from HTML Pages using JavaScript in Visual Studio 2010

Steps

  • Go to New Project
  • Select Language Visual C#
  • Select Web
  • Select ASP .NET Empty Web Application
  • Give a proper Name to your Web App like WSFromHTMLusingJS

Now Add a HTML File to the Project.

For this, Right-click on the Project, choose Add a New Item, and choose the HTML template.

Name this like  AddNumbersForm.html

This is a simple HTML Form taking three Numbers as input parameters

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Add Three Nos</title>

    <script type="text/javascript">

        function Init() {
            service.useService("WebService1.asmx?wsdl", "MyMath");      
        }

        var num1, num2, num3;

        function AddNos() {
            num1 = document.additionForm.num1.value;
            num2 = document.additionForm.num2.value;
            num3 = document.additionForm.num3.value;
            iCallID = service.MyMath.callService("AddThreeNos", num1, num2, num3);
        }

        function ShowResult() {
            alert(event.result.value);
        }
    </script>
</head>



 <body onload="Init()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()">


<form name='additionForm'>

<table  cellpadding='10' align='center'>

<tr>
<td colspan="2" align="center">Add Three Numbers</td>
</tr>

<tr>
<td>Number 1: </td>

<td><input type="text" name ="num1" size="10" maxlength ="5" /> </td>

</tr>

<tr>
<td>Number 2: </td>

<td><input type="text" name ="num2" size="10" maxlength ="5" /></td>

</tr>

<tr>
<td>Number 3: </td>

<td><input type="text" name ="num3" size="10" maxlength ="5" /></td>

</tr>


<tr> <td colspan="2" align="center"><br/><br/>

<button onclick="AddNos()">Add</button>

<input type="reset" value ="Reset" />

</td></tr>

</table><br/><br/>


</form>

</body>
</html>

Now Add a Web Service to the Project

For this, Right-click on the Project, choose Add a New Item, and choose the Web Service template.

Name this WebServiceTest.asmx

When you create the web service by default you get a web method called Hello World.

Put this code below that and run your web service

[WebMethod]
        public int AddThreeNos(int num1, int num2, int num3)
        {
            return num1 + num2 + num3;
        }

Here to keep things simple we have created a very simple Web Service that returns the sum of three integer variables.

For calling webservices in HTML using JavaScript you need another file called webservice.htc
You can download this file from here.

webservice.htc

Web Service Behavior can be used to call remote methods from Web Services. The WebService behavior is implemented with an HTML Component (HTC) file as an attached behavior, so it can be used in Microsoft Internet Explorer 5 and later versions.

Download this file and put it in your Project Directory.

Run the project. You are done now. Congrats for Calling a WebService from an HTML Page using JavaScript.

Snapshot of the o/p

Addition No Form

Result from WebService

P.S-Try this only in Internet Explorer. You may not get the desired results in other browsers.

Advertisements

7 thoughts on “Calling Web Services from HTML Pages using JavaScript in Visual Studio 2010

  1. hi i tried this, but it will not work. when i click add button it will not throw output rather the textboxes getting clear. plz help me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s