Asp.net Core 6 MVC Razor视图中隐藏字段的非JS实现方法

方案1：用CSS类隐藏整个容器 #

直接给包裹字段的<div>添加隐藏类，借助Bootstrap内置的d-none类可以快速隐藏整个区块（包含标签、输入框、验证提示）：

<div class="mb-3 d-none">
    <label asp-for="DeliveryDt" class="control-label"></label>
    <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
    <span asp-validation-for="DeliveryDt" class="text-danger"></span>
</div>

如果项目未使用Bootstrap，可自定义CSS类：

.hidden-block { display: none; }

再给div添加该类：class="mb-3 hidden-block"

方案2：Razor条件渲染控制输出 #

通过Razor的if语句完全控制该字段区块是否渲染到页面，适合不需要在页面输出任何相关HTML的场景：

@if (false) { // 替换为实际显示逻辑，比如根据Model状态判断
<div class="mb-3">
    <label asp-for="DeliveryDt" class="control-label"></label>
    <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
    <span asp-validation-for="DeliveryDt" class="text-danger"></span>
</div>
}

当条件为false时，该区块不会生成任何HTML代码。

方案3：给所有元素添加HTML原生hidden属性 #

如果需要保留输入框的值用于表单提交，同时视觉上隐藏所有相关元素，可给标签、输入框、验证提示都加上hidden属性：

<div class="mb-3">
    <label asp-for="DeliveryDt" class="control-label" hidden></label>
    <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly hidden />
    <span asp-validation-for="DeliveryDt" class="text-danger" hidden></span>
</div>

这种方式HTML仍会输出到页面，但浏览器会隐藏这些元素。

方案4：通过模型元数据隐藏自动生成的字段 #

如果是使用Html.EditorFor这类自动生成字段的方法，可在模型属性上添加HiddenInput特性，让框架只生成隐藏输入框，不显示标签和验证信息：

using Microsoft.AspNetCore.Mvc.ModelBinding.Metadata;

public class YourModel {
    [HiddenInput(DisplayValue = false)]
    public DateTime DeliveryDt { get; set; }
}

注意：该特性仅对框架自动生成的字段生效，手动编写的HTML标签需要配合前面的方案使用。

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