Calling Web Service in HTML Page

Background

 
In my previous articles, we learned how to create and consume Web Service in a different type of applications. Now, this article explains how to call Web Service in an HTML page Using Jquery and JSON. 
 
Per-requirement to Understand this application
  • Knowledge of web Service
  • Knowledge of Jquery and JavaScript.
  • Understandability of JSON.
If you are a beginner and want to learn about Web Services then please refer to the following articles of mine:
  1. Introduction to Web Service with Example in ASP.Net
  2. Consuming Web Service In an ASP.Net Web Application
  3. Consuming Web Service In a Console Application
  4. Consuming Web Service In Windows Application
If you are a beginner and want to learn about Jquery and JavaScript. then please refer to the following articles of mine:
  1. ASP.Net Form Validation Using jQuery
  2. ASP.Net Form Validation Using JavaScript.
from the above two articles,you will learn about the Basic Introduction of JQuery and JavaScript.
 
To Learn About JSON (JavaScript Object Notation) follows MSDN. 
 
And remember, I have written this article only focusing on beginners. So let us start step-by-step so beginners can understand it very easily.
 
So let us start using a different way to add a web service using a template...
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New Project" - "C#" - "Empty Web Application" (to avoid adding a master page).
  3. Provide the web site a name such as  "CallingWebServiceInHtmlPage" or another as you wish and specify the location.
  4. Then right-click on Solution Explorer - "Add New Item" - you see  the web service templates as,
ServiceAdd.jpg
 
give the name for web service as GetDetailsService or any as you wish and then click on add
 
5.  Now right-click on Solution Explorer - "Add New Item" - you see  the HTML Page templates as,
 
html.jpg
 
give the name for HTML page  as viewDetails or any as you wish and then click on add
 
then our solution explorer will look like as
 
PageExp.jpg
 
now open the GetDetailsService class of web service and write the following method followed by [webMethod] attribute as:
  1. [WebMethod]  
  2.   
  3. public string GetCusttdet(string Custname)  
  4.   
  5. {  
  6.     return Custname;  

IMP Note:
 
When you calling any web Service through Script then you need to uncomment the following lines which are by default commented in a web service, that is
 
[System.Web.Script.Services.ScriptService]
 
now after uncommenting the above line then the web method named GetCusttdet with class GetDetailsService is look like as follows
 
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
  1. [System.Web.Script.Services.ScriptService]  
  2. public class GetDetailsService: System.Web.Services.WebService {  
  3.     [WebMethod]  
  4.     public string GetCusttdet(string Custname) {  
  5.         return Custname;  
  6.     }  

In the code above I have declared a one string method named GetCusttdet with the one-parameter Custname for accepting Customer Name from the user, and then the method returns the custname to the user.
 
now add the following JSON and Jquery code at <head> section inside the <script> tag in a HTML page as.
  1. < script type = "text/javascript" >  
  2.     $(document).ready(function () {  
  3.         var TextBox1 = $("#TextBox1");  
  4.         TextBox1.change(function (e) //calling Jquery function on Textbox change event  
  5.             {  
  6.                 var Name = TextBox1.val(); //getting the value from text box  
  7.                 if (Name != -1) {  
  8.                     Getdet(Name); //ing the Input parameter to javascript method Named Getdet from user with the help of text box by Name variable.  
  9.                 }  
  10.             });  
  11.     });  
  12.   
  13. function Getdet(Name) {  
  14.     $.ajax({  
  15.         type: "POST",  
  16.         url: "GetDetailsService.asmx/GetCustdet"// add web service Name and web service Method Name  
  17.         data: "{'Custname':'" + Name + "'}"//web Service method Parameter Name and ,user Input value which in Name Variable.  
  18.         contentType: "application/json; charset=utf-8",  
  19.         dataType: "json",  
  20.         success: function (response) {  
  21.             $("#spnGetdet").html(response.d); //getting the Response from JSON  
  22.         },  
  23.         failure: function (msg) {  
  24.             alert(msg);  
  25.         }  
  26.     });  
  27. }   
  28. </script> 
Note
  • To use jQuery  you need to add the reference for the jQuery library that is nothing but a JavaScript file
  • You can download the latest  jQuery library from http://jquery.com/download/
I hope you have followed the same steps as I have done,now run the application and Enter the Value into the text box then the service will return the output as follows.
 
outputpage.jpg 
 
From the preceding example we learned how to call web service in a Pure HTML page using JSON and JQuery, I hope you have done it.
 
Note
  • For detailed code please download the Zip file attached above.
  • Don't forget to add the JQuery library file reference.

Summary

 
We learned how to call web service in a Pure HTML page using JSON and JQuery. I hope this article is useful for all students and beginners. If you have any suggestions related to this article then please contact me.