ASP.NET Core 6.0 MVC实现非空字段批量设为只读的方案

针对你开发ASP.NET Core 6 Web应用时遇到的「数据库已有值字段设为只读、空字段允许编辑」需求，无需逐个手动添加ReadOnly="readonly"，可以通过以下几种批量处理方式实现：

1. 后端视图直接条件判断（快速实现） #

在视图的input标签中，直接根据模型字段的值动态生成readonly属性，无需额外工具：

示例改造 #

把你原来的手动设置readonly的代码：

<input type="text" class="form-control" placeholder="Quantidade" value="@Html.DisplayFor(model => model.iAP.QuantidadeProduto)" ReadOnly="readonly"/>

替换为：

<input type="text" class="form-control" placeholder="Quantidade" 
       value="@Model.iAP.QuantidadeProduto"
       @(Model.iAP.QuantidadeProduto != null && !string.IsNullOrWhiteSpace(Model.iAP.QuantidadeProduto.ToString()) ? "readonly" : "") />

逻辑说明：如果模型字段有非空值，就渲染readonly属性；反之则不渲染，允许用户编辑。

如果表单字段是同一模型下的属性，还可以通过循环遍历模型属性批量生成表单元素，彻底避免重复代码：

@foreach (var prop in ViewData.ModelMetadata.Properties.Where(p => p.ShowForEdit))
{
    <div class="form-group">
        <label>@prop.DisplayName</label>
        <input type="text" class="form-control" 
               value="@Model.GetType().GetProperty(prop.PropertyName).GetValue(Model)"
               @(Model.GetType().GetProperty(prop.PropertyName).GetValue(Model) != null && !string.IsNullOrWhiteSpace(Model.GetType().GetProperty(prop.PropertyName).GetValue(Model).ToString()) ? "readonly" : "") />
    </div>
}

注意：这种方式适合字段类型统一的场景，若有不同类型输入框（如下拉框、日期选择器），需额外判断字段类型。

2. 前端JavaScript批量处理（无需修改后端） #

如果不想改动后端逻辑，可在页面加载后通过JS遍历所有输入框，自动为有值的字段添加readonly属性：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 选择所有需要处理的表单控件（可根据类名/标签名调整选择器）
    const formInputs = document.querySelectorAll('.form-control');
    
    formInputs.forEach(input => {
        // 排除空值或纯空格的字段
        if (input.value.trim() !== '') {
            input.setAttribute('readonly', 'readonly');
        }
    });
});

注意：如果表单数据是异步加载（如AJAX获取），需在数据渲染完成后再执行这段JS代码。

3. 自定义Tag Helper（优雅复用方案） #

对于大型表单场景，推荐创建自定义Tag Helper，封装「根据模型值自动设置只读」的逻辑，后续只需在视图中添加标记即可：

步骤1：创建自定义Tag Helper类 #

在项目中新建ReadOnlyInputTagHelper.cs：

using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

[HtmlTargetElement("input", Attributes = "asp-for, auto-readonly")]
public class ReadOnlyInputTagHelper : TagHelper
{
    // 绑定模型字段
    [HtmlAttributeName("asp-for")]
    public ModelExpression For { get; set; }

    // 开关：是否启用自动只读逻辑
    [HtmlAttributeName("auto-readonly")]
    public bool AutoReadOnly { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        base.Process(context, output);

        // 若启用自动只读，且模型字段有非空值，则添加readonly属性
        if (AutoReadOnly && For.Model != null && !string.IsNullOrWhiteSpace(For.Model.ToString()))
        {
            output.Attributes.SetAttribute("readonly", "readonly");
        }
    }
}

步骤2：注册Tag Helper #

在Views/_ViewImports.cshtml中添加Tag Helper注册（替换为你的项目程序集名称）：

@addTagHelper *, YourProjectName

步骤3：在视图中使用 #

只需在input标签中添加auto-readonly="true"即可：

<input type="text" class="form-control" asp-for="iAP.QuantidadeProduto" auto-readonly="true" />
<input type="text" class="form-control" asp-for="iAP.Pro" auto-readonly="true" />

这种方式代码复用性强，后续新增字段只需添加标记，无需重复写条件判断。

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