Skip to main content
Email Password   helpLost your password?

Sample Image - CallWebServiceFromHtml.jpg

Introduction

Hello everyone. In this article i wanted to show you, 'how to call a web service and pass parameters to its methods through html pages'. I hope it will be useful.

For this article we need to create a web service and a web site. Assume that our web service includes these methods...
[WebMethod] public string HelloWorld() { return "Hello World"; } //This method takes your birth year, month and day, //calculates your age and return the year. [WebMethod] public string GetAge(int year, int month, int day) { DateTime birthDate = new DateTime(year, month, day); long age = new DateTime(DateTime.Now.Ticks - birthDate.Ticks).Year - 1; return "You are " + age.ToString() + " years old."; } //This method caches the datetime for 4 seconds. //also a simple cache implementation. private const int CacheTime = 4; // seconds [WebMethod(CacheDuration = CacheTime, Description = "As simple as it gets - the ubiquitous Get Date Time.")] public string GetDateTime() { return DateTime.Now.ToString(); }

Html pages that call this web service


Your web page directory should include the 'webservice.htc' file. This file adds a behavior to html files for calling web services. You can find this file in the *.zip file you will download. I create 3 web pages for this solution;
Note : please don't forget to change port number for web service access in your html pages
   1. HelloWorld.htm (calls Hello World Method)
<html> <head> <title>Hello World</title> <script language="JavaScript"> var iCallID; function InitializeService(){ service.useService("http://localhost:1394/MyWebService.asmx?wsdl", "HelloWorldService"); service.HelloWorldService.callService("HelloWorld"); } function ShowResult(){ alert(event.result.value); } </script> </head> <body onload="InitializeService()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()"> </body> </html>    2. GetAge.htm (calls GetAge method, takes 3 parameters)
<html> <head> <title>UseSwap</title> <script language="JavaScript"> function InitializeService(){ service.useService("http://localhost:1394/MyWebService.asmx?wsdl", "GetAgeService"); } var StrYear, StrMonth, StrDay; function GetAge(){ StrYear = document.DemoForm.StringYear.value; StrMonth = document.DemoForm.StringMonth.value; StrDay = document.DemoForm.StringDay.value; service.GetAgeService.callService("GetAge", StrYear, StrMonth, StrDay); } function ShowResult(){ alert(event.result.value); } </script> </head> <body onload="InitializeService()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()"> <form name="DemoForm"> Year : <input type="text" name="StringYear"/>
Month : <input type="text" name="StringMonth"/>
Day : <input type="text" name="StringDay"/>
<button onclick="GetAge()">Get Age</button>
</form> </body> </html>
   3. GetDateTime.htm (returns cached value)
<html> <head> <meta http-equiv="refresh" content="2" /> <title>Get Date Time</title> <script language="JavaScript"> var iCallID; function InitializeService(){ service.useService("http://localhost:1394/MyWebService.asmx?wsdl", "GetDateTimeService"); service.GetDateTimeService.callService("GetDateTime"); } function ShowResult(){ alert(event.result.value); } </script> </head> <body onload="InitializeService()" id="service" style="behavior:url(webservice.htc)" onresult="ShowResult()"> </body> </html>

As listed above there are some javascript code written. But so easy to understand. First we add html page a behavior to access web service, then we make initialization and call the web service metod. Soon we get the result by event.result.value. That's all.
You can just copy and paste this code into your html pages and it works. Try the source code if you want. I hope it will be useful. Bye for now;)
You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralMy vote of 2 Pin
Norm .net
22:53 27 Oct '09  
GeneralUndefined Pin
PiyushHanda
22:17 30 Sep '09  
GeneralMy vote of 2 Pin
rajuxxx
22:53 16 Apr '09  
GeneralHi everyone.I think my next article will solve your problems. Pin
Gökmen BULUT
1:21 12 Feb '09  
GeneralRe: Hi everyone.I think my next article will solve your problems. Pin
Velmurugan Arjunan
21:36 6 Apr '09  
GeneralHow can i run this in Firefox? Pin
justindhas
0:21 12 Oct '07  
GeneralRe: How can i run this in Firefox? Pin
sebas.naveen
2:20 15 Nov '07  
GeneralRe: How can i run this in Firefox? Pin
sandy_sam
20:59 28 Nov '07  
GeneralRe: How can i run this in Firefox? Pin
danYYac
22:52 28 Jan '09  
GeneralRe: How can i run this in Firefox? Pin
Talal Sultan
3:48 11 Feb '09  
General'event.result.value' is null ot not an object Pin
pargath ranan
2:23 8 Feb '07  
GeneralHow to pass user name & password ?? Pin
nssidhu
6:46 6 Nov '06  
Questionservice? Pin
codePimp
11:12 12 Sep '06  
AnswerRe: service? Pin
jayarao
5:57 28 Oct '06  
GeneralRe: service? Pin
tim.s.bell
10:44 14 Jun '07  
GeneralRe: service? Pin
Patrik Lindström
7:18 30 Jul '08  
AnswerRe: service? Pin
danYYac
22:53 28 Jan '09  
Generaluse Atlas Pin
Herre Kuijpers
5:32 6 Jul '06  
GeneralZip file is empty Pin
Alan Lemming
4:20 29 Jun '06  
GeneralRe: Zip file is empty Pin
Gökmen BULUT
7:49 29 Jun '06  


Last Updated 29 Jun 2006 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009