Consume Json Web Service in ASP.Net using C# and VB.Net

Hi nauna,

I have created a sample which full fill your requirement you need to modify the code according to your need.

I have used Northwind Database Customers Table you can get Database from below link.

Install the Northwind and Pubs Sample Databases in SQL Server Express

Refer below Sample Code.

WebService.asmx

<%@ WebService Language="C#" CodeBehind="~/App_Code/WebService.cs" Class="WebService" %>

WebService.cs

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

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 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 WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string GetCustomers()
    {
        List<object> customers = new List<object>();
        string sql = "SELECT TOP 10 CustomerId,ContactName,Country FROM Customers";
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand(sql))
            {
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(new
                        {
                            CustomerId = sdr["CustomerId"],
                            ContactName = sdr["ContactName"],
                            Country = sdr["Country"]
                        });
                    }
                }
                conn.Close();
            }
            return (new JavaScriptSerializer().Serialize(customers));
        }
    }
}

HTML

<div>
    <table id="tblCustomers">
    </table>
</div>
<div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/GetCustomers",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {                        
                    $('[id*=tblCustomers]').append("<tr><th>CustomerId</th><th>ContactName</th><th>Country</th></tr>");
                    $.each($.parseJSON(r.d), function (key, value) {
                        var customerId = value.CustomerId;
                        var contactName = value.ContactName;
                        var country = value.Country;
                        $('[id*=tblCustomers]').append("<tr><td>" + customerId + "</td><td>" + contactName + "</td><td>" + country + "</td></tr>");
                    });
                },
                error: function (r) {
                    alert(r.responseText);
                },
                failure: function (r) {
                    alert(r.responseText);
                }
            });

        });
    </script>
</div>

Output