无法使更新面板正常工作答案

【问题标题】：Unable to get Update panel working right无法使更新面板正常工作
【发布时间】：2012-09-03 06:55:03
【问题描述】：

我正在使用 Google maps apiv3 开发一个网站。我在更新面板中有一个按钮，通过它我使用 button_click 后面的代码和 javascript 函数执行一些逻辑。

由于按钮位于更新面板中，我无法在 firebug 的监视窗口中看到任何内容，并且我在 javascript 函数中的断点也不起作用。如果没有更新面板，我可以在手表中看到执行流程，一切正常，但我在地图上重新加载。

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);
    } 
}

我无法获取要在地图上显示的值。 我应该将按钮放在更新面板中还是将地图放在更新面板中？我哪里出错了？

【问题讨论】：

这个问题与谷歌地图无关。
与此问题相关的大多数答案都类似于使用更新面板，因为他们的问题不是在重新加载时丢失表单数据的其余部分。但就我而言，我应该避免重新加载地图本身，因为我丢失了上面的数据。听起来很明智吧？
你为什么使用 ASP/Mysql?? PHP/Mysql 更适合许多使用 Ajax 或 JQuery 的 Map 示例
我对 Asp 的理解比对 php 的理解要好，我是菜鸟。并且 Asp 可以很好地使用，只是在这种情况下我需要使用 ajax。试图学习它。对这个问题有什么建议吗？

标签： javascript asp.net google-maps-api-3 updatepanel reload

【解决方案1】：

我会废弃你的大部分逻辑。

我会让按钮单击在您的代码隐藏中向 Web 服务发送一个 jquery ajax 帖子，这会将一个数组返回给您的 ajax 帖子，然后在您的 ajax 帖子的成功部分中，我会触发您的 javascript 例程。

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

我上面描述的是我如何进行几乎所有的谷歌地图调用.......在我读过的近 100 页中，我还没有看到更合适的方法来执行此操作主题。如果您需要了解有关如何以这种方式执行此操作的更多信息，请告诉我。

这是另一个很好的页面，描述了如何进行 jquery ajax 发布。：

Call code behind method from Jquery

【讨论】：

【解决方案2】：

设置 UpdateMode="Conditional" 并将 Button 设置为 AsynPostBacktrigger。可能会解决问题。

【讨论】：