CODEWITHSUNDEEP
asp.net-mvchtmlrazor
nyxthulhu
nyxthulhu

Reputation: 9752

Correct way to hide on load for ASP.NET MVC

So I have a form two two inputs, "Free" and "Price". Free is a checkbox, and if the box is checked then the Price box should not show, if it is unchecked then the price box should show.

I can easily hook the onChecked and toggle the visibility on and off after the page has loaded, but the question is pre-loading what is the best practise.

From what I can tell theres three main solutions here :-

  1. Set an inline style to set the visibility based on the starting model, ie @(model.Free?"hidden":"visibile") this just seems sort of bad practise since isn't CSS supposed to be seperated from structure, this kinda mixes the two a little.

  2. Set a jQuery handler to fire on load to check the checkbox status, the problem with this approach is that theres a few seconds before it fires so you get a "flicker"

  3. Some other thing I'm missing...

Any advice?

Upvotes: 1

Views: 2711

Answers (1)

danludwig
danludwig

Reputation: 47375

1.

Most css styles are better off separated into an external stylesheet, but for a simple style="display:none;", inline styles are fine.

Also, as of MVC4, if a variable is null, Razor won't render the attribute.

@{
    var displayIt = Model.Free ? "display:none;" : null;
}
<div style="@displayIt">
    The above style attribute will not be rendered when displayIt is null
    (in MVC4)
</div>

Upvotes: 3

Related Questions