I have a view that displays a textbox as follows:

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

it is displayed via javascript (so the user clicks a checkbox).

If javascript is not enabled, I must remove this line (style = "display: none") so that the textbox is displayed by default.

I have a view that displays a textbox as follows:

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

it is displayed via javascript (so the user clicks a checkbox).

If javascript is not enabled, I must remove this line (style = "display: none") so that the textbox is displayed by default.

• asp-mvc-3
• razor
• partial-views
• javascript

6 Answers 6

I typed this as a ment because it seemed so obvious I figured somebody else could grab some upvotes, but:

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

The content of a <noscript> tag is shown only when JavaScript is disabled.

You can use client side logic for this, have it visible as default and hide it with javascript on page load.

If you use jQuery it will be something like this:

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

And remove the display: none from the Razor logic.

Another solution is to wrap the textbox element in <noscript>-tags.

For example:

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

The way I generally handle this is by hiding the elements initially WITH javascript when the Dom loads... This way, no javascript = no hiding...

The way I generally prefer to do this, to avoid the flashing of the content on long pages when using the JS hiding solution, is to add something like this to the CSS:

html.jsEnabled #CodeGuest {display: none;}

and then in the JS, just add this:

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

The advantage is that you can run that bit of code even before the DOM is Ready, since the HTML tag will already be available. Plus I can use that class for any other progressive enhancements I might have in mind.

I like Pointy's answer, but here's a simple script option:

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

While a noscript element is elegant, it is not consistent with the principles of feature and capability detection and graceful degredation. A better strategy is to decide whether to show the element or not only if the browser is capable of running the associated script.

The above suggestion has the same drawback.

You can just hide the element with JavaScript, so the element is displayed by default. Only if JavaScript is executed, the element is hidden.

I don't know what markup your given code generates, but with JavaScript you could do something like this (for a simple-case example, when the element gets an id):

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

So it will get hidden, when JavaScript is enabled. Be sure to wait, until the DOM is fully loaded, before you execute your script, otherwise this could end up doing nothing.

For DOM-Manipulation, I tend to use jQuery, it has a good DOM-ready Listener and easy element-selection.