首页 文章

如何将变量从asp.net传输到Javascript中的文件？

提问于
浏览 次
3

我正在尝试创建一个带有来自数据库的纬度和经度标记的 Map . 使用数据库中的Lat和Lng我试图将其传递给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文件中，它会显示 Map ，但不会显示带有Lat和Lng的标记 . 部件标记是应该在文件aspx.cs上获得“Lat”和“Lng”的地方 . 部分“位置：新google.maps.LatLng（41，-8）”工作正常，但在“位置：新google.maps.LatLng（”Lat“，”Lng“）”是我想得到的地方来自aspx.cs数据库的数据在aspx.cs文件中它获取正确的数据但现在我只是想找到一种方法将数据传递给Javascript文件上的Lat和Lng .

这是我的Javascript代码：

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

}

任何人都可以帮助我吗？我真的很赞赏它 . 谢谢！

c# javascript asp.net google-maps-api-3

5 回答

  • 0

    你可以放置

    <input type=hidden />

    页面上的控件，并用Lat和Lng的值填充它们 . 然后使用javascript阅读它 .

    回复于
  • -1

    你并没有真正“从ASP.NET向JavaScript发送值 . ”前者是客户端代码，后者是服务器端代码 . 保持两者直观分离将使您的Web开发生活更轻松 . 因此，理想情况下，您可能希望以一种JavaScript在运行时可以找到它的方式将这些值发送到客户端代码 .

    如果您可以在页面上成功设置字段的值，那么您的JavaScript代码只能访问这些字段的值：

    var lat = document.getElementById('someElement').value
    回复于
  • 1

    我实际上会使用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   
});

    });

    网络服务：

    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; 


    }

    看看这是否有效 . 如果您有疑问，请告诉我 .

    回复于
  • 2

    为什么不将initialize（）函数更改为具有以下内容：

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

    然后，当您呈现页面时，沿着行包含一些流JavaScript

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

    只需确保在initialize（）函数之前执行您的instream JavaScript

    回复于
  • 0

    在你的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>

    这应该非常简单 . 您应该能够从codebehind设置text或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   
});
    回复于

相关问题