Dataset not returning complete selection without Updatepanel on aspx page

Question

User-1952635067 posted

I have a page containing a google map and a multi-line textbox both sitting in an UpdatePanel. The user can paste in a series of Postal Codes and the Latitude and Longitude are requested from our database.

The sql is below where the Postal Codes are taken from the textbox:-

SELECT postcode, latitude,longitude FROM geocodes WHERE postcode IN ('AL7 2BQ ','B12 9BS ','B14 7QU ','B21 9SF ','B24 9PJ ','B27 7RR ','B33 0NG ','B42 1NN ','B63 4RH ','B64 5AB ','B65 0LG ','B70 9QL ','B73 5AB ','B79 7AG ','BH1 1EN ','BH1 4SX ','BH9 2HE ','BL1 8TH ','BL3 6JR ','BL4 9HF ','BL5 3YY ','BL8 2EQ ','BN2 5TB ','BN9 0AD')

A button click starts the process off calling this first passing the sql string to the GetMarkers function:-

 markers = GetMarkers(sql)
        myJS.AppendLine("<script type='text/javascript'>" + "var mapOptions = {" + "center: new google.maps.LatLng(54.236107, -4.548055999999974)," + "zoom: 6," + "mapTypeId : google.maps.MapTypeId.ROADMAP" + "};" + "var myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);" + markers + "</script>")
        Dim myScript As String = myJS.ToString
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Init", myScript, True)

Now this is passed to a loop to create the Markers in a format for Google Maps

Protected Function GetMarkers(ByVal sql As String) As String
        Dim dt As New DataTable
        Using conn As New MySqlConnection(ConfigurationManager.ConnectionStrings("ConnString").ConnectionString)
            Dim cmd As MySqlCommand = New MySqlCommand(sql, conn)
            Dim reader As MySqlDataReader = cmd.ExecuteReader()
            Dim i As Integer = 0
            While reader.Read()
                i = i + 1
                markers = markers + "var marker" + i.ToString() + "= new google.maps.Marker({" + " google.maps.LatLng( " + reader("latitude").ToString() + ", " + reader("longitude").ToString() + ")," + "map: myMap," + "title:'" + reader("postcode").ToString() + "'});"
            End While
        End Using
        Return markers
    End Function

Now The update panel is causing issues when the page is resized, I am getting some errors in the dynamic common.js file, however as a test I removed the Updatepanel from the aspx and now the reader loop only returns the last row from the SQL, in this case BN9 0AD. I have tried as a reader and also creating a Dataset and looping through that but each time only the last record is returned. I'm completely at a loss as to why the loop to create the markers requires the update panel on the aspx page.

Answer 1

User-2057865890 posted

Hi Wrighty,

By using the UpdatePanel control, you can enable a Web page to participate in partial-page updates. If you don't want to use UpdatePanel, you could use jquery ajax.

code snippets:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6YAqeEFMu0ohvdr8h2Z6jhJW17pQSeII&sensor=false"></script>

<a href="#" class="button" data-latLng="53.488188,-2.373019">Button</a>
<a href="#" class="button" data-latLng="-34.397, 150.644">Button 2</a>
<div id="map-canvas"></div>

jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
        e.preventDefault();
        var latLng = jQuery(this).attr("data-latLng");			
        initialize(latLng);
    });
    
    function initialize(latLng) {
        latLng = latLng.split(",")
        var mapOptions = {
            center: new google.maps.LatLng(latLng[0],latLng[1]),
            zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
});	

reference: http://stackoverflow.com/questions/22795702/google-maps-inside-an-update-panel 

Best Regards,

Chris