ASP.NET MVC用jQuery AJAX传视图数据到控制器遇代码错误排查

1. 控制器端基础语法问题（对应"View、Json不存在于当前上下文"报错） #

• 报错根因：编写的JQueryController没有继承ASP.NET MVC提供的Controller基类，无法访问基类内置的View()、Json()等方法；同时代码里存在方法名笔误。
• 修复方式：
  1. 控制器类声明时显式继承System.Web.Mvc.Controller
  2. 把笔误的JSON()修正为基类方法Json()
     修复后的控制器代码参考：

using System.Web.Mvc;

public class JQueryController : Controller
{
    public ActionResult Index ()
    {
        return View(); 
    }
    
    [HttpPost]
    public JsonResult AjaxPostCall(Userinfo userdata)
    {
        // 直接返回绑定的模型对象即可，不需要重复实例化赋值
        return Json(userdata, JsonRequestBehavior.AllowGet);
    }
}

• 额外校验：确保Userinfo是公共可访问的模型类，属性名称和前端传参的字段名完全匹配（注意统一Email地址的属性拼写，避免前后端字段不匹配导致绑定失败）

2. 视图端编译错误（对应CS0117：'JQueryController'不包含'UserInfo'的定义） #

• 报错根因：视图头部的Razor代码逻辑完全错误，将模型声明写成了对控制器类静态成员的访问，而控制器里根本没有定义UserInfo这个静态成员；同时混淆了Razor模型指令的写法。
• 修复方式：
  1. 删除对控制器类的任意成员引用，不要写类似@Shakesphere.Controller.JQueryController.UserInfo;的代码
  2. 用Razor规定的小写@model指令声明强类型视图的绑定模型，正确写法参考：

@model Shakesphere.ViewModels.UserDataModel
@{
    Layout = null;
}

3. 前端AJAX逻辑问题（修复编译问题后请求仍会失败的诱因） #

• 逐项修正代码逻辑错误：
  • 选择器错误：把$('name')这类标签选择器，修正为按id匹配输入框的选择器$('#name')、$('#email')、$('#phone')
  • 变量大小写错误：JS大小写敏感，统一使用前面声明的小写开头userInfo对象，不要在判断条件里写不存在的UserInfo变量
  • AJAX配置项错误：
    • 把全小写的contenttype修正为驼峰格式的contentType
    • 把非法的application.json内容类型，修正为合法的application/json; charset=utf-8
    • 删除不存在的failure回调配置，仅保留error作为失败回调即可
    • 修正错误的请求地址：控制器名为JQueryController，按MVC默认路由规则，AJAX请求地址应为/JQuery/AjaxPostCall
  • 逻辑触发时机：把原本没有绑定事件、直接在DOM加载阶段就执行的AJAX请求，绑定到用户输入完成后的提交按钮点击事件上，避免空值提交
• 修复后的前端脚本参考：

$(function() {
    // 给输入区的提交按钮绑定点击事件
    $('#submitButton').on('click', function() {
        const userInfo = {
            Name: $('#name').val(),
            EmailAddress: $('#email').val(),
            Phone: $('#phone').val()
        };
        // 简单校验输入合法性
        if (!userInfo.Name) {
            alert("请输入姓名");
            return;
        }
        $.ajax({
            type: 'POST',
            url: '/JQuery/AjaxPostCall',
            data: JSON.stringify(userInfo),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response) {
                    alert("Name:" + response.Name);
                } else {
                    alert("Something went wrong ");
                }
            },
            error: function (response) {
                alert(response.responseText);
            }
        })
    })
})

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