如何将JavaScript经纬度值传递至VB.NET后台？

问题根源 #

你之前的代码存在两个关键问题：

1. 已经给HiddenField设置了ClientIDMode="Static"，直接用document.getElementById("hdn")即可，不需要<%=hdn.ClientID%>（虽不直接导致失败，但属于冗余写法）。
2. 核心问题：仅给HiddenField赋值后未触发页面回传，后台在初始加载时获取的是HiddenField的默认空值，必须在回传事件（比如按钮点击）中才能拿到JS赋值后的新值。

方案1：同步提交（页面刷新） #

适合简单场景，通过服务器按钮触发回传：

前台代码修改

添加服务器按钮并调整JS赋值逻辑：

<body>
<p id="demo"></p>
<asp:HiddenField runat="server" ClientIDMode="Static" ID="hdn"/>
<asp:Button ID="btnSubmit" runat="server" Text="提交位置" OnClick="btnSubmit_Click" />

<script>
var x = document.getElementById("demo");

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else { 
  x.innerHTML = "Geolocation is not supported by this browser.";
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  
  // 显示经纬度
  x.innerHTML = "Latitude: " + lat + "<br>Longitude: " + lng;
  // 直接给静态ID的HiddenField赋值
  document.getElementById("hdn").value = lat + "," + lng;
  
  // 可选：自动触发提交，无需用户手动点击按钮
  // document.getElementById("btnSubmit").click();
}
</script>
</body>

后台VB.NET代码

在按钮点击事件中获取并处理值：

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
    Dim locationStr As String = hdn.Value
    ' 拆分经纬度
    Dim coords() As String = locationStr.Split(",")
    If coords.Length = 2 Then
        Dim latitude As Double = Double.Parse(coords(0))
        Dim longitude As Double = Double.Parse(coords(1))
        ' 这里添加业务逻辑，比如保存到数据库
    End If
End Sub

方案2：AJAX异步传递（无页面刷新） #

无需刷新页面，直接将经纬度传给后台方法，体验更友好：

前台JS代码

<body>
<p id="demo"></p>

<script>
var x = document.getElementById("demo");

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else { 
  x.innerHTML = "Geolocation is not supported by this browser.";
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  
  x.innerHTML = "Latitude: " + lat + "<br>Longitude: " + lng;
  
  // 原生AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "<%= Request.Url.AbsolutePath %>/SaveLocation", true);
  xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert("位置已成功提交");
    }
  };
  // 传递JSON格式参数
  var data = JSON.stringify({ latitude: lat, longitude: lng });
  xhr.send(data);
}
</script>
</body>

后台VB.NET代码

添加带WebMethod属性的静态方法：

Imports System.Web.Services

Partial Class YourPageName ' 替换为你的页面类名
    Inherits System.Web.UI.Page

    <WebMethod>
    Public Shared Sub SaveLocation(latitude As Double, longitude As Double)
        ' 这里处理业务逻辑，比如将经纬度保存到数据库
    End Sub
End Class

注意事项 #

• 确保浏览器已授权地理位置访问（首次加载会弹出授权提示）。
• 同步提交时，必须在JS赋值完成后再触发回传（手动点击按钮或自动触发）。
• AJAX方案中，WebMethod必须是Shared（静态）方法，且页面类需引用System.Web.Services。

内容的提问来源于stack exchange，提问作者dipgirl