如何通过Ajax向ASP.NET Core C#控制器方法提交表单

嘿，作为ASP.NET Core新手第一次尝试用jQuery Ajax调用控制器方法，踩坑太正常啦！我来帮你一步步排查解决常见问题，让你的请求顺利跑起来～

首先得确保你的控制器方法有正确的HTTP动词标记，并且路由能匹配上Ajax请求：

// 标记这是接收POST请求的方法
[HttpPost]
// 可以自定义路由，或者用默认的「控制器名/方法名」路由
[Route("Component/SaveComponent")]
// 必须加防伪令牌验证，和视图里的@Html.AntiForgeryToken()对应
[ValidateAntiForgeryToken]
public IActionResult SaveComponent(ComponentModel model)
{
    // 先验证输入的模型是否合法
    if (!ModelState.IsValid)
    {
        var errorMessages = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
        return Json(new { success = false, message = string.Join("; ", errorMessages) });
    }

    // 这里写你的业务逻辑，比如保存到数据库
    // _componentService.AddComponent(model);

    // 返回JSON格式的响应，方便Ajax处理结果
    return Json(new { success = true, message = "操作成功！" });
}

注意：如果控制器类名叫ComponentController，默认路由里的控制器名只需要写Component（去掉后缀），别写错哦！

ASP.NET Core默认会验证POST请求的防伪令牌，你视图里生成的@Html.AntiForgeryToken()会生成一个隐藏input，Ajax请求必须带上这个令牌才能通过验证。

最简单的办法是直接序列化整个表单，因为serialize()会自动包含这个隐藏字段：

$('#save-btn').click(function() {
    // 用Url.Action生成正确的请求路径，避免硬编码写错
    var requestUrl = '@Url.Action("SaveComponent", "Component")';
    // 序列化表单里的所有字段，包括防伪令牌
    var formData = $('#components-form').serialize();

    $.ajax({
        url: requestUrl,
        type: 'POST', // 要和控制器方法的[HttpPost]对应
        data: formData,
        success: function(response) {
            // 根据返回的JSON处理结果
            if (response.success) {
                alert('搞定啦！');
                // 比如关闭模态框、刷新页面数据
                $('#your-modal-id').modal('hide');
            } else {
                alert('出问题了：' + response.message);
            }
        },
        error: function(xhr, status, error) {
            // 出错了就看控制台的详细信息，方便调试
            console.error('请求错误详情：', xhr.responseText);
            alert('请求失败啦，看看控制台找原因～');
        }
    });
});

如果不想序列化整个表单，也可以手动把令牌放到请求头或者data里：

var token = $('input[name="__RequestVerificationToken"]').val();
// 放到请求头里
headers: { 'RequestVerificationToken': token },
// 或者放到data里
data: {
    __RequestVerificationToken: token,
    Name: $('#component-name').val(),
    Quantity: $('#component-quantity').val()
}

如果控制器方法接收的是模型，一定要让表单字段的name属性和模型的属性名完全一致！比如你的模型是：

public class ComponentModel
{
    public string Name { get; set; }
    public int Quantity { get; set; }
}

那视图里的输入框就得是：

<input type="text" name="Name" class="form-control" />
<input type="number" name="Quantity" class="form-control" />

这样序列化后的数据才能正确绑定到模型，不然控制器里的model会是null或者属性值为空。

新手最容易踩的坑就是路径写错：

• 别把控制器名写成ComponentController，默认路由里只需要写Component（去掉Controller后缀）
• 如果你的控制器在某个区域(Area)里，要加上区域路径，比如/Admin/Component/SaveComponent
• 用@Url.Action("方法名", "控制器名")生成路径是最稳妥的，它会自动根据你的路由配置生成正确的URL，不用手动硬编码。

遇到请求失败时，打开浏览器的开发者工具(F12)，切换到「Network」标签，找到你的Ajax请求：

• 如果状态码是404：路径写错了，控制器或方法不存在
• 如果是400：要么是防伪令牌验证失败，要么是参数绑定错误
• 如果是500：控制器方法里抛出了异常，看「Response」里的详细信息，或者给控制器方法加断点调试
• 点击请求查看「Form Data」，看看发送的参数是不是你预期的，有没有遗漏或者写错。

对照自己的代码调整一下，应该就能解决问题啦！

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