如何在ASP.NET Razor中基于条件隐藏指定div（不使用样式）

根据你的需求，以下几种是直接隐藏目标div的常用具体方法：

1. 原生JavaScript直接修改样式 #

通过DOM API获取目标div元素，直接设置其display样式为none：

// 假设documents是你已有的数据对象
if (documents.count > 0) {
  // 获取id为渲染后实际值的div（注意@components会被模板引擎替换为真实id）
  const componentsDiv = document.getElementById('@components');
  // 先判断元素是否存在，避免报错
  if (componentsDiv) {
    componentsDiv.style.display = 'none';
  }
}

2. 通过CSS类控制隐藏（更易维护） #

先定义一个通用的隐藏类：

.hidden {
  display: none;
}

再通过JavaScript给目标div添加这个类：

if (documents.count > 0) {
  const componentsDiv = document.getElementById('@components');
  if (componentsDiv) {
    componentsDiv.classList.add('hidden');
    // 后续需要显示时，可调用 componentsDiv.classList.remove('hidden')
  }
}

这种方式的好处是样式统一管理，后续如果要修改隐藏的表现（比如改成visibility:hidden），只需修改CSS类即可，不用改动JS代码。

3. 服务端/模板引擎层面直接控制（推荐，更高效） #

如果你的代码是基于模板引擎（比如ASP.NET Razor、Vue等）渲染的，可以直接在渲染阶段就决定是否渲染目标div，无需前端JS额外处理：

示例（ASP.NET Razor）： #

@* 只有当documents.count <=0时才渲染components div *@
@if (documents.Count <= 0) {
  <div id="@components">
    Test
  </div>
}

<div id="@documents">
  <!-- 这里放documents相关内容 -->
</div>

示例（Vue.js）： #

<!-- 通过v-if指令控制元素是否渲染 -->
<div id="components" v-if="documents.count <= 0">
  Test
</div>

<div id="documents">
  <!-- 这里放documents相关内容 -->
</div>

这种方式在性能上更优，因为不需要前端加载后再执行判断和DOM操作。

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