Rss Feed Like Us on facebook Google Plus

May 10, 2014

Call WebService using JQuery and HTML : Asp.Net

This article is all about Calling a WebService (asmx) in HTML Page using jquery. to call a webservice first thing to know about a webservice
  • Web services are application components
  • Web services communicate using open protocols
  • Web services are self-contained and self-describing
  • Web services can be discovered using UDDI
  • Web services can be used by other applications
  • HTTP and XML is the basis for Web services

Webservices transfers data to application in XML, JSON and Text Format as well as JSON object.

One important distinction is what I mean by a JSON object and JSON format.  A JSON object is an object that can be used by javascript
var o = {data: 'value'};
alert (o.data); // this works as o is an object
JSON format is simply a literal string that can be turned into a JSON object if we parse it
var f = "{data: 'value'}";
alert (f.data); // this won't work as f is just a string and string doesn't have a data property
EXAMPLE

WEB SERVICE
[WebMethod]
public string SayHello(string firstName, string lastName)
{
    return "Hello " + firstName + " " + lastName;
}

[WebMethod]
public string SayHelloJson(string firstName, string lastName)
{
    var data = new { Greeting = "Hello", Name = firstName + " " + lastName };

    // We are using an anonymous object above, but we could use a typed one too (SayHello class is defined below)
    // SayHello data = new SayHello { Greeting = "Hello", Name = firstName + " " + lastName };

    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

    return js.Serialize(data);
}

[WebMethod]
public SayHello SayHelloObject(string firstName, string lastName)
{
    SayHello o = new SayHello();
    o.Greeting = "Hello";
    o.Name = firstName + " " + lastName;

    return o;
}
"SayHello" returns a string "SayHelloJson" returns a string that is an object in JSON format "SayHelloObject" returns an object.  The SayHello class is here
public class SayHello
{
    public string Greeting { get; set; }
    public string Name { get; set; }
}
HTML


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello World</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div><br />Example A</div>
    <div id="searchresultsA"></div>
    <div><br />Example B</div>
    <div id="searchresultsB"></div>
    <div><br />Example C</div>
    <div id="searchresultsC"></div>
    <div><br />Example D</div>
    <div id="searchresultsD"></div>
    <div><br />Example E</div>
    <div id="searchresultsE"></div>

    <script type="text/javascript">
              // Example A - call a function that returns a string.
              // Params are sent as form-encoded, data that comes back is text
              $(document).ready(function () {
              $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: "firstName=Aidy&lastName=F", 
                dataType: "text", 
                success: function (data) {
                    $("#searchresultsA").html(data);
                }
            });

            // Example B - call a function that returns a string.
            // Params are sent in JSON format, data that comes back is JSON
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: "{firstName:'Aidy', lastName:'F'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json", 
                success: function (data) {
                    $("#searchresultsB").html(data.d);
                }
            });

            // Example C - call a function that returns a string.
            // Params are sent as a JSON object, data that comes back is text
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHello",
                data: { firstName: 'Aidy', lastName: 'F' },
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                dataType: "text",
                success: function (data) {
                    $("#searchresultsC").html(data); 
                }
            });

            // Example D - call a function that returns a string that is an object in JSON format.
            // Params are sent in JSON format, data that comes back is a string that represents an object in JSON format
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHelloJson",
                data: "{ firstName: 'Aidy', lastName: 'F' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var myData = JSON.parse(data.d); 
                    $("#searchresultsD").html(myData.Greeting + " " + myData.Name);
                }
            });

            // Example E - call a function that returns an object.  .net will serialise the object as JSON for us.
            // Params are sent in JSON format, data that comes back is a JSON object
            $.ajax({
                type: "POST",
                url: "MyWebService.asmx/SayHelloObject",
                data: "{ firstName: 'Aidy', lastName: 'F' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var myData = data.d; 
                    $("#searchresultsE").html(myData.Greeting + " " + myData.Name);
                }
            });
        });
    </script>

    </form>
</body>
</html>

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.