Как перенести переменную из asp.net в файл в Javascript?

Question

Я пытаюсь создать карту с маркерами с широтой и долготой, которая поступает из базы данных. С 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 отображается карта, но нет маркера с широтой и буквой Lng. Маркер детали находится там, где он должен получить значения «Lat» и «Lng» в файле aspx.cs. Часть "position: new google.maps.LatLng (41, -8)" работает нормально, но с части "position: new google.maps.LatLng (" Lat "," Lng ")", где я хочу получить данные из базы данных на aspx.cs. В файле aspx.cs он получает правильные данные, но сейчас я просто пытаюсь найти способ передать эти данные в Lat и Lng, которые находятся в файле Javascript.

Вот мой код 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   
});

}

Может ли кто-нибудь помочь мне с этим? Я действительно ценю это. Спасибо!

Answer 1

Вы можете разместить

<input type=hidden />

контроль (ов) на странице и заполнить их значениями Lat и Lng. Затем прочитайте его, используя JavaScript.

Answer 2

Вы действительно не «отправляете значения в JavaScript из ASP.NET».Первый код на стороне клиента, второй код на стороне сервера.Сохранение этих двух интуитивно разделенных сделает вашу жизнь веб-разработки намного легче.Поэтому в идеале вы, вероятно, захотите передать эти значения в код на стороне клиента таким образом, чтобы JavaScript мог найти его при запуске.

Если вы можете успешно установить значение полей на странице, тогдаваш код JavaScript может просто получить доступ к значениям этих полей:

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

Answer 3

Почему бы не изменить функцию initialize () на следующее:

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

А затем, когда вы рендерите страницу, включите некоторые из них в поток JavaScript в соответствии с

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

Просто убедитесь, что ваш instream JavaScript выполняется перед функцией initialize ()

Answer 4

Я бы на самом деле использовал для этого веб-сервис с Json. В вашем файле JavaScript просто используйте этот код. Вам нужно будет передать какой-то идентификатор для вашего события, чтобы он возвращал правильные значения 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; 


    }

Посмотри, работает ли это. Дайте мне знать, если у вас есть вопросы.

Answer 5

где-нибудь на вашей странице 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>

Это должно быть довольно просто. Вы должны быть в состоянии установить свойство text или html из codebehind. (Прошло так много времени с тех пор, как я делал веб-формы, я не уверен, как называется свойство для 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   
});