将C＃中的字符串数据传递给JS

Question

我解决了this problem之后，在我的本地主机上测试时，一切正常。现在我想将这张地图集成到我们的网络应用程序中，但我无法实现它的工作。

编辑： 在渲染页面的JavaScript阵列的源代码仅仅是空的（所以我想，那markers1/markers2字符串是空的。）

从我的其他问题：

我想显示一个显示标记数组的地图。我使用OSL 和OpenLayers库来实现这一点。如果我使用静态值 一切工作正常。但是现在我想要显示 SQL表中的标记。获取数据并将其填充到JS 阵列中的最佳方法是什么？

这里是我的代码：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Data; 
using System.Data.Sql; 
using System.Data.SqlClient; 
using System.Text; 


public partial class fibre : System.Web.UI.Page 
{ 
    protected string markers1; 
    protected string markers2; 

    public void Page_Load(object sender, EventArgs e) 
    { 

     // Construct the connection string to interface with the SQL Server Database 
     string connStr = @"Data Source=CHRISTIANHP\SQLEXPRESS;Initial Catalog='C:\PROGRAM FILES (X86)\MICROSOFT SQL SERVER\MSSQL12.SQLEXPRESS\MSSQL\DATA\FUSIONCHARTSDB.MDF';Integrated Security=True"; 

     // Initialize the strings which contain the map data 
     StringBuilder markerStr1 = new StringBuilder(); 
     StringBuilder markerStr2 = new StringBuilder(); 

     // Create a SQLConnection object 
     using (SqlConnection conn = new SqlConnection(connStr)) 
     { 
      // Establish the connection with the database 
      conn.Open(); 

      // Construct and execute SQL queries which would return the map data 
      SqlCommand query1 = new SqlCommand("SELECT t.lat, t.lon FROM (SELECT T_Fibre.lat, lon, ROW_NUMBER() OVER (ORDER BY lat) AS rownum FROM t_Fibre) AS t WHERE t.rownum % 10 = 0 ORDER BY t.lon", conn); 
      SqlCommand query2 = new SqlCommand("SELECT t.lat, t.lon FROM (SELECT T_FibreReady.lat, lon, ROW_NUMBER() OVER (ORDER BY lat) AS rownum FROM T_FibreReady) AS t WHERE t.rownum % 10 = 0 ORDER BY t.lon", conn); 

      // Begin iterating through the result set (1) 
      SqlDataReader rst1 = query1.ExecuteReader(); 

      while (rst1.Read()) 
      { 
       // Construct the marker data 
       markerStr1.AppendFormat("[{0}, {1}], ", rst1["lat"].ToString(), rst1["lon"].ToString()); 
      } 

      // Close the result set Reader object 
      rst1.Close(); 

      // Begin iterating through the result set (2) 
      SqlDataReader rst2 = query2.ExecuteReader(); 

      while (rst2.Read()) 
      { 
       // Construct the marker data 
       markerStr2.AppendFormat("[{0}, {1}], ", rst2["lat"].ToString(), rst2["lon"].ToString()); 
      } 

      // Close the result set Reader object 
      rst2.Close(); 

      // Close the Connecton object 
      conn.Close(); 

      // Convert data into string and pass it to the markers variables 
      markers1 = markerStr1.ToString(); 
      markers2 = markerStr2.ToString(); 
     } 

    } 
} 

这是我的标记inculding将呈现地图的JS：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="fibre.aspx.cs" Inherits="fibre" %> 

<asp:Content ID="cntChart" ContentPlaceHolderID="CPH_visual1" Runat="Server"> 
    <asp:Literal ID="Literalsingle" runat="server"></asp:Literal> 
    <div id="mapdiv" style="height: 100%; position: relative;"> 
     <!-- map will render here! --> 
    </div> 

    <!-- map built with OpenLayers api on OpenStreetMap --> 
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
    <script> 
     map = new OpenLayers.Map("mapdiv"); 
     map.addLayer(new OpenLayers.Layer.OSM()); 

     epsg4326 = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 projection 
     projectTo = map.getProjectionObject(); // The map projection (Spherical Mercator) 

     // Define center-point 
     var lonLat = new OpenLayers.LonLat(8.2891666666666666666666666, 46.8344444444444444444).transform(epsg4326, projectTo); 

     map.setCenter(lonLat, 1); 

     var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); 

     // Pass map data from C# string to JS array 
     var markers1 = [ <%=markers1%>]; 
     var markers2 = [ <%=markers2%>]; 

     // Loop through the markers2 array and create markers 
     for (var i = 0; i < markers2.length; i++) { 

      var lon = markers2[i][1]; 
      var lat = markers2[i][0]; 

      var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo), 
        { description: "marker number " + i }, 
        { externalGraphic: 'Pictures/marker_r.jpg', graphicHeight: 8, graphicWidth: 8, } 
       ); 
      vectorLayer.addFeatures(feature); 
     } 


     //Loop through the markers1 array and create markers 
     for (var i = 0; i < markers1.length; i++) { 

      var lon = markers1[i][1]; 
      var lat = markers1[i][0]; 

      var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo), 
        { description: "marker number " + i }, 
        { externalGraphic: 'Pictures/marker_r.jpg', graphicHeight: 8, graphicWidth: 8, } 
       ); 
      vectorLayer.addFeatures(feature); 
     } 

     map.addLayer(vectorLayer); 
    </script> 
</asp:Content> 

任何想法，为什么这不起作用？提前致谢！

Answer 1

可能这可以帮助你：

JavaScript的数组格式必须是在你的代码[[lat, lon], [lat, lon], [lat, lon]]格式为[lat, long], [lat, long],你必须在最后一个字符,和失踪[]。

试试下面的代码：

 while (rst2.Read()) 
     { 
      // Construct the marker data 
      markerStr2.AppendFormat("[{0}, {1}], ", rst2["lat"].ToString(), rst2["lon"].ToString()); 
     } 

     //SAMPLE CODE 
     string sampleFormat = markerStr2.ToString(); 
     if (sampleFormat.EndsWith(",")) 
     { 
      sampleFormat = sampleFormat.Substring(0, sampleFormat.Length - 2); 
     } 
     sampleFormat = string.Format("[{0}]", sampleFormat); 

     // Close the result set Reader object 
     rst2.Close(); 

而在JavaScript中使用的sampleFormat变量markers1加载。

var markers1 = [ <%=sampleFormat%>]; 

而且与markers2相同。

我还想指出有关你的错误的更多细节。

对不起，我希望能帮到你。

Answer 2

这里的问题在于，您不会将您的markers1和markers2解析为Javascript可以理解的JSON数组。

尝试

var markers1AsString = '[ <%=markers1%>]'; 
var markers2AsString = '[ <%=markers2%>]'; 

注意周围的[]引号。

然后所有你需要做的就是解析字符串JSON数组

var markers1 = JSON.parse(markers1AsString); 
var markers2 = JSON.parse(markers2AsString); 

for (var i = 0; i < markers2.length; i++) { 
    // bla bla 
}