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 a 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 article ,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:

    [WebMethod]
  
public string GetCusttdet(string Custname)
    {
 

       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.
[System.Web.Script.Services.ScriptService]

public class GetDetailsService : System.Web.Services.WebService
{
   [WebMethod]
  
public string GetCusttdet(string Custname)
    { 

       return
Custname;
     }

}

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.

 <script type="text/javascript">

        $(document).ready(function ()
        {
         
            var TextBox1 = $("#TextBox1");

            TextBox1.change(function (e) //calling Jquery function on Textbox change event
            {
                var Name = TextBox1.val(); //getting the value from text box
                if (Name != -1)
                {
                  
                    Getdet(Name);  //ing the Input parameter to javascript method Named Getdet from user with the help of text box by Name variable.
                }
              
            });

        });

    
        function Getdet(Name)
        {
            $.ajax({
                type: "POST",
                url: "GetDetailsService.asmx/GetCustdet", // add web service Name and web service Method Name
                data: "{'Custname':'" + Name + "'}" //web Service method Parameter Name and ,user Input value which in Name Variable.
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response)
                {
                
                    $("#spnGetdet").html(response.d); //getting the Response from JSON

                },
                failure: function (msg)
                {
                    alert(msg);
                }
            });
        }
    </script>


Note
  • To use jQuery  you need to add the reference for the jQuery library that is nothing but a JavaScript file
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 suggestion related to this article then please contact me.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now