使用c#在asp.net中的页面加载上调用java脚本函数

时间:2015-05-14 05:14:01

标签: javascript c# asp.net latitude-longitude

我想使用c#调用asp.net中页面加载的java脚本函数,我的代码是, Asp.net 代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lat_log_record.aspx.cs" Inherits="LAT_LOG.lat_log_record" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>

<body onload="getloc();">
    <form id="form1" runat="server">
        <script src="http://maps.google.com/maps/api/js?sensor=false">
        </script>

        <script type="text/javascript">
        function getloc() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    document.getElementById("<%=hfLat.ClientID %>").value = latitude;
                    document.getElementById("<%=hfLon.ClientID %>").value = longitude;
                    var coords = new google.maps.LatLng(latitude, longitude);
                    var mapOptions = {
                        zoom: 15,
                        center: coords,
                        mapTypeControl: true,
                        navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.SMALL
                        },
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(
                        document.getElementById("mapContainer"), mapOptions
                    );
                    var marker = new google.maps.Marker({
                        position: coords,
                        map: map,
                        title: "Your current location!"
                    });

                });
            } else {
                alert("Geolocation API is not supported in your browser.");
            }
        }
        </script>
        <style type="text/css">
        #mapContainer {
            height: 500px;
            width: 800px;
            border: 10px solid #eaeaea;
        }
        </style>
        <div id="mapContainer" runat="server" visible="false">
        </div>
        <asp:HiddenField ID="hfLat" runat="server" />
        <asp:HiddenField ID="hfLon" runat="server" />
        <asp:Button ID="btnSave" runat="server" Text="login" OnClick="btnSave_Click" />
        <asp:GridView ID="gvloc" runat="server">
        </asp:GridView>
        <asp:Label ID="lbllat" runat="server"></asp:Label>
        <asp:Label ID="lbllog" runat="server"></asp:Label>

    </form>
</body>

</html>

C#代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Net;
using System.Text;
using System.Data;

namespace LAT_LOG
{
    public partial class lat_log_record : System.Web.UI.Page
    {
        Class1 ob = new Class1();
        List<Class1> lst = new List<Class1>();
        protected void Page_Load(object sender, EventArgs e)
        {

            ScriptManager.RegisterStartupScript(this, this.GetType(), "Javascript", "javascript:getloc();", true);
            ob.lat = hfLat.Value;
            ob.log = hfLon.Value;
            lst.Add(ob);
            // lbllat.Text = latitude;
            // lbllog.Text = longitude;
            gvloc.DataSource = lst;
            gvloc.DataBind();
        }


        protected void btnSave_Click(object sender, EventArgs e)
        {

        }
    }

}

我想在页面加载时运行该java脚本,但它只显示空白网格... 我试过像...这样的其他选择 ,脚本中的winodows.onload 但它不起作用,需要帮助 谢谢..!

2 个答案:

答案 0 :(得分:1)

使用DOMContentLoaded事件:

  

在完全加载和解析文档时触发DOMContentLoaded事件,而不等待样式表,图像和子帧完成加载(加载事件可用于检测完全加载的页面)。

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
    getloc();
    // ^^^^^
});

Documentation

https://stackoverflow.com/a/29773084/2025923

修改

您在getloc()内嵌套了函数a()。这是getloc()未被调用的原因。您可以移除function a() {及其右括号}

否则,请使用以下代码:

function a() {
    function getloc() {
        ...
    }
    getloc(); // call when `a` is called
}

修改-2

从正文return

中删除onload
<body onload="getloc();">

演示:https://jsfiddle.net/tusharj/yfpf3ksr/

答案 1 :(得分:0)

通过查看你的代码,在asp页面上你在body标签内调用getloc()函数,这个getloc()在函数a()中,似乎是错误的。删除body标签内的调用并尝试,服务器端代码可能正常工作。