使用 Javascript 的 HiddenFields 中的空值

Posted 2023-02-23

【中文标题】使用 Javascript 的 HiddenFields 中的空值

【英文标题】：Empty Values in HiddenFields with Javascript

【发布时间】：2017-08-03 06:25:36

【问题描述】：

我正在调用 html 地理定位方法来获取纬度和经度，然后将它们存储到 2 个单独的 HiddenFields 中。然后，这些来自 HiddenFields 的值将在服务器端（代码隐藏）中使用，这些值将存储在我的数据库中的一个表中。我在 *** 上搜索高低以获取有关 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);

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

【问题讨论】：

你能先检查一下你是否在客户端接收到纬度和经度值吗？您可以尝试在您的 showPosition 函数中添加这几行代码吗：console.log(latJS); console.log(latJS);

确定我现在就去做！

不幸的是，我收到了一个错误。未捕获的 ReferenceError：未定义位置

【参考方案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

【讨论】：

您好 Oluwafemi，您是使用 Chrome 运行还是？我刚刚尝试在 Microsoft Edge 上运行我的网站，一切正常。会不会是 Chrome 的问题？

我正在使用 Chrome。

先生，我不喜欢复制和粘贴不理解的代码，但我可以简单地将您提供的每一行粘贴到我的 javascript 中吗？

我在 Chrome 中检查了我的控制台，我得到了这个：Uncaught ReferenceError: call is not defined

你还在设置按钮点击的地理位置吗？