javascript - No se puede hacer que el panel de actualización funcione correctamente

asp.net google-maps-api-3

Question

Estoy trabajando en un sitio web usando Google maps apiv3. Tengo un botón en un panel de actualización a través del cual ejecuto algo de lógica usando el código detrás de button_click y una función javascript.

Como el botón está en el panel de actualización, no puedo ver nada en la ventana de observación de Firebug y tampoco funcionan mis puntos de interrupción en la función de JavaScript. Sin un panel de actualización, puedo ver el flujo de ejecución en observación y todo funciona bien, pero recibo una recarga en el mapa.

Código en aspx:

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute" Text="Show route" onclick="Button1_Click1"/>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
        </Triggers>
    </asp:UpdatePanel>

Button_Click1:

protected void Button1_Click1(object sender, EventArgs e)
{
    using (con = new MySqlConnection("server=localhost; uid=root;password=as64ws;database=Gmaps"))
    da = new MySqlDataAdapter("select * from routes where uid=''a1''", con);
    da.Fill(ds, "mroute");
    foreach (DataRow r in ds.Tables[0].Rows)
    {
        uroute.Add(r["latlng"].ToString());
    }
    croute = new string[uroute.Count];
    croute = uroute.ToArray();
    hdncroute.Value = string.Join("&", croute);
    ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "routes", "droute()", true);
}

Javascript:

function droute()
{
    var route=[];
    var temp;
    temp = document.getElementById(''<%= hdncroute.ClientID %>'').value;
    route= temp.split(''&'');
    //Loop to add locations and draw line
    var path= polyline.getPath();
    for(var i=0;i<route.length;i++)
        {
            var input= route[i];
            var ltln = input.split(",",2);
            var lat=parseFloat(ltln[0]);
            var lng=parseFloat(ltln[1]);
            var pos= new google.maps.LatLng(lat,lng);
            var marker= new google.maps.Marker({position:pos,map:map});
            path.push(route[i]);
            google.maps.event.addListener(marker,''click'',showiwindow);
        }
    function showiwindow(event)
    {
    iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
    iwindow.open(map,this);
    } 
}

No puedo ver los valores que se mostrarán en el mapa. ¿Debo colocar el botón en el panel de actualización o en el mapa en el panel de actualización? ¿Dónde estoy equivocado?

Answer 1

Establezca UpdateMode = "Conditional" y configure el botón como AsynPostBacktrigger. Puede ser que va a resolver el problema.

Answer 2

Eliminaría una buena porción de tu lógica que tienes.

Tendría que hacer clic en el botón hacer una publicación de jquery ajax en un servicio web en su código, lo que devolvería una matriz a su publicación de Ajax y luego en la parte de éxito de su publicación de Ajax activaría su rutina de javascript.

http://dotnetguts.blogspot.com/2012/01/jquery-ajax-examples-by-calling-aspnet.html

Lo que describí anteriormente es cómo hago casi todas mis llamadas a google maps ....... No he visto una forma más apropiada de hacer esto en las cerca de 100 páginas que he leído sobre este tema. Por favor, avíseme si necesita saber más acerca de cómo hacerlo de esta manera.

Aquí hay otra buena página que describe cómo hacer la publicación de jquery ajax. :

Código de llamada detrás del método de Jquery