我有一个更新面板。其内容包含Google Map和多行文本框，用户可以在其中粘贴邮政编码。邮政编码被采用并在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
结束班
此外，我无法将JSON传递给javascript。
答案 0 :(得分：0)
我知道这可以使用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 _ PostcodeListTextBox。
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我只会放在前端。每次有人按下按钮时创建一个地图似乎都是浪费，所以你也可以将其全局化并在修改它之前检查它是否已经创建。您可能无法识别的是PageMethods.GetJson部分。这称为WebMethod。