我正在使用Google地图和标记在asp.net中测试一个简单的代码,我想根据所选按钮更新标记。 我正在尝试将存储过程中的值(数据表)绑定到转发器itemtemplate并在映射中进行部分刷新,它在第一页加载(绑定)中起作用,但是新值(当按下按钮时) )完全不绑定。
UpdatePanel
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<p>
<asp:Button ID="Button1" runat="server" class="btn btn-outline btn-link" AutoPostback=true Text="1" onClick=" Button1" />
|
<asp:Button ID="Button2" runat="server" Text="2" class="btn btn-outline btn-link" AutoPostback=true OnClick =" Button_2" />
|
<asp:Button ID="Button3" runat="server" class="btn btn-outline btn-link" Text="3" AutoPostback=true onClick=" Button3" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
模板
<script type ="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Title") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
地图
window.onload = function () {
LoadMap();
};
var myLatlng;
var markerCluster;
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
CreateMarkers();
alert("markers"+JSON.stringify(markers, null, 4));
}
});
};
var latlng = new google.maps.LatLng(-25.45, -49.25);;
var opcoes = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function LoadMap() {
mapa = new google.maps.Map(document.getElementById("mapa"), opcoes);
CreateMarkers();
}
function CreateMarkers() {
var googleMarkers = [];
var infoWindow = new google.maps.InfoWindow();
markersaux = markers;
for (i = 0; i < markersaux.length; i++) {
var data = markersaux[i]
if (data.lat == null || data.lat == "" || data.lat == "undefined" || data.lat == "null") {
myLatlng = new google.maps.LatLng(-25.438 , -49.2787);
} else {
var latitude = data.lat.replace(",", ".");
var longitude = data.lng.replace(",", ".");
myLatlng = new google.maps.LatLng(latitude, longitude);
}
var marker = new google.maps.Marker({
position: myLatlng,
map: mapa,
animation: google.maps.Animation.DROP,
title: data.title
});
googleMarkers.push(marker);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("Title: " + data.title +"<br /> Latitude: " + data.lat + "<br />Longitude: " + data.lng);
infoWindow.open(mapa, marker);
});
})(marker, data);
}
隐藏代码
protected void Page_Load(object sender, EventArgs e)
{
...
DataTable dt = this.GetData(sql);
rptMarkers.DataSource = dt;
rptMarkers.DataBind();//It's binding here
if (!this.IsPostBack)
{
}
}
protected void Button1(object sender, EventArgs e)
{
DataTable dt = this.GetData(sql2);
this.rptMarkers.DataSource = dt;
this.rptMarkers.DataBind();//Value of dt here is correct, but it's not binding
this.UpdatePanel1.Update();
}