asp.net webservice call in jquery

jQuery with Web Services

I will be calling asp.net web service using jQuery Ajax.

web service call using jquery

DOWNLOAD

First Create Web Services in Your Project
EmployeeService.asmx
[System.Web.Script.Services.ScriptService]

[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 EmployeeService : System.Web.Services.WebService
 {

    [WebMethod]
    public string HelloWorld()
   {
      return "Hello World";
   }
 }

Step : 2 Open "Default.aspx" and Write jQuery function to make webservice call to display simple "Hello World" message.
Call Webservice using JQuery AJAX (Without Input Parameter)

// Add latest jquery
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetEmployee() {
            var pageUrl = '<%=ResolveUrl("~/WebService/EmployeeService.asmx")%>'
            $.ajax({
                type: "POST",
                url: pageUrl + "/HelloWorld",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessCall,
                error: OnErrorCall
            });
        }


        function OnSuccessCall(response) {
            $('#outputDiv').html(response.d);
        }

        function OnErrorCall(response) {
            alert(response.status + " " + response.statusText);
        }

    </script>
 

Step 3 : Call this function on on OnClientClick evetn in asp.net button

<asp:button id="btnGetData" onclientclick="GetEmployee();return false;" runat="server" text="Get Data">
</asp:button>

Call Webservice using JQuery AJAX With Input Parameter

function GetEmployee() {
            var pageUrl = '<%=ResolveUrl("~/WebService/EmployeeService.asmx")%>'
            $.ajax({
                type: "POST",
                url: pageUrl + "/GetEmployeeDetailsWhere",
                data: "{ name: '" + $('#txtName').val() + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessCall,
                error: OnErrorCall
            });
        }


        function OnSuccessCall(response) {
            $('#outputDiv').html("");
            var table = "<table id=tblResult><thead><tr> <th>Name</th> <th>Salary</th>  </tr></thead><tbody>";
            for (var i = 0; i < response.d.length; i++) {
                var row = "<tr>";
                row += "<td>" + response.d[i].FirstName + "</td>";
                row += "<td>" + response.d[i].Salary + "</td>";
                row += "</tr>";
                table += row;
            }
            table += "</tbody></table>";
            $('#outputDiv').append(table);
        }

        function OnErrorCall(response) {
            alert(response.status + " " + response.statusText);
        }

Call Webservice using JQuery AJAX With dataFilter

function GetEmployee() {
            var pageUrl = '<%=ResolveUrl("~/WebService/EmployeeService.asmx")%>'
            $.ajax({
                type: "POST",
                url: pageUrl + "/GetEmployeeDetails",
                data: '',
                dataFilter: function (response) {
                    return response.replace("bhaumik", "bhaumik patel");
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessCall,
                error: OnErrorCall
            });
        }


        function OnSuccessCall(response) {
            $('#outputDiv').html("");
            var table = "<table id=tblResult><thead><tr> <th>Name</th> <th>Salary</th>  </tr></thead><tbody>";
            for (var i = 0; i < response.d.length; i++) {
                var row = "<tr>";
                row += "<td>" + response.d[i].FirstName + "</td>";
                row += "<td>" + response.d[i].Salary + "</td>";
                row += "</tr>";
                table += row;
            }
            table += "</tbody></table>";
            $('#outputDiv').append(table);
        }

        function OnErrorCall(response) {
            alert(response.status + " " + response.statusText);
        }