避免在 ASP.NET 中有 onClick 和 onClientClick 事件的按钮单击时重新加载页面答案

【问题标题】：Avoid page reload on Button click having onClick and onClientClick events in ASP.NET避免在 ASP.NET 中有 onClick 和 onClientClick 事件的按钮单击时重新加载页面
【发布时间】：2012-09-09 06:05:09
【问题描述】：

我有一个 Asp 服务器控制按钮，我有 onClick 用于处理后面代码中的代码，onClientClick 用于处理 javascript 代码。代码是：

更新：根据 Icarus 解决方案，更新代码：

按钮来源：

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
        style="z-index: 1; left: 648px; top: 202px; position: absolute" 
        Text="Show route" OnClientClick="droute(); return false" />

<asp:HiddenField ID="hdncroute" runat="server" />

后面的代码：

protected void Button1_Click(object sender, EventArgs e)
{
    using (con = new MySqlConnection("server=localhost; uid=root;password=as64ws;database=Gmaps"))
    da = new MySqlDataAdapter("select * from routes where uid='" + Session["uname"].ToString() + "'", 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);
}

Javascript 函数：

function droute()
{
    var route=[];
    var temp;
    temp = eval(document.getElementById('<%= hdncroute.ClientID %>').value);
    route= temp.split('&');
    //Polyline icon n line settings
    var iconsetngs= {path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW, fillColor:'#FF0000'};
    var polylineoptns= {strokeColor:'#3333FF',strokeOpacity:0.8,strokeWeight:3,map:map,icons:[{icon:iconsetngs,offset:'100%'}]};
    polyline= new google.maps.Polyline(polylineoptns);

    //Loop to add locations and draw line
    var path= polyline.getPath();
    for(var i=0;i<route.length;i++)
        {
            var marker= new google.maps.Marker({position:route[i],map:map});
            path.push(route[i]);
            google.maps.event.addListener(marker,'click',showiwindow);
        }

    //Event Listener's
    function showiwindow(event)
    {
    iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
    iwindow.open(map,this);
    }  
}

我知道为 javascript 函数编写 return false 将避免刷新，并且 onClick 具有 void 返回类型。但是我的页面仍然会在按钮单击时重新加载。

【问题讨论】：

标签： javascript asp.net google-maps-api-3 code-behind page-refresh

【解决方案1】：

这里有一个错误：

route = document.getElementById('<%= croute %>').value;

应该是：

route = document.getElementById('<%= croute.ClientID %>').value;

更新：

标记 - 在页面中声明一个隐藏元素

<asp:hiddenfield id="hdnCroute" runat="server" />

//code behind

int [] croute = ... 

hdnCroute.Value = "["+string.Join(",",croute)+"]";

现在Javascipt：

//now you have an array back in javascript 
var route= eval(document.getElementById('<%= hdnCroute.ClientID %>').value);

【讨论】：

我试过了。我收到一条错误消息：'System.Array' does not contain a definition for 'ClientID' and no extension method 'ClientID' accepting a first argument of type 'System.Array' could be found (are you missing a using directive or an assembly reference?)
那么croute是什么元素呢？ croute 不是服务器控件吗？如果不是，你为什么要<%= croute %>？
没有。 croute 是在页面范围内的代码中声明的数组。 public string[] croute;
对不起，我是 javascript 的菜鸟。是否只有服务器控件需要语法才能在 javascript 中访问？那么如何访问这个数组呢？
你不能那样做。您需要以文本格式放置数组的元素（以某种方式连接它们）。然后使用隐藏元素，将其值设置为从数组生成的文本，然后按照我向您展示的方式读取 javascript 上的值。我将为您提供一个示例。坐稳。

【解决方案2】：

为什么页面会重新加载？

OnClientClick="droute(); return false"

在这样的浏览器内部：

button.onclick = function(){
    droute(); 
    return false
};

当 droute 出错时，return false 不起作用。

【讨论】：

我不明白你。我在哪里写 button.onclick... 在按钮源？它应该是 onClientClick 正确的，因为它是一个 javascript 函数？还有为什么 route = document.getElementById('').value; ？ route 应该读取后面的代码数组。 o_O