如何将一个变量从asp.net转移到Javascript中的文件

How to transfer a variable from asp.net to a file in Javascript?

本文关键字：转移 net asp Javascript 文件 变量 一个      更新时间：2023-09-26

我试图创建一个带有来自数据库的经度和纬度标记的地图。与Lat和Lng是在数据库中，我试图将其传递到一个javascript文件。

这段代码来自aspx.cs，获取变量Lat和Lng。我创建了标签lblat和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文件中，它使地图出现，但不显示带有Lat和Lng的标记。部分标记是它应该在文件aspx.cs上获得"Lat"answers"Lng"的地方。"position: new google.maps"部分。LatLng(41， -8)"工作良好，但部分"的位置:新的谷歌地图。LatLng("Lat"，"Lng")"是我想从aspx.cs上的数据库中获取数据的地方。在aspx.cs文件上，它得到了正确的数据，但现在我只是想找到一种方法将该数据传递给Javascript文件上的Lat和Lng。

下面是我的Javascript代码:

函数initialize() {

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   
});

}

有谁能帮我一下吗?我真的很感激。谢谢!

可以放置

<input type=hidden />

控件，用Lat和Lng的值填充。然后用javascript读取

你并不是真的"从ASP.NET向JavaScript发送值"。前者是客户端代码，后者是服务器端代码。将两者直观地分开将使您的web开发生活轻松得多。因此，理想情况下，您可能希望以JavaScript在运行时可以找到的方式向客户端代码发出这些值。

如果你可以成功地设置页面上字段的值，那么你的JavaScript代码就可以访问这些字段的值:

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

我实际上会使用Json的web服务。在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; 

    }

看看这是否有效。如果有问题请告诉我。

为什么不改变你的initialize()函数如下:

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

然后在渲染页面时，在

的行中包含一些流JavaScript
<script type="text/javascript">
var myLat = 41;
bar myLong = -8;
</script>

确保你的流JavaScript在initialize()函数

之前执行

在你的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   
});
相关文章：