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,asp.net webservice call in jquery
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);
        }
asp.net webservice call in jquery asp.net webservice call in jquery Reviewed by Bhaumik Patel on 8:08 PM Rating: 5