如何在ASP.NET MVC项目中通过按钮修改div的display属性？

控制器运行在服务器端，无法直接修改浏览器中的DOM元素样式（DOM是前端浏览器的产物），可以通过以下两种方式实现需求：

方案一：后端返回状态 + 前端视图渲染 #

让控制器返回验证结果，前端根据结果控制div的显示状态：

1. 修改控制器方法，传递验证状态到视图：

public IActionResult TextCheckerButton(MyClass data)
{
    // 将验证结果存入ViewBag，供视图使用
    ViewBag.InputIsValid = data.Textbox1 == "qwerty";
    return View(); // 返回当前页面视图
}

2. 修改HTML视图，根据后端传递的状态设置div样式：

<!-- 注意修正原始HTML的语法错误：补全引号、闭合标签 -->
<div id="Div1" style="@(ViewBag.InputIsValid ? "display:none" : "display:contents")">
    <input type="text" asp-for="textinput" />
    <input id="textchecker" asp-controller="Home" asp-action="TextCheckerButton" type="submit" class="btn btn-primary" />
</div>

<div id="Div2" style="@(ViewBag.InputIsValid ? "display:contents" : "display:none")">
    <input type="text" asp-for="textinput" />
    <input id="textchecker2" asp-controller="Home" asp-action="TextCheckerButton2" type="submit" class="btn btn-primary" />
</div>

方案二：纯前端JavaScript验证（无需后端请求） #

如果不需要后端处理额外逻辑，直接在前端验证输入并修改样式，体验更流畅：

<!-- 修正语法错误，给输入框添加id用于获取值 -->
<div id="Div1" style="display:contents">
    <input type="text" id="textInput" asp-for="textinput" />
    <button id="textchecker" class="btn btn-primary">验证</button>
</div>

<div id="Div2" style="display:none">
    <input type="text" asp-for="textinput" />
    <input id="textchecker2" asp-controller="Home" asp-action="TextCheckerButton2" type="submit" class="btn btn-primary" />
</div>

<script>
// 监听验证按钮点击事件
document.getElementById('textchecker').addEventListener('click', function() {
    const inputValue = document.getElementById('textInput').value;
    const div1 = document.getElementById('Div1');
    const div2 = document.getElementById('Div2');

    if (inputValue === 'qwerty') {
        div1.style.display = 'none';
        div2.style.display = 'contents';
    }
});
</script>

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