Shalvin Interests

Tuesday, March 29, 2016

JQuery Ajax and Json Array


using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.Script.Serialization;

[WebMethod]
    public void GetEmployees()
    {
        List<Employee> glEmployee = new List<Employee>();
        SqlConnection cnn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=AjaxDb;Integrated Security=True");
        cnn.Open();
        SqlCommand cmd = new SqlCommand("select * from tblEmployee", cnn);
        SqlDataReader dr = cmd.ExecuteReader();
        while( dr.Read())
        {
            int intEmpId = Int32.Parse(dr["Id"].ToString());
            int intSalary = Int32.Parse(dr["Salary"].ToString());
            Employee emp = new Employee
            {
                Id = intEmpId,
                Name = dr["Name"].ToString(),
                Gender = dr["Gender"].ToString(),
                Salary = intSalary
            };
        glEmployee.Add(emp);

        }
      
        JavaScriptSerializer jsc = new JavaScriptSerializer();
        Context.Response.Write(jsc.Serialize(glEmployee));
    }



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.12.1.js"></script>
    <script>
    $(document).ready(function () {
        getData()
    });
  
    function getData()
    {
        $.ajax({
            url: 'WebService.asmx/GetEmployees',
            dataType: "json",
            method: 'post',
            success: function (data) {
                var employeeTable = $('#tblEmployee tbody');
                employeeTable.empty();

                $(data).each(function (index, emp) {
                    employeeTable.append('<tr><td>' + emp.Id + '</td><td>'
                        + emp.Name + '</td><td>' + emp.Gender
                        + '</td><td>' + emp.Salary + '</td></tr>');
                });
            },
            error: function (err) {
                alert(err);
            }
        });
    }
    </script>
</head>
<body>
    <table id="tblEmployee" border="1" style="border-collapse:collapse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

No comments:

Post a Comment