Friday, January 20, 2012

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

In this article, i will be calling asp.net web service using jQuery Ajax with 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.


In this article we will take input name and display greeting message. 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 2: Call Webservice using JQuery AJax (With Input)</h2>
<asp:TextBox ID="txtName" runat="server" Text="Enter your name"></asp:TextBox>
<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)
    {
        return "Welcome " + NameInfo + " to the world of JQuery AJax";
    }
}

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")%>'


        $.ajax({
            type: "POST",
            url: pageUrl + "/DisplayMessage",
            data: "{'NameInfo':'" + $('#<%=txtName.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>

Understanding jQuery Ajax call parameter

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


Check out Live Demo of Calling Webservice using JQuery Ajax Example

More JQuery Tutorials

2 comments:

Unknown said...

I am trying this example but it is giving me this error in default.asmx page. can you please help me? The error is :
"Microsoft JScript runtime error: '$' is undefined" I appreciate your help.

DotNetGuts said...

@Dignesha, Could you please provide me more information. Error which you are getting is very general in nature. What my suggestion is look through your code one more time, I am sure there should be some minor mistake in your javascript code which is causing this.

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape