javascript - 使用 Javascript 的 HiddenFields 中的空值

Question

我正在调用 HTML 地理定位方法来获取纬度和经度，然后将它们存储到 2 个单独的 HiddenFields 中。这些来自 HiddenFields 的值随后将在服务器端(代码隐藏)中使用，这些值将存储在我的数据库中的一个表中。我在 stackoverflow 上进行了高低搜索，以获取有关 HiddenFields 中空值的帮助、将纬度和经度保存到数据库、客户端和服务器端按钮单击等。

我实际上是在基于按钮触发这个 javascript 方法，还是你认为触发 window.onload 更好？

我怀疑这些函数也没有被触发。我对 javascript 知之甚少。感谢任何帮助。

我的 WebForm 中的 Javascript 代码和 HiddenFields:

<asp:HiddenField runat="server" ClientIDMode="Static" ID="latitudeTB"/>
<asp:HiddenField runat="server" ClientIDMode="Static" ID="longitudeTB"/>

<script type="text/javascript">
    function HideLabel() {
        var seconds = 3;
        setTimeout(function () {
            document.getElementById("<%=ErrorPanel.ClientID %>").style.display = "none";
        }, seconds * 1000);
    };

    //GeoLocation Retrieval
    var latJS = 0;
    var lngJS = 0;
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }

    function showPosition(position) {
        //position.coords.latitude + "," + position.coords.longitude;
        //var lat = document.getElementById("<%=latitudeTB.ClientID %>");

        latJS = position.coords.latitude;
        lngJS = position.coords.longitude;

        document.getElementById("<%= latitudeTB.ClientID %>").value = latJS;
        document.getElementById("<%= longitudeTB.ClientID %>").value = lngJS;

        alert(document.getElementById("<%= latitudeTB.ClientID %>").value + " " + document.getElementById("<%= longitudeTB.ClientID %>").value);

        /*if (lat) {
            lat.value = position.coords.latitude;
        }*/

        //var long = document.getElementById("<%=longitudeTB.ClientID %>");

        /*if (long) {
            long.value = position.coords.longitude;
        }*/
    }

    function call() {
        getLocation();
        showPosition(position);
    }
</script>

仅供引用。该按钮位于 HiddenFields 和 Javascript 之上。

asp:Button 的代码:

<asp:Button ID="BTN_Login" CssClass="btn btn-theme-dark" Text="Login" runat="server" OnClientClick="call();" OnClick="BTN_Login_Click" />

我确实在服务器端打印出了隐藏字段的值，但我根本没有得到任何值..

    Debug.WriteLine(latitudeTB.Value);
    Debug.WriteLine(longitudeTB.Value);

我希望我添加的代码足够了..

Answer 1

将此设置为按钮单击事件或窗口加载事件归结为您想要的用户体验。

大多数网站往往会在 DOM 准备就绪时显示地理位置提示。

您需要调整您的 getLocation 函数。 getCurrentPosition 接受成功和错误回调，两者都没有被传递。

function getLocation(opts) {
    return new Promise(function(resolve, reject) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition( resolve,
                reject,
                opts
            );
        } 
        else {
            reject(new ReferenceError('Browser does not support geolocation api'));
        }

    });
}

然后你可以这样使用它:

function setLatLong(latId, longId) {
    getLocation()
    .then(function(pos) {
       var coords = pos.coords;
       document.getElementById(latId).value = coords.latitude;
       document.getElementById(longId).value = coords.longitude;
    })
    .catch(function(err) {
      // log or fall back to come other Location API?
    })
}


function call() {
   setLatLong(
     "<%= latitudeTB.ClientID %>",
     "<%= longitudeTB.ClientID %>");
}

引用:

• https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition