jQuery使用.val()获取id为staffno的元素值返回undefined问题求助

第一步：确认渲染后的实际DOM ID是否正确 #

• 在浏览器按F12打开开发者工具，切换到元素面板搜索staffno，确认@Html.EditorFor渲染出来的元素id是否真的为staffno
• ASP.NET MVC 5+版本的EditorFor重载方法，自定义HTML属性需要放在htmlAttributes字段下，原有写法可能不生效导致id未正确设置：

// 错误写法（高版本MVC不生效）
@Html.EditorFor(model => model.StaffNumber, new { id = "staffno" })
// 正确写法
@Html.EditorFor(model => model.StaffNumber, new { htmlAttributes = new { id = "staffno" } })

如果渲染出来的id和预期不符，要么修正Razor语法，要么按实际生成的id修改jQuery选择器。

第二步：确认代码执行时机 #

• 需要保证GetId函数执行时，目标DOM已经完全渲染完成，常见错误场景包括：
  • JS代码写在<head>标签内，未包裹DOM加载完成回调就直接执行
  • 目标元素为动态渲染内容，执行GetId时元素还未插入DOM树
• 修复示例：

// 页面DOM完全加载后再执行相关逻辑
$(function() {
    function GetId() {
        alert("Staff Id is " + $("#staffno").val());
    }
    // 函数绑定触发事件、主动调用都要放在该回调范围内
})

第三步：确认元素类型匹配取值方法 #

• val()方法仅对<input>、<select>、<textarea>这类表单元素生效，如果EditorFor渲染出来的是<span>、<div>等普通文本元素，需要替换对应的取值方法：

// 普通元素取纯文本内容
$("#staffno").text()
// 普通元素取带标签的HTML内容
$("#staffno").html()

第四步：调试验证选择器有效性 #

在GetId函数内加入调试代码，先确认元素是否被正确选中：

function GetId() {
    console.log("选中的元素数量：", $("#staffno").length) 
    // 控制台输出为0说明没有匹配到元素，输出为1说明选中正常
    alert("Staff Id is " + $("#staffno").val());
}

第五步：确认jQuery可用性与冲突 #

• 在浏览器控制台执行console.log($)，如果输出结果不是函数，说明jQuery未正确引入，或者$标识符被其他JS库占用
• 存在冲突时可以用jQuery全写代替$调用：

alert("Staff Id is " + jQuery("#staffno").val())

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