Read multiple row on Ajax Success using jQuery in ASP.Net

Last Reply one month ago By Andrea

Posted one month ago

 How to read multiple row using Ajax 

    <System.Web.Services.WebMethod()>
    Public Shared Function getpessanger() As String
        Dim employeelist As List(Of Details) = New List(Of Details)()
        Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ToString)
        con.Open()
        Dim cmd As SqlCommand = New SqlCommand
        cmd.Connection = con
        cmd.Parameters.Clear()
        cmd.CommandText = "select slat,slng,elat,elng,id from dbtable"
        Dim rdr As SqlDataReader = cmd.ExecuteReader
        Dim str = ""
        Dim employee As Details = New Details()
        While rdr.Read()

            employee.slat = rdr("slat").ToString()
            employee.slng = rdr("slng").ToString()
            employee.elat = rdr("elat").ToString()
            employee.elng = rdr("elng").ToString()
            employee.id = rdr("id").ToString()
        End While
        rdr.Close()
        con.Close()
        Return (New JavaScriptSerializer().Serialize(employeelist))
    End Function

 

function getPassengers() {
    passengerData = [];
    $.ajax({
    url: "/v2/passenger.aspx/getpessanger",
    type: 'POST',
    dataType: "json",
    contentType: "application/json; charset=utf-8",
        success: function (data) {
        $(data).each(function (index, p) { 
            passengerData.push({                        
                id:p.id,
                orig:{lat:parseFloat(p.slat), lng:parseFloat(p.slng)},
                dest:{lat:parseFloat(p.elat), lng:parseFloat(p.elng)}                               
            })  
        }); 
    },
        error: function (result) {
            alert(result.responseText);
        }
});   //end of ajax
         
// OPTIONAL IF YOU WANT TO DISPLAY PASSENGERS ON MAP
    if(1==1){
        var bounds = new google.maps.LatLngBounds();
        for(p of passengerData){
            p.omarker = new google.maps.Marker({position: p.orig,map: map});
            p.dmarker = new google.maps.Marker({position: p.dest,map: map});
            p.ocircle = new google.maps.Circle({center: p.orig,radius:margin,map: map,
            strokeWeight: 0, fillColor: 'blue', fillOpacity: 0.35});
            p.dcircle = new google.maps.Circle({center: p.dest,radius:margin,map: map,
            strokeWeight: 0, fillColor: 'red', fillOpacity: 0.35});
            bounds.extend(p.orig);
            bounds.extend(p.dest);
        }
        if(passengerData.length) map.fitBounds(bounds);
    }
}

 

You are viewing reply posted by: Andrea one month ago.
Posted one month ago
Hi @Nishu,
Please try the following

Pass multiple GridView Row data to WebMethod and save to database using jQuery AJAX

It might help you.

Cheers Andrea.