Dear SirI want consume this Webservice API JSON Data on Page Load using ajax Method in aspnet C Please help me out to consume and bind to an Datagrid or Gridview 34VehicleLocations3434VehicleNo3434DL01LY44703434Timestamp343405 Feb 2021 1418373434Speed3434213434Location3434Unnamed Road Kakarmau Uttar Pradesh 209307 India3434Latitude343426522565003434Longitude343480076333303434Status34

Hi AmitabhaCheck this example Now please take its reference and correct your codeHTMLltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript type34textjavascript34gt function ajax type 34POST34 url 34WebServiceasmxGetDetails34 data 3434 contentType 34applicationjson charsetutf834 dataType 34json34 success function r var locations JSONparserdVehicleLocations var row 34idgvVehicleLocations trlastchild34clonetrue 34idgvVehicleLocations tr34not34idgvVehicleLocations trfirstchild34remove eachlocations function 34td34 roweq0htmlthis0VehicleNo 34td34 r

Consume Web Service using jQuery Ajax and bind GridView in ASP.Net

Amitabha

SOLVED CLOSED ACTIVE ANSWERED
User: Amitabha
Posted: on Feb 05, 2021 02:03 AM
Forum: Data Controls
Answer: 1
Views: 2345
Sample Code: Download

Dear Sir

I want consume this Webservice API JSON Data on Page Load using ajax Method in asp.net C# .Please help me out to consume and bind to an Datagrid or Gridview .

