ScriptManager not updating
本文关键字:updating not ScriptManager | 更新日期: 2023-09-27 18:24:44
晚上,我试图创建一个页面,从数据库中提取位置,并将其显示在网格视图中,然后这个网格视图指示出现在谷歌地图元素上的一些点。它在启动时运行良好,但当我使用文本框来细化gridview中的项目时,地图就会消失。我猜这是我的ScriptManager的问题,但我不确定确切的原因是什么。任何想法都将不胜感激。为代码墙道歉我只是有点不确定在这个阶段什么可能是相关的。
<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapTest.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function RefreshUpdatePanel() {
__doPostBack('<%= txtSearch.ClientID %>', '');
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA5U97yznzCvzDaUZjT3AydlQqyFBQVYc8&sensor=false">
</script>
<link href="App_Themes/Default/default.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="Wrapper">
<asp:ScriptManager ID="MasterScriptManger" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upanSearch" runat="server" UpdateMode="Conditional" OnPreRender="upanSearch_PreRender">
<ContentTemplate>
<div class="DataTable">
<span>Search</span>
<asp:TextBox ID="txtSearch" runat="server" onkeyup="RefreshUpdatePanel();" onfocus="this.value = this.value;" OnTextChanged="txtSearch_TextChanged" AutoPostBack="True" AutoCompleteType="Disabled"></asp:TextBox>
<asp:GridView ID="grdLocations" runat="server" AutoGenerateColumns="False" DataSourceID="sqldsLocations">
<AlternatingRowStyle BackColor="#F6F6F6" />
<Columns>
<asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" />
<asp:BoundField DataField="Latitude" HeaderText="Latitude" SortExpression="Latitude" />
<asp:BoundField DataField="Longitude" HeaderText="Longitude" SortExpression="Longitude" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sqldsLocations" runat="server" ConnectionString="<%$ ConnectionStrings:MapTestGuestConn %>" SelectCommand="GetLocations(mySearch)" CancelSelectOnNullParameter="False" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="txtSearch" Name="mySearch" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<div id="googleMap" style="width:500px;height:380px;"></div>
<script type="text/javascript">
initializeMap();
</script>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Windows;
namespace MapTest
{
public partial class Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "Default";
}
protected void upanSearch_PreRender(object sender, EventArgs e)
{
//MessageBox.Show(BuildMapScript());
ScriptManager.RegisterClientScriptBlock(upanSearch, upanSearch.GetType(), "BuildMap", BuildMapScript(), false);
//ScriptManager.RegisterStartupScript(upanSearch, upanSearch.GetType(), "BuildMap", BuildMapScript(), false);
}
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
txtSearch.Focus();
}
protected string BuildMapScript()
{
grdLocations.DataBind();
string markers = GetMarkers();
string myScript = @"
<script type='text/javascript'>
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(50.826108, -1.075011),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);"
+ markers +
@"}
</script>";
return myScript;
}
protected string GetMarkers()
{
string markers = "";
int c = 1;
foreach (GridViewRow grdRow in grdLocations.Rows)
{
markers +=
@"var marker" + c + @" = new google.maps.Marker({
position: new google.maps.LatLng(" + grdRow.Cells[1].Text.ToString() + ", " +
grdRow.Cells[2].Text.ToString() + ")," +
@"map: myMap,
title:'" + grdRow.Cells[0].Text.ToString() + "'});";
c++;
}
return markers;
}
}
}
更新面板会导致您遇到的问题。如果在更新面板中。。。为此,您可以附加到系统应用程序的endRequest事件,该事件在更新面板完成时触发,并重新初始化映射。或者从更新面板中拉出地图。