jQuery Ajax Example - Call Webservice using JQuery AJax (With Multiple Input)

In this article, i will be calling asp.net web service using jQuery Ajax with Multiple Input parameter.

If you are new to jQuery and don't know anything about it, I will recommend you to first read following article before reading any further.

• JQuery Basics
• Play with JQuery Live Example and make yourself comfortable
• JQuery Ajax Simple Example

In this article we will take input name and location and display greeting message. I will be also adding small delay to create Ajaxify effect.  Check out Live Demo

Step 1: Create Asp.net Web Application

Step 2: Open Site.Master and include jQuery Reference by adding below line just before </head> tag.
<!--Include JQuery File-->
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>




Step 3: Open "Default.aspx" and add following code
I have added here h2 title tag, asp.net button, textbox and label.  Please note, that i have declared OnClientClick, I will be calling javascript function, which will internally make jQuery Ajax call to asp.net web service.

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

Step 4: Add new folder to solution named "WebService"

Step 5: Right click on "WebService" folder and click add new item, to add new web service.

Step 6: Add code to display message inside "HelloWorld.asmx.cs" file


[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;
    }
}

Important Note:  Please UnComment line
[System.Web.Script.Services.ScriptService]
In order to allow this Web Service to be called from script, using ASP.NET AJAX



Step 7:  Open "Default.aspx" and Write jQuery function to make webservice call to display greeting message.


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

In above code before calling webservice i have assign "Please wait..." to output label.


Understanding jQuery Ajax call parameter

• http://dotnetguts.blogspot.com/2012/01/jquery-ajax-examples-by-calling-aspnet.html

Now, run the web application and input your name and hit button to see greeting message.

You might notice that code will cause small delay, it will show "Please wait..." message while it is causing delay.

Check out Live Demo of Calling Webservice using JQuery Ajax Example

More JQuery Tutorials