ASP MVC Razor视图基于数据库记录自动控制文本框显隐的实现方法

实现方案 #

你可以通过两种方式实现页面加载时自动根据数据库读取的Type值控制文本框显隐：

方案1：JS初始化调用（保留原有交互逻辑） #

首先修改你的JS代码，移除无用的modernizr引入，添加页面加载完成后的初始化逻辑：

<script type="text/javascript">
    function text(x) {
        if (x == 0) {
            document.getElementById("name").style.display = "block";
            document.getElementById("address").style.display = "none";
        } else {
            document.getElementById("name").style.display = "none";
            document.getElementById("address").style.display = "block";
        }
        return;
    }

    // 页面加载完成后自动根据后端Model的Type值初始化显隐
    document.addEventListener('DOMContentLoaded', function(){
        // 从数据库读取的Type值如果是A传0，是B传1
        text('@Model.Type' == 'A' ? 0 : 1);
    });
</script>

这种方案不需要修改原有单选框的交互逻辑，页面加载后会自动触发显隐控制。

方案2：服务端直接渲染样式（无闪烁，体验更好） #

你可以直接在Razor视图里根据Model.Type的值给文本框容器加行内样式，不需要等待JS加载就能正确显示：

<!-- 单选框部分保持不变 -->
@Html.LabelFor(Model => Model.Type, "A")
@Html.RadioButtonFor(Model => Model.Type, "A" , new { @onclick = "text(0)", @id = "but1" })

@Html.LabelFor(Model => Model.Type, "B")
@Html.RadioButtonFor(Model => Model.Type, "B" , new { @onclick = "text(1)", @id = "but2" })

<!-- 文本框部分直接加服务端渲染的样式 -->
<div class="form-group col-md-6" id="name" style="display:@(Model.Type == "A" ? "block" : "none")">
    @Html.LabelFor(model => model.name, new { @class = "control-label" })
    @Html.TextBoxFor(model => model.name, new { @class = "form-control" })
</div>
<div class="form-group col-md-6" id="address" style="display:@(Model.Type == "B" ? "block" : "none")">
    @Html.LabelFor(model => model.address, new { @class = "control-label" })
    @Html.TextBoxFor(model => model.address, new { @class = "form-control" })
</div>

这种方案页面首次渲染就会显示正确的状态，不会出现JS加载前文本框显示异常的闪烁问题，建议优先使用。

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