在ASP.NET MVC中使用Ajax将HTML页面的数据传递到控制器

嘿，我来给你一步步梳理怎么实现这个需求——把页面上获取到的地理位置（还有其他你需要的页面数据）通过Ajax传到ASP.NET MVC的控制器里，完全贴合你的场景来：

首先，先把你那没写完的地理位置获取代码补全，顺便把Ajax提交的逻辑嵌进去：

1. 前端JavaScript（获取位置+Ajax提交） #

你可以把这段代码放在页面的<script>标签里，或者单独的JS文件里，记得先确保页面引用了jQuery哦（要是不想用jQuery，后面我也给你准备了原生JS的版本）：

// 可以先存下经纬度，或者直接在成功回调里提交
let userLatitude, userLongitude;

function getLocation() {
    // 先判断浏览器支不支持地理定位
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
    } else {
        alert("你的浏览器不支持地理定位功能哦～");
    }
}

// 定位成功的回调函数
function locationSuccess(position) {
    // 拿到经纬度
    userLatitude = position.coords.latitude;
    userLongitude = position.coords.longitude;
    
    // 这里可以获取页面上其他需要提交的数据，比如某个输入框的内容
    let extraInfo = document.getElementById("extraInfoInput").value;
    
    // 发起Ajax请求，把数据传到控制器
    $.ajax({
        // 这里的路径要对应你的控制器和Action名称，比如我用Home控制器的SaveUserLocation Action
        url: "/Home/SaveUserLocation",
        type: "POST",
        // 告诉服务器我们传的是JSON格式
        contentType: "application/json; charset=utf-8",
        // 把要提交的数据转成JSON字符串
        data: JSON.stringify({
            Latitude: userLatitude,
            Longitude: userLongitude,
            ExtraInfo: extraInfo
        }),
        // 请求成功后的处理
        success: function(response) {
            if (response.isSuccess) {
                alert("位置数据提交成功啦！");
                // 这里还可以加更新地图的逻辑，比如把用户位置标出来
            } else {
                alert("提交失败：" + response.msg);
            }
        },
        // 请求出错的处理
        error: function(xhr, status, err) {
            alert("哎呀，请求出错了：" + err);
        }
    });
}

// 定位失败的回调函数，给用户友好提示
function locationError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("你拒绝了位置请求，没法获取你的位置哦～");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("当前无法获取到位置信息，请稍后再试。");
            break;
        case error.TIMEOUT:
            alert("获取位置超时啦，麻烦再试一次。");
            break;
        default:
            alert("发生了未知错误，没法获取位置。");
    }
}

然后，页面上得有触发这个功能的按钮，还有你需要的其他输入控件：

<!-- 点击这个按钮就会触发定位和提交 -->
<button onclick="getLocation()">获取我的位置并提交</button>
<!-- 示例：一个额外的输入框，用来传其他数据 -->
<input type="text" id="extraInfoInput" placeholder="可以输入一些额外信息哦">

2. 后端控制器与模型 #

接下来要在MVC项目里写接收数据的代码，我推荐用模型类来接收数据，这样更规范，也方便后续扩展：

先创建一个模型类

在项目的Models文件夹里新建一个类，比如叫UserLocationViewModel.cs：

public class UserLocationViewModel
{
    // 对应前端传的纬度
    public double Latitude { get; set; }
    // 对应前端传的经度
    public double Longitude { get; set; }
    // 对应前端传的额外信息
    public string ExtraInfo { get; set; }
}

然后写控制器的Action方法

比如在你的Home控制器里（当然你也可以用其他控制器），写一个带[HttpPost]特性的Action，用来接收前端传的JSON数据：

using System.Web.Mvc;
using YourProjectName.Models; // 这里换成你项目的命名空间

public class HomeController : Controller
{
    // 接收前端传的位置数据
    [HttpPost]
    public JsonResult SaveUserLocation(UserLocationViewModel locationData)
    {
        // 先验证数据是否合法
        if (ModelState.IsValid)
        {
            // 这里就是你处理业务逻辑的地方啦，比如把数据存到数据库
            // 举个例子：_dbContext.UserLocations.Add(new UserLocation { Lat = locationData.Latitude, Lng = locationData.Longitude });
            // _dbContext.SaveChanges();
            
            // 给前端返回成功的响应
            return Json(new { isSuccess = true, msg = "数据已成功接收" });
        }
        else
        {
            // 数据不合法的话返回失败提示
            return Json(new { isSuccess = false, msg = "提交的数据格式有问题哦" });
        }
    }
}

一些要注意的小细节 #

• 要是你不想用jQuery，用原生JS的fetch也可以，给你补个原生版本的Ajax代码：

// 原生JS版的Ajax提交，放在locationSuccess函数里
fetch("/Home/SaveUserLocation", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        Latitude: userLatitude,
        Longitude: userLongitude,
        ExtraInfo: extraInfo
    })
})
.then(response => response.json())
.then(data => {
    if (data.isSuccess) {
        alert("位置数据提交成功啦！");
    } else {
        alert("提交失败：" + data.msg);
    }
})
.catch(err => {
    alert("请求出错了：" + err);
});

• 控制器的Action路径一定要写对，比如你的控制器是MapController，Action是SaveLocation，那url就是"/Map/SaveLocation"
• 别忘给Action加[HttpPost]特性，不然MVC会默认用Get请求，Get请求不适合传这类数据
• 处理用户拒绝定位的情况很重要，一定要给用户明确的提示，不然用户会懵

内容来源于stack exchange