Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Handling json arrays returned from web services with jquery

Suggested Videos
Part 60 - jquery ajax method
Part 61 - Calling web services using jquery ajax
Part 62 - Handling json data returned from web services

In this video we will discuss how to handle JSON arrays returned from web service using jQuery.

When we click Get All Employees button, we want to retrieve all the Employees from the database table and display on the page using jQuery.
Handling json arrays returned from web services with jquery

This is continuation to Part 62, please watch Part 62 before proceeding.

Step 1 : Copy and paste the following code in EmployeeService.asmx.cs

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

namespace Demo
    [WebService(Namespace = "")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class EmployeeService : System.Web.Services.WebService
        public void GetAllEmployees()
            List<Employee> listEmployees = new List<Employee>();

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
                SqlCommand cmd = new SqlCommand("Select * from tblEmployee", con);
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                    Employee employee = new Employee();
                    employee.ID = Convert.ToInt32(rdr["Id"]);
                    employee.Name = rdr["Name"].ToString();
                    employee.Gender = rdr["Gender"].ToString();
                    employee.Salary = Convert.ToInt32(rdr["Salary"]);

            JavaScriptSerializer js = new JavaScriptSerializer();

Step 2 : Copy and paste the following HTML and jQuery code in HtmlPage1.html

    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnGetAllEmployees').click(function () {
                    url: 'EmployeeService.asmx/GetAllEmployees',
                    dataType: "json",
                    method: 'post',
                    success: function (data) {
                        var employeeTable = $('#tblEmployee tbody');

                        $(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) {
<body style="font-family:Arial">
    <input type="button" id="btnGetAllEmployees" value="Get All Employees" />
    <br /><br />
    <table id="tblEmployee" border="1" style="border-collapse:collapse">

jQuery tutorial for beginners


  1. Sir Could you please upload a video how we can insert the Json Arry into sql Server table Using webservice

  2. i think we can use sql bulk copy class by the right answer i could not found on internet


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.