如何将数据从“代码隐藏"传递到JavaScript? [英] How to pass data from Code Behind to JavaScript?

问题描述

我在将值从(onLoad)后面的代码传递给javascript时遇到麻烦.我能够获取可拖动标记的地址值(如果在JavaScript上静态声明了INITIAL LAT和LONG值).现在，我尝试在ON上加载值在代码后面使用两个隐藏字段加载值，问题是没有显示地图和标记.这是我的代码

Hi I am having trouble to pass a value from a code behind (onLoad) to javascript. I am able to get the value for the address of the draggable marker(if INITIAL LAT and LONG value declared statically on javascript). Now I tried to load the value on ON Load value on Code behind using two hidden fields the problem is doesn't show the map and marker. Here's my code

<div class="panel-body">

                    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCPzl7Nmzd71jMSTi46X5tGxpLCuo2n1sy"></script>
<script type="text/javascript">


        var markers = [

            {

                "title": 'Target Location',
                //"lat": '43.7328831',
                //"lng": '-79.6784712',
                "lat": document.getElementById<%= HdLat.ClientID%>.value,
                "lng": document.getElementById<%= HdLng.ClientID%>.value,
                "description": ''
            }
        ];

        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var geocoder = geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    draggable: true,
                    animation: google.maps.Animation.DROP
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                    google.maps.event.addListener(marker, "dragend", function (e) {
                        var lat, lng, address;
                        geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                lat = marker.getPosition().lat();
                                lng = marker.getPosition().lng();
                                address = results[0].formatted_address;
                                document.getElementById("mytext").value = address;

                            }
                        });
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            //map.fitBounds(latlngbounds);
        }


</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
                   <br />



                    <div class="form-group"><asp:Label ID="Label1" runat="server"></asp:Label><br />
                        <input type="text" id="mytext"  class="form-control" name="Address"/>

             <asp:Button ID="Button1" runat="server" Text="Button" />
                        <%--<asp:ImageButton ID="ImageButton4" runat="server" class="popovers" AlternateText="Point Location" Height="28px" ImageAlign="AbsMiddle" ImageUrl="~/img/maploc.png" Width="28px" data-original-title="Locate" data-content="Locate by means of map " data-placement="right" data-trigger="hover" />--%>
                        <asp:HiddenField ID="HdLat" runat="server" />
                         <asp:HiddenField ID="HdLng" runat="server" />
                    </div>

---

后面的代码是

---

Code behind is

 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        HdLat.Value = "43.7328831"
        HdLng.Value = "-79.6784712"
    End Sub

希望获得您的帮助...

Hoping for your kind Help...

推荐答案

最简单的方法是使用 Literal 服务器控件，并传递值.有点奇怪，但是有效.

Easiest way is to use Literal server control, and pass the value. It is kind of weird, but it works.

var markers = [{
   ...
   "lat": <asp:Literal runat="server" ID="LatLiteral" />,
   "lng": <asp:Literal runat="server" ID="LngLiteral" />
}];

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
   LatLiteral.Text = "43.7328831"
   LngLiteral.Text = "-79.6784712"
End Sub

Visual Studio

请注意，Visual Studio将抱怨语法错误.您可以忽略它.

Visual Studio

Notice that Visual Studio will complain for syntax error. You can ignore it.

这篇关于如何将数据从“代码隐藏"传递到JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！