MVC视图读取文档元素值报错Text不存在于当前上下文解决方法

你触发报错、拿不到值的核心原因是混淆了服务端Razor渲染和客户端JavaScript的运行边界：

• 你写在@{ }块里的是C#代码，在服务器端执行，执行时机是页面发给用户浏览器之前，这个阶段根本不存在DOM、document这些浏览器对象
• Razor语法里的<text>标签作用是标记「这段内容要作为纯文本输出到HTML」，不是用来定义C#变量的，你写在<text>里的JS代码只会被原样输出到页面，不会在服务端执行，自然也不可能给C#的if判断传值
• document.getElementById是浏览器端JS的API，只有当用户打开页面、浏览器加载完DOM之后才能运行，这时候服务端的WebGrid渲染早就执行完了，不可能回头改列配置。

修复方案 #

先明确你判断用的NextAction值的来源，选对应方案：

场景1：值是页面渲染前就确定的（来自Model、ViewBag、请求参数等服务端已知数据） #

不要走JS读DOM，直接在服务端拿原始值判断即可，参考代码：

@{
    var grid = new WebGrid(Model.Abc, canPage: true, canSort: true, rowsPerPage: 50);
    var gridColumnsNew = new List<WebGridColumn>();
    gridColumnsNew.Add(grid.Column("Details", header: "Id"));

    // 直接从服务端数据源取值判断，比如从Model、ViewBag、Request里取
    string nextAction = Request["NextAction"] ?? ViewBag.NextAction ?? "";
    if (nextAction == "Start")
    {
        gridColumnsNew.Add(grid.Column("Temp"));
    }
}

页面上的NextAction元素直接绑定服务端值即可，比如：

<input type="hidden" id="NextAction" value="@nextAction" />

场景2：值是页面加载后动态变化的（比如用户输入、选择操作后才会改变） #

WebGrid的列生成是服务端一次性渲染完成的，没法在浏览器里直接回头改服务端生成的列配置，两种实现思路：

1. 前端控制显隐：服务端渲染时先把Temp列正常生成，给列加专属样式类，用JS监听NextAction的值变化，动态控制列的显示隐藏，参考代码：

@{
    // 服务端先把Temp列加上，标记样式类
    gridColumnsNew.Add(grid.Column("Temp", style: "col-temp"));
}

<!-- 页面底部加JS逻辑，等DOM加载完再执行 -->
<script>
function toggleTempColumn() {
    var nextActionVal = document.getElementById("NextAction").value;
    document.querySelectorAll('.col-temp').forEach(function (el) {
        el.style.display = nextActionVal === "Start" ? "" : "none";
    });
}
// 页面初始化时执行一次
document.addEventListener('DOMContentLoaded', toggleTempColumn);
// 如果NextAction是可交互元素（比如输入框、下拉框），加事件监听值变化时触发
document.getElementById("NextAction").addEventListener('input', toggleTempColumn);
document.getElementById("NextAction").addEventListener('change', toggleTempColumn);
</script>

2. 动态刷新：当NextAction的值变化时，把值作为参数发AJAX请求回服务端，服务端根据传入的值重新生成WebGrid的HTML，返回给前端替换原有表格内容。

注意：永远不要在Razor的C#代码块里写JS DOM操作逻辑，两者运行在完全不同的环境，执行时机也完全错开，不能直接互相访问变量。

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