{"VehicleLocations":[{"VehicleNo":"DL01LY4470","Timestamp":"05 Feb 2021 14:18:37","Speed":"21","Location":"Unnamed Road, Kakarmau, Uttar Pradesh 209307, India","Latitude":"26.52256500","Longitude":"80.07633330","Status":"Driving"},{"VehicleNo":"GJ01HT9568","Timestamp":"05 Feb 2021 14:16:59","Speed":"0","Location":"Nr AMWay Bridge,NH 8, Aslali Bypass, Aslali Check Post Circle, Aslali, Ahmedabad, Gujarat 382427, India","Latitude":"22.90845830","Longitude":"72.59438330","Status":"No Motion"},{"VehicleNo":"GJ01HT9590","Timestamp":"05 Feb 2021 12:58:49","Speed":"0","Location":"Panchkuva, Old City, Khadia, Ahmedabad, Gujarat 380001, India","Latitude":"23.02546000","Longitude":"72.59744830","Status":"Tracking unit out of order"},{"VehicleNo":"GJ01JT8071","Timestamp":"05 Feb 2021 14:17:52","Speed":"0","Location":"Grand Trunk Rd, Chamrail, Howrah, West Bengal 711114, India","Latitude":"22.64137500","Longitude":"88.30516500","Status":"No Motion"},{"VehicleNo":"GJ01JT8072","Timestamp":"05 Feb 2021 13:56:11","Speed":"0","Location":"Hanamkonda- Hyderabad Rd, Rayagiri Rural, Telangana 508116, India","Latitude":"17.54890160","Longitude":"78.95488490","Status":"No Motion"},{"VehicleNo":"GJ01JT8073","Timestamp":"05 Feb 2021 14:15:59","Speed":"50","Location":"NH 48, Rajasthan 305601, India","Latitude":"26.32068500","Longitude":"74.74505660","Status":"Driving"},{"VehicleNo":"GJ01JT8074","Timestamp":"05 Feb 2021 14:01:42","Speed":"0","Location":"Road Number 14, Vishwakarma Industrial Area, Jaipur, Rajasthan 302032, India","Latitude":"26.99613000","Longitude":"75.78736000","Status":"No Motion"},{"VehicleNo":"GJ01JT8075","Timestamp":"05 Feb 2021 14:18:44","Speed":"0","Location":"Unnamed Road, Ram Nagar Industrial Area, Dariyapur, Katariya, Uttar Pradesh 221009, India","Latitude":"25.25212660","Longitude":"83.06733830","Status":"No Motion"},{"VehicleNo":"GJ01JT8077","Timestamp":"05 Feb 2021 14:18:14","Speed":"0","Location":"Navsari Lat, Pirana Mandir Road, Gujarat, India","Latitude":"22.89926660","Longitude":"72.54277660","Status":"No Motion"},{"VehicleNo":"GJ01JT8078","Timestamp":"05 Feb 2021 14:18:47","Speed":"0","Location":"NH27, Mainatali, West Bengal 735210, India","Latitude":"26.57338330","Longitude":"88.94444830","Status":"No Motion"},{"VehicleNo":"GJ01JT8079","Timestamp":"05 Feb 2021 14:20:51","Speed":"55","Location":"GJ SH 57, Gajan, Gujarat 383316, India","Latitude":"23.47854000","Longitude":"73.30521660","Status":"Driving"},{"VehicleNo":"GJ01JT8081","Timestamp":"05 Feb 2021 14:20:50","Speed":"0","Location":"Road Number 14, Vishwakarma Industrial Area, Jaipur, Rajasthan 302032, India","Latitude":"26.99607000","Longitude":"75.78723330","Status":"No Motion"},{"VehicleNo":"GJ01JT8082","Timestamp":"05 Feb 2021 14:20:47","Speed":"0","Location":"NH19, Dharera, Uttar Pradesh 283202, India","Latitude":"27.23191830","Longitude":"78.16772160","Status":"No Motion"},{"VehicleNo":"GJ01JT8083","Timestamp":"05 Feb 2021 14:20:43","Speed":"0","Location":"Unnamed Road, Veeraiah Nagar, Arasinakunte, Karnataka 562123, India","Latitude":"13.07035000","Longitude":"77.42544000","Status":"No Motion"},{"VehicleNo":"GJ01JT8084","Timestamp":"05 Feb 2021 14:18:21","Speed":"0","Location":"Domjur - Bauria Rd, Sankharidaha Lichutala, Domjur, Howrah, West Bengal 711411, India","Latitude":"22.61124830","Longitude":"88.23044500","Status":"No Motion"},{"VehicleNo":"GJ01JT8085","Timestamp":"05 Feb 2021 14:05:04","Speed":"0","Location":"Pirana Rd, Paldi Kankaj, Gujarat 382427, India","Latitude":"22.89928500","Longitude":"72.54257660","Status":"No Motion"},{"VehicleNo":"GJ01JT8086","Timestamp":"05 Feb 2021 13:46:44","Speed":"0","Location":"Kalita Residence. House no 13., N\/A, NH27, Lalmati, Guwahati, Assam 781040, India","Latitude":"26.11263830","Longitude":"91.77024160","Status":"No Motion"},{"VehicleNo":"GJ01JT8087","Timestamp":"05 Feb 2021 14:01:12","Speed":"0","Location":"Lalanagar, NH2, Amva Mafi, Uttar Pradesh 221401, India","Latitude":"25.26819660","Longitude":"82.48571830","Status":"No Motion"},{"VehicleNo":"MH14HG0093","Timestamp":"05 Feb 2021 13:48:27","Speed":"13","Location":"NH19, Lemua, Jharkhand 825323, India","Latitude":"24.14131500","Longitude":"85.66908330","Status":"Driving"},{"VehicleNo":"MH14HG0725","Timestamp":"05 Feb 2021 14:10:42","Speed":"0","Location":"Sambalpur - Angul - Dhenkanal - Cuttack Rd, Barbank, Odisha 768106, India","Latitude":"21.07689000","Longitude":"84.28419830","Status":"No Motion"},{"VehicleNo":"MH14HG0726","Timestamp":"05 Feb 2021 14:13:17","Speed":"0","Location":"Unnamed Road, Pardsinga, Nagpur, Maharashtra 440028, India","Latitude":"21.13958160","Longitude":"78.99944160","Status":"No Motion"},{"VehicleNo":"MH14HG0821","Timestamp":"05 Feb 2021 14:13:07","Speed":"0","Location":"24, Abirami Nagar, Rayarpalayam, Meenakshi Avenue, Panapalayam, Palladam, Tamil Nadu 641664, India","Latitude":"10.99254000","Longitude":"77.29696660","Status":"No Motion"},{"VehicleNo":"MH14HG1071","Timestamp":"05 Feb 2021 14:21:02","Speed":"20","Location":"Adarsh Colony Transport Nagar Near NRL Petrol Pump Zero miles, Bypass Rd, Patna, 800026, India","Latitude":"25.58463500","Longitude":"85.18107500","Status":"Driving"},{"VehicleNo":"MH14HG1072","Timestamp":"05 Feb 2021 14:20:36","Speed":"0","Location":"Unnamed Road, Val, Bhiwandi, Maharashtra 421302, India","Latitude":"19.26107500","Longitude":"73.04149833","Status":"No Motion"},{"VehicleNo":"MH14HG1103","Timestamp":"05 Feb 2021 14:09:26","Speed":"0","Location":"Unnamed Road, Gujarat 363641, India","Latitude":"22.71911000","Longitude":"70.77336490","Status":"No Motion"}]}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Feb 05, 2021 05:01 AM
Report

