如何將一個變量從asp.net傳遞給Javascript中的文件？

我正嘗試使用來自數據庫的緯度和經度標記創建地圖。使用數據庫中的Lat和Lng，我試圖將它傳遞給JavaScript文件。如何將一個變量從asp.net傳遞給Javascript中的文件？

此代碼來自aspx.cs並獲取變量Lat和Lng。我創建了標籤lblLat和lblLng，只是爲了在頁面上看到它是否獲得正確的數據。

下面是從aspx.cs代碼：

protected void Page_Load(object sender, EventArgs e) 
    { 
     SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnectionCarpool"]); 

     DataRow dr = ExecuteDataSet(("SELECT Lat, Lng FROM Users Where UserID=1").ToString()).Tables[0].Rows[0]; 

     Mapa prd = new Mapa(); 

     prd.Lat = dr["Lat"].ToString(); 
     prd.Lng = dr["Lng"].ToString(); 

     lblLat.Text = prd.Lat; 
     lblLng.Text = prd.Lng; 

     conn.Close(); 
    }

在我的JavaScript文件，這使得地圖上出現，但沒有標記與緯度和液化天然氣。部分標記是它應該在文件aspx.cs上獲得「Lat」和「Lng」的地方。「位置：新google.maps.LatLng（41，-8）」部分工作正常，但在部分「位置：新google.maps.LatLng（」緯度「，」Lng「）」是我想要的來自aspx.cs數據庫的數據。在aspx.cs文件中它獲得正確的數據，但現在我只是試圖找到一種方法將這些數據傳遞給Javascript文件中的Lat和Lng。

這裏是我的Javascript代碼：

功能初始化（）{

var latlng = new google.maps.LatLng(41.563059,-8.624268); 
var myOptions = { 
    zoom: 7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: latlng 
} 
var map = new google.maps.Map(document.getElementById("map"), myOptions); 

var marker = new google.maps.Marker({ 
    //position: new google.maps.LatLng(41, -8), 
    position: new google.maps.LatLng("Lat", "Lng"), 
    map:map 
});

}

誰能幫助這個我？我真的很喜歡它。謝謝！

來源

2011-12-09 user1090299

您並不真正「從ASP.NET向JavaScript發送值」。前者是客戶端代碼，後者是服務器端代碼。將兩者直觀分開將使您的網站開發生活變得更加輕鬆。因此，理想情況下，您可能希望將這些值發送到客戶端代碼，以便JavaScript可以在運行時找到它。

如果能夠成功在頁面上設置字段的值，那麼你的JavaScript代碼可以直接訪問這些字段的值：

var lat = document.getElementById('someElement').value

來源

2011-12-09 18:53:35 David

-1

在你的aspx頁面，某個地方，使這個：

<div id="marker" runat="server" style="display:none;"> 
    <div id="marker_lat" runat="server">41</div> 
    <div id="marker_lng" runat="server">-8</div> 
</div>

這應該是非常簡單的。您應該能夠從代碼隱藏設置文本或html屬性。（自從我做了webforms以來，這已經很長時間了，我不確定HtmlControls的屬性名稱。）

下一部分將要求您擁有jquery腳本庫，如果它尚未加載你的頁面：

var lat = $('#marker_lat').html(); 
var lng = $('#marker_lng').html(); 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lng), 
    map:map 
});

來源

2011-12-09 18:56:12 danludwig

我實際上使用一個Web服務與此Json。在你的JavaScript文件中，只需使用這段代碼即可。你將不得不爲你的事件傳遞一些ID，所以它返回正確的lat和lng。這將允許您在JavaScript文件中從服務器獲取數據。

function initialize() { 

var lat; 
var lng; 
var ID = 1; //change this to your ID 

    $.ajax({ 
     type: "POST", 
     async: false, 
     contentType: "application/json; charset=utf-8", 
     url: "MyWebService.asmx/ReturnData", 
     data: "{'IdOfEvent':'" + ID + "'}", 
     dataType: "json", 
     success: function(result) { 

      //render the new lat & long from the database 
      var Coordinates = (eval(result.d)); 

      $.each(Coordinates , function(key, value) { 

       Lat = value.Lat; 
       Lng = value.Lng; 

      }); 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      alert("Error - " + textStatus); 
      revertFunc(); 
     } 

var latlng = new google.maps.LatLng(41.563059,-8.624268); 
var myOptions = { 
    zoom: 7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: latlng 
} 
var map = new google.maps.Map(document.getElementById("map"), myOptions); 

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(Lat, Lng), 
    // position: new google.maps.LatLng("Lat", "Lng"), 
    map:map 
}); 

    });

的WebService：

using Newtonsoft.Json; //download this 


[WebMethod] 
    public string ReturnData(int IdOfEvent) 
    { 

     SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnectionCarpool"]); 

     DataRow dr = ExecuteDataSet(("SELECT Lat, Lng FROM Users Where UserID=" + IdOfEvent).ToString()).Tables[0].Rows[0]; 

     Mapa prd = new Mapa(); 
     List<Mapa> lst = new List<Mapa>(); 

     prd.Lat = dr["Lat"].ToString(); 
     prd.Lng = dr["Lng"].ToString(); 

     lst.Add(prd); 


     JavaScriptSerializer js = new JavaScriptSerializer(); 
     string strJSON = js.Serialize(lst.ToArray()); 
     return strJSON; 


    }

見，如果這個工程。如果您有任何問題，請告訴我。

來源

2011-12-09 19:43:33 MikeB55

我不明白。爲什麼我的答案得到-1？爲什麼使用Web服務不是一個好主意？ – MikeB55

您可以將網頁上放置

<input type=hidden />

控制（S）和與緯度和LNG值填充它們。然後使用JavaScript閱讀它。

來源

2011-12-09 20:12:57

如果我的回答得到了-1，那麼應該這個！實際上，這是最快的方法。不會產生額外的http請求。 – danludwig

不，它不應該。你如何渲染你的建議？並且因爲當隱藏的div用於保存數據？ –

它不一定是一個隱藏的div，它可以是任何元素。根據HTML5規範，我可能實際上將它們作爲data-*屬性放置在地圖畫布上。但據我記憶，這在webforms中並不容易。 http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes – danludwig

爲什麼不改變你的初始化（）函數有以下幾點：

var latlng = new google.maps.LatLng(myLat,-myLong);

然後當你渲染頁面，包括一些流的JavaScript沿

<script type="text/javascript"> 
var myLat = 41; 
bar myLong = -8; 
</script>

行只是要確保你的instream JavaScript在initialize（）函數執行之前執行

來源

2012-03-13 10:53:13

如何將一個變量從asp.net傳遞給Javascript中的文件？

回答

相關問題