ASP.NET Core中如何通过GET/POST请求实现带URL参数的地图弹窗

1. 生成适配ASP.NET的路由URL #

在页面的<script>标签中，用ASP.NET的@Url.Action辅助方法生成基础路由URL，和asp-route-id一样适配框架的路由规则：

<script>
// 提前获取Reports/Index的基础路由地址
const reportIndexBaseUrl = '@Url.Action("Index", "Reports")';
</script>

2. 在标记点击事件中添加POST请求逻辑 #

修改地图点击回调，获取标记ID后拼接目标URL，发送POST请求并更新浏览器地址栏：

map.on('click', function (e) {
    map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        const markerId = feature.getId();
        togglePopup(markerId);
        resetCurrent();
        handleImages(markerId);

        // 拼接带标记ID的目标URL
        const targetUrl = `${reportIndexBaseUrl}/${markerId}`;

        // 发送POST请求，适配ASP.NET防伪造验证
        fetch(targetUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                // 带上防伪造令牌，避免ASP.NET Core拦截请求
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        })
        .then(response => {
            if (response.ok) {
                // 更新浏览器地址栏，让URL变为带ID的形式，支持后续GET请求加载弹窗
                history.pushState({ markerId: markerId }, '', targetUrl);
            }
        })
        .catch(err => console.error('POST请求失败:', err));
    })
})

3. 后端Action适配 #

确保ReportsController中有对应处理带ID的POST请求的Action：

[HttpPost]
[Route("~/reports/index/{id}")]
public IActionResult Index(string id)
{
    // 这里添加你的业务逻辑，比如记录标记点击行为、返回弹窗所需数据等
    return Ok();
}

关键注意事项 #

• 防伪造令牌：ASP.NET Core项目需要在页面中通过@Html.AntiForgeryToken()生成令牌输入框，否则POST请求会被框架拦截。
• 路由匹配：后端路由规则要和前端拼接的URL完全一致，避免出现404错误。
• 地址栏更新：history.pushState只会修改地址栏不会刷新页面，完美适配弹窗场景；如果需要支持浏览器后退/前进，可以监听popstate事件加载对应弹窗内容。

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