Hi Amitabha,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "WebService.asmx/GetDetails",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var locations = JSON.parse(r.d).VehicleLocations;
                var row = $("[id*=gvVehicleLocations] tr:last-child").clone(true);
                $("[id*=gvVehicleLocations] tr").not($("[id*=gvVehicleLocations] tr:first-child")).remove();
                $.each(locations, function () {
                    $("td", row).eq(0).html($(this)[0].VehicleNo);
                    $("td", row).eq(1).html($(this)[0].Timestamp);
                    $("td", row).eq(2).html($(this)[0].Speed);
                    $("td", row).eq(3).html($(this)[0].Location);
                    $("td", row).eq(4).html($(this)[0].Latitude);
                    $("td", row).eq(5).html($(this)[0].Longitude);
                    $("td", row).eq(6).html($(this)[0].Status);
                    $("[id*=gvVehicleLocations]").append(row);
                    row = $("[id*=gvVehicleLocations] tr:last-child").clone(true);
                });
            }
        });
    });
</script>
<asp:GridView ID="gvVehicleLocations" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="VehicleNo" HeaderText="VehicleNo" />
        <asp:BoundField DataField="Timestamp" HeaderText="Timestamp" DataFormatString="{0:dd/MM/yyyy HH:mm:ss}" />
        <asp:BoundField DataField="Speed" HeaderText="Speed" />
        <asp:BoundField DataField="Location" HeaderText="Location" />
        <asp:BoundField DataField="Latitude" HeaderText="Latitude" />
        <asp:BoundField DataField="Longitude" HeaderText="Longitude" />
        <asp:BoundField DataField="Status" HeaderText="Status" />
    </Columns>
</asp:GridView>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("VehicleNo");
        dummy.Columns.Add("Timestamp");
        dummy.Columns.Add("Speed");
        dummy.Columns.Add("Location");
        dummy.Columns.Add("Latitude");
        dummy.Columns.Add("Longitude");
        dummy.Columns.Add("Status");
        dummy.Rows.Add();
        gvVehicleLocations.DataSource = dummy;
        gvVehicleLocations.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("VehicleNo")
        dummy.Columns.Add("Timestamp")
        dummy.Columns.Add("Speed")
        dummy.Columns.Add("Location")
        dummy.Columns.Add("Latitude")
        dummy.Columns.Add("Longitude")
        dummy.Columns.Add("Status")
        dummy.Rows.Add()
        gvVehicleLocations.DataSource = dummy
        gvVehicleLocations.DataBind()
    End If
End Sub

WebService

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string GetDetails()
    {
        return File.ReadAllText(Server.MapPath("json.json"));
    }
}

VB.Net

Imports System.IO
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

<System.Web.Script.Services.ScriptService()>
<WebService(Namespace:="http://tempuri.org/")>
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()>
Public Class WebService
    Inherits System.Web.Services.WebService
    <WebMethod()>
    Public Function GetDetails() As String
        Return File.ReadAllText(Server.MapPath("json.json"))
    End Function
End Class

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Consume Web Service using jQuery Ajax and bind GridView in ASP.Net

Company

Explore

Follow us

Contact Us