Post
Ask Question

Calling Web Service in HTML Page

Background

In my previous articles, we learned how to create and consume Web Services 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 

  • 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 to 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 website 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.
    Web service
  5. give the name for web service as GetDetailsService or any as you wish and then click on add
  6. Now right-click on Solution Explorer - "Add New Item" - you see the HTML Page templates as,
    New Item
  7. give the name for the HTML page as view details or any as you wish, and then click on Add.
  8. then our solution explorer will look like as.
    Solution explorer

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 call 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 looks 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 username to the user.

now add the following JSON and JQuery code at <head> section inside the <script> tag in an HTML page.

<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 which 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.

Output

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.


Similar Articles