將字符串數據從C＃傳遞給JS

Question

解決此問題后 ，在本地主機上進行測試時，一切工作正常。 現在，我想將此地圖集成到我們的Web應用程序中，但是我無法使其正常工作。

編輯：在呈現頁面的源代碼中，javascript數組只是空的（所以我認為，markers1 / markers2字符串為空。）

從我的另一個問題：

我想顯示一個顯示標記數組的地圖。 我將OSM與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();
        }

    }
}

這是我的標記，其中包含將渲染地圖的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%>];

與標記2相同。

我還希望向我提供有關您的錯誤的更多詳細信息。

對不起，我的英語，希望對您有所幫助。

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
}