Home / ASP.NET Wiki / Javascript / AJAX / JSON / JSON ASP.NET Web Services with jQuery

JSON ASP.NET Web Services with jQuery

 Rate It (18)

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

using System.Collections.Generic;

using System.Linq;

 

public class Employee

{

    public string firstname;

    public string lastname;

    public int age;

    
}

 

/// <summary>

/// Summary description for Employeeservice

/// </summary>

 

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 

[ScriptService]

public class Employeeservice : WebService

{

 

    List<Employee> Employees = new List<Employee>{

    new Employee{firstname="Aamir",lastname="Hasan",age=20},
    new Employee{firstname="awais",lastname="Hasan",age=50},
    new Employee{firstname="Bill",lastname="Hasan",age=70},
    new Employee{firstname="sobia",lastname="khan",age=80},


 
    };

 

    [WebMethod]

    public List<Employee> GetAllEmployees()

    {

        return Employees;

    }

 

 

    [WebMethod]

    public List<Employee> GetEmployeesByDoors(int doors)

    {

        var query = from c in Employees

                    where c.Doors == doors

                    select c;

        return query.ToList();

    }

}



<form id="form1" runat="server">

<input type="button" id="Button1" value="Get Employees" />

<div id="output"></div>

</form>

 

All that's needed now is some Javascript for the getEmployees() method that has been assigned to the onclick event of the html button. This will go into the <head> section of the page:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

 

  $(function() {

    $('#Button1').click(getEmployees);

  });

 

  function getEmployees() {

    $.ajax({

      type: "POST",

      url: "Employeeservice.asmx/GetAllEmployees",

      data: "{}",

      contentType: "application/json; charset=utf-8",

      dataType: "json",

      success: function(response) {

        var Employees = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#output').empty();

        for (var i = 0; i < Employees.length; i++) {

          $('#output').append('<p><strong>' + Employees[i].lastname + ' ' +

                                Employees[i].firstname + '</strong><br /> Age: ' +

                                Employees[i].age + '<br />Doors: ' +

                              

                                 '</p>');

        }

      },

      failure: function(msg) {

        $('#output').text(msg);

      }

    });

  }

</script>

 

Revision number 1, Sunday, December 27, 2009 2:32:45 PM by Aamir Hasan

Comments

Brief description can help better.

what's json???

please write some detail description for your code, eg: how this query came and why it is not like sql query: var query = from c in Employees where c.Doors == doors select c; return query.ToList();

Please explain your code

good one

i think it is using linq and javascript technologies. Maybe it would be friend of network traffic. Is it right?

var Employees = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; under what scenario response.d will not return STRING

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. abiruban (1)