Javascript 更新下一个循环中的面板问题

我有一个更新面板。其内容包含谷歌地图和多行文本框，用户可以在其中粘贴邮政编码。在WHERE-in（list）mysql语句中使用邮政编码从数据库返回纬度和经度。一旦数据集完成，它就会变成用于创建映射标记的JSON字符串

更新面板导致了一些问题，尽管我会删除它，但是在这样做时，数据集只从列表中的最后一个条目中获取最后一条记录，而JSON数据同样只包含最后一个条目

这是我的asps代码：-

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <table border="0px" style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000000;">
        <tr>
        <td class="style15" valign="top">
            <table border="0px" style="border: 1px solid #000000; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000000;"width="100%">
                <tr>
                    <td align="center" class="style14" colspan="2">
                        <asp:TextBox ID="PostcodeListTextBox" runat="server" Height="500px" 
                            Width="240px" TextMode="MultiLine"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="center" class="style14" colspan="2">
                        <asp:Button ID="ShowLocsButton" runat="server" Text="Show Locations" />
                    </td>
                </tr>
             </table>
        </td>

         <td align="center" valign="top">
                <div id="mapArea" style="border:1px solid black">
                </div>
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </td>
        </tr>
        </table>
 </ContentTemplate>
</asp:UpdatePanel>

下面是我的代码：-

Imports MySql.Data.MySqlClient
Imports MySql.Data
Imports System.Data
Imports System.Web
Imports System.IO
Imports System.Configuration
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
Partial Class admin_routing
Inherits System.Web.UI.Page
Dim i As Integer = 0
Dim markers As String = ""

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub

Protected Sub ShowLocsButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ShowLocsButton.Click
    Dim ConnString As String = ConfigurationManager.ConnectionStrings("ConnString").ConnectionString
    Dim conn As New MySqlConnection(ConnString)
    Dim command As New MySqlCommand
    Dim ds As New DataSet
    Dim sql As String
    Dim dt As New DataTable
    Dim markers As String = ""
    Dim i As Integer = 0
    Dim PCList As String = Replace(Me.PostcodeListTextBox.Text, vbLf, "','")
    Dim da As New MySqlDataAdapter
    Dim myJS As New StringBuilder
    PCList = "'" & PCList & "'"
    sql = "SELECT postcode, latitude,longitude FROM geocodes WHERE postcode IN (" & PCList & ")"
    da = New MySqlDataAdapter(sql, conn)
    da.Fill(ds, "locations")
    Dim jsonData = GetJson(ds.Tables(0))
    'Dim jsondata = DataSetToJSON(ds)
    'Me.JsonTextBox.Text = jsonData
    myJS.AppendLine("<script type=""text/javascript"">" & vbCrLf)
    myJS.AppendLine("var mapOptions = {center: new google.maps.LatLng(54.236107, -4.548055999999974)," & vbCrLf)
    myJS.AppendLine("zoom: 6," & vbCrLf)
    myJS.AppendLine("mapTypeId : google.maps.MapTypeId.ROADMAP" + "};" & vbCrLf)
    myJS.AppendLine("var myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);" & vbCrLf)
    myJS.AppendLine("var markers = JSON.parse(""<%=jsonData %>"");" & vbCrLf)
    myJS.AppendLine("console.log(""<%=jsonData %>"");" & vbCrLf)
    myJS.AppendLine("for (i = 0; i < markers.length; i++) {" & vbCrLf)
    myJS.AppendLine("var data = markers[i];" & vbCrLf)
    myJS.AppendLine("var myLatLng = new google.maps.LatLng(data.latitude, data.longitude);" & vbCrLf)
    myJS.AppendLine("var marker = new google.maps.Marker({" & vbCrLf)
    myJS.AppendLine("position: myLatLng," & vbCrLf)
    myJS.AppendLine("map: myMap," & vbCrLf)
    myJS.AppendLine("title:  data.postcode" & vbCrLf)
    myJS.AppendLine("});" & vbCrLf)
    myJS.AppendLine("}" & vbCrLf)
    myJS.AppendLine("</script>")
    Dim str As String = myJS.ToString
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Init", myJS.ToString, True)
End Sub
Public Shared Function GetJson(ByVal dt As DataTable) As String
    Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
    Dim rows As New System.Collections.Generic.List(Of System.Collections.Generic.Dictionary(Of String, Object))()
    Dim row As System.Collections.Generic.Dictionary(Of String, Object) = Nothing
    For Each dr As DataRow In dt.Rows
        row = New System.Collections.Generic.Dictionary(Of String, Object)()
        For Each col As DataColumn In dt.Columns
            row.Add(col.ColumnName, dr(col))
        Next
        rows.Add(row)
    Next
    Return serializer.Serialize(rows)
