Question

我有一个显示文本框的视图，如下所示：

@Html.TextBoxFor(m => m.CodeGuest, new {style = "display: none"})

它通过javascript显示（因此用户点击一个复选框）。

如果未启用javascript，我必须删除此行（style = "display: none"），以便默认显示文本框。

Answer 1

我输入此作为评论，因为它似乎很明显我认为其他人可以获得一些赞成，但是：

<noscript>
  <div>
    Hello YOU HAVE JAVASCRIPT TURNED OFF YOU BIG SILLY
  </div>
</noscript>

仅在禁用JavaScript时才会显示<noscript>标记的内容。

Answer 2

您可以使用客户端逻辑，将其作为默认值显示，并在页面加载时使用javascript隐藏它。

如果你使用jQuery，它将是这样的：

$(function() {
    $('[name="CodeGuest"]').hide();
});

并从Razor逻辑中删除display：none。

另一种解决方案是将文本框元素包装在<noscript> - 标记中。

例如：

<noscript>
     @Html.TextBoxFor(m => m.CodeGuest)
</noscript>

Answer 3

我通常处理这个问题的方法是在Dom加载时隐藏最初 WITH javascript的元素...这样，没有javascript =没有隐藏... < / p>

Answer 4

我喜欢Pointy的回答，但这是一个简单的脚本选项：

<script type="text/javascript">
  document.write('<style type="text/css">#hideMe {display:none;}<\/style>');
</script>

虽然noscript元素很优雅，但它与特征和功能检测以及优雅降级的原则不一致。如果浏览器能够运行相关脚本，更好的策略是决定是否显示元素。

上述建议也有同样的缺点。

Answer 5

您可以使用JavaScript隐藏元素，因此默认情况下会显示该元素。只有在执行JavaScript时，该元素才会被隐藏。

我不知道你的代码生成了什么标记，但是使用JavaScript你可以做类似的事情（对于一个简单的例子，当元素得到一个id时）：

elem = document.getElementById(id);
elem.style.display = 'none';

因此，当启用JavaScript时，它将被隐藏。在执行脚本之前，请务必等待，直到DOM完全加载，否则最终可能无法执行任何操作。

对于DOM-Manipulation，我倾向于使用jQuery，它有一个很好的DOM-ready Listener和简单的元素选择。

Answer 6

我通常喜欢这样做，以避免在使用JS隐藏解决方案时在长页面上闪烁内容，就是在CSS中添加这样的内容：

html.jsEnabled #CodeGuest {display: none;}

然后在JS中，只需添加：

document.getElementsByTagName('html')[0].className += ' jsEnabled';

优点是，即使在DOM准备就绪之前，您也可以运行该位代码，因为HTML标记已经可用。另外，我可以将该课程用于我可能想到的任何其他渐进增强。