Example 3: Call Webservice using JQuery AJax (With Multiple Input)

Enter your Name:
Enter Location:





Sourcode

    Default.aspx
 
<html>
<head>


<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>

<h2>Example 3: Call Webservice using JQuery AJax (With Multiple Input)</h2>
Enter your Name: <asp:TextBox ID="txtName" runat="server" Text=""></asp:TextBox><br />
Enter Location: <asp:TextBox ID="txtLocation" runat="server" Text=""></asp:TextBox><br />
<asp:Button ID="btnGetMsg" runat="server" Text="Click Me" OnClientClick="DisplayMessageCall();return false;" /><br />
<asp:Label ID="lblOutput" runat="server" Text=""></asp:Label>


<script type = "text/javascript">
    function DisplayMessageCall() {

        var pageUrl = '<%=ResolveUrl("~/WebService/HelloWorld.asmx")%>'

        $('#<%=lblOutput.ClientID%>').html('Please wait...');

        $.ajax({
            type: "POST",
            url: pageUrl + "/DisplayMessage",
            data: "{'NameInfo':'" + $('#<%=txtName.ClientID%>').val()
                    + "','Location':'" + $('#<%=txtLocation.ClientID%>').val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccessCall,
            error: OnErrorCall
        });

    }

    function OnSuccessCall(response) {
        $('#<%=lblOutput.ClientID%>').html(response.d);
    }

    function OnErrorCall(response) {
        alert(response.status + " " + response.statusText);
    }
</script>

</body>
</html>


Sourcode

    HelloWorld.asmx.cs
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace HelloWorldJQueryAjax.WebService
{
    /// <summary>
    /// Summary description for HelloWorld
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 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 HelloWorld : System.Web.Services.WebService
    {

        [WebMethod]
        public string DisplayMessage(string NameInfo, string Location)
        {
            //Creating Delay
            System.Threading.Thread.Sleep(1000);
            return "Welcome " + NameInfo + ", Your location is " + Location;
        }
    }
}
Share with your friends!!