End Function

导入MySql.Data.MySqlClient
导入MySql.Data
导入系统数据
导入系统.Web
导入System.IO
导入系统配置
导入System.Web.Script.Services
导入System.Web.Script.Serialization
部分类管理路由
继承System.Web.UI.Page
尺寸i为整数=0
将标记变暗为字符串=“”
受保护的子页加载（ByVal sender作为对象，ByVal e作为System.EventArgs）处理Me.Load
端接头
受保护的子ShowLocsButton_Click（ByVal sender作为对象，ByVal e作为System.EventArgs）处理ShowLocsButton。单击
Dim ConnString As String=ConfigurationManager.ConnectionString（“ConnString”）.ConnectionString
Dim conn作为新的MySqlConnection（ConnString）
Dim命令作为新的MySqlCommand
Dim ds作为新数据集
将sql设置为字符串
Dim dt作为新数据表
将标记变暗为字符串=“”
尺寸i为整数=0
Dim PCList As String=Replace（Me.PostcodeListTextBox.Text，vbLf，“，”）
Dim da作为新的MySqlDataAdapter
Dim myJS作为新的StringBuilder
PCList=“”&PCList&“”
sql=“从邮政编码所在的地理编码（“&PCList&”）中选择邮政编码、纬度和经度”
da=新的MySqlDataAdapter（sql，conn）
da.填充（ds，“位置”）
Dim jsonData=GetJson（ds.Tables（0））
'Dim jsondata=datasetojson（ds）
'Me.JsonTextBox.Text=jsonData
myJS.AppendLine（“&vbCrLf”）
myJS.AppendLine（“var-mapOptions={center:new-google.maps.LatLng（54.236107，-4.5480559999974），”&vbCrLf）
myJS.AppendLine（“缩放：6，”&vbCrLf）
myJS.AppendLine（“mapTypeId:google.maps.mapTypeId.ROADMAP”+“}；”&vbCrLf）
myJS.AppendLine（“var myMap=new google.maps.Map（document.getElementById（'mapArea'），mapOptions）”；“&vbCrLf）
myJS.AppendLine（“var markers=JSON.parse（“”；”&vbCrLf）
myJS.AppendLine（“console.log（“”；”）和vbCrLf）
AppendLine（“for（i=0；i

末级

---

另外，我在将JSON传递给javascript时遇到了问题。

我知道这可以通过WebMethods实现。我希望这离你要找的不远

HTML:

我删除了所有不必要的代码，并将用于构建DataTable的代码移动到GetJson函数中，但除此之外，它与您的代码相同。如果您注意到缺少任何内容（例如在where-in中使用的邮政编码字符串的构建位置），那么它将在JS中完成。见下文

Javascript:

