javascript - 在下一个循环中更新面板问题

Question

我有一个更新面板。其内容包含一个 Google map 和一个多行文本框，用户可以在其中粘贴邮政编码。邮政编码在 WHERE IN (list) mysql 语句中获取并使用，以从我们的数据库返回纬度和经度。一旦数据集完成，它就会变成一个 JSON 字符串，用于创建 map 标记。

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

这是我的 ASP 代码:-

<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

下课

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

Answer 1

我知道这可以使用 WebMethods 来完成。我希望这与您要找的东西相距不远。

HTML:

<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">
                    <textarea ID="PostcodeListTextBox" cols="40" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td align="center" class="style14" colspan="2">
                    <button type="button" ID="ShowLocsButton" onclick="GetPostalJSON()">Show Locations</button>
                </td>
            </tr>
         </table>
    </td>

     <td align="center" valign="top">
            <div id="mapArea" style="border:1px solid black"></div>
        </td>
    </tr>
</table>

至少对于您所解释的内容，您实际上不需要使用服务器端控件。虽然如果你确实想使用它们，我认为你需要为你的选择器添加前缀。前任。 #MainContent_邮政编码列表文本框。

VB.NET

要使用 WebMethods，您需要将 Imports System.Web.Services 添加到您的导入中。

Imports 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

我删除了所有不必要的代码，并将用于构建 DataTable 的代码移到了 GetJson 函数中，但除此之外它与您拥有的代码相同。如果您发现有任何遗漏(例如您在何处构建您在何处使用的邮政编码字符串)，它会在 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>

基本上，您使用 StringBuilder 构建的任何 JS 我都会放在前端。每次有人按下按钮时都创建一个 map 似乎是一种浪费，因此您不妨将其设为全局并在修改之前检查它是否已创建。您可能不认识的是 PageMethods.GetJson 部分。这调用了 WebMethod。