<script type="text/javascript">
    var myMap;

    function GetPostalJSON(){
        var res = $("#PostcodeListTextBox").val().split("\n"),
            postCodeStr = "";

        for (var i = 0; i < res.length; i++) {
            if (i > 0) {
                postCodeStr += ","
            }
            postCodeStr += "'" + res[i].trimRight() + "'"
        }

        PageMethods.GetJson(postCodeStr, function(result){
            UpdateMarkers(result)
        }); 
    }

    function CreateMap(){
        var mapOptions = {
                            center: new google.maps.LatLng(54.236107, -4.548055999999974),
                            zoom: 6,
                            mapTypeId : google.maps.MapTypeId.ROADMAP
                        };

        myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);
    }

    function UpdateMarkers(jsonData){
        if (myMap == null) CreateMap()

        var markers = JSON.parse(jsonData);
        console.log(jsonData);
        for(i =0; i < markers.length; i++) {
            var data = marker[i];
            var myLatLng = new google.maps.LatLng(data.latitude, data.longitude);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: myMap,
                title:  data.postcode
            });
        }
    }

</script>

var-myMap；
函数GetPostalJSON（）{
var res=$（“#PostcodeListTextBox”）.val（）.split（“\n”），
邮政编码tr=“”；
对于（变量i=0；i0）{
邮政编码TR+=“，”
}
邮政编码tr+=“'”+res[i].trimRight（）+“”
}
GetJson（邮政编码，函数（结果）{
更新标记（结果）
}); 
}
函数CreateMap（）{
变量映射选项={
中心：新google.maps.LatLng（54.236107，-4.548055999974），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
myMap=new google.maps.Map（document.getElementById（'mapArea'）、mapOptions）；
}
函数更新标记（jsonData）{
如果（myMap==null）CreateMap（）
var markers=JSON.parse（jsonData）；
console.log（jsonData）；
对于（i=0；iImports MySql.Data.MySqlClient
Imports MySql.Data
Imports System.Data
Imports System.Web
Imports System.Web.Services
Imports System.IO
Imports System.Configuration
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization

Partial Class admin_routing
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub


<WebMethod()>
Public Shared Function GetJson(PCList as String) As String

    Dim ConnString As String = ConfigurationManager.ConnectionStrings("ConnString").ConnectionString,
        conn As New MySqlConnection(ConnString),
        da As New MySqlDataAdapter,
        ds As New DataSet,
        sql = "SELECT postcode, latitude,longitude FROM geocodes WHERE postcode IN (" & PCList & ")"

    da = New MySqlDataAdapter(sql, conn)
    da.Fill(ds, "locations")
    Dim dt as DataTable = ds.Tables(0)

    Dim rows As New System.Collections.Generic.List(Of System.Collections.Generic.Dictionary(Of String, Object))(),
        row As System.Collections.Generic.Dictionary(Of String, Object) = Nothing

    For Each dr As DataRow In dt.Rows
        row = New System.Collections.Generic.Dictionary(Of String, Object)()
        For Each col As DataColumn In dt.Columns
            row.Add(col.ColumnName, dr(col))
        Next
        rows.Add(row)
    Next

    Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
    Return serializer.Serialize(rows)
End Function

<script type="text/javascript">
    var myMap;

    function GetPostalJSON(){
        var res = $("#PostcodeListTextBox").val().split("\n"),
            postCodeStr = "";

        for (var i = 0; i < res.length; i++) {
            if (i > 0) {
                postCodeStr += ","
            }
            postCodeStr += "'" + res[i].trimRight() + "'"
        }

        PageMethods.GetJson(postCodeStr, function(result){
            UpdateMarkers(result)
        }); 
    }

    function CreateMap(){
        var mapOptions = {
                            center: new google.maps.LatLng(54.236107, -4.548055999999974),
                            zoom: 6,
                            mapTypeId : google.maps.MapTypeId.ROADMAP
                        };

        myMap = new google.maps.Map(document.getElementById('mapArea'), mapOptions);
    }

    function UpdateMarkers(jsonData){
        if (myMap == null) CreateMap()

        var markers = JSON.parse(jsonData);
        console.log(jsonData);
        for(i =0; i < markers.length; i++) {
            var data = marker[i];
            var myLatLng = new google.maps.LatLng(data.latitude, data.longitude);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: myMap,
                title:  data.postcode
            });
        }
    }

</script>