How to hide a div element depending on Model value? MVC

Question

Here is what I have at the moment

 hidden="@(Model.IsOwnedByUser||!Model.CanEdit)"

This works fine on Chrome but doesnt hide on Internet Explorer

I tried also visibility set false but no luck.

then I found out another style as below

style="@(Model.IsOwnedByUser||!Model.CanEdit)?'display:none'""

I could not get it worked. What is the correct format to hide an element with Razor syntax?

Or I would use Jquery to hide the element. but is it actually possible print out jquery statement that would hide the element on page load?

What is wrong with the second statement? except the fact that you have two " at the end and are missing an 'else' (:'') — peter
– peter, Commented Feb 26, 2014 at 15:42
style="@(Model.IsOwnedByUser || !Model.CanEdit)?'display:none':'display'" when I see the source code — akd
– akd, Commented Feb 26, 2014 at 15:58

Shyju · Accepted Answer · 2014-02-26 15:42:05Z

110

The below code should apply different CSS classes based on your Model's CanEdit Property value .

<div class="@(Model.CanEdit?"visible-item":"hidden-item")">Some links</div>

But if it is something important like Edit/Delete links, you shouldn't be simply hiding,because people can update the css class/HTML markup in their browser and get access to your important link. Instead you should be simply not Rendering the important stuff to the browser.

@if(Model.CanEdit)
{
  <div>Edit/Delete link goes here</div>
}

answered Feb 26, 2014 at 15:42

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

akd Over a year ago

Thanks. I was missing a syntax when I have 2 conditions.

Hardik Over a year ago

<div style="display:@(Model.CanEdit ? "block":"none" )"></div> you can also use above code to show or hide html element.

Thaks Over a year ago

Second method is using logic in view which is not an appreciated method.

Yuri · Accepted Answer · 2015-04-08 19:54:54Z

42

Try:

<div style="@(Model.booleanVariable ? "display:block" : "display:none")">Some links</div>

Use the "Display" style attribute with your bool model attribute to define the div's visibility.

edited Apr 8, 2015 at 19:54

answered Apr 7, 2015 at 19:12

Yuri

1,8812 gold badges14 silver badges12 bronze badges

4 Comments

ryanyuyu Over a year ago

Please format your answer to improve its readability. Explaining why this works and/or providing references would also improve your answer.

Steven Over a year ago

I shouldn't prefer using this for sensitive information. Because Display:none can be disabled in a browser through Inspect Element. using an @if statement as stated in Shyju's answer is safer.

Arjun Arora Over a year ago

@Steven, We can still change the class value through inspect... or can change the display property from class name.. so hardly matters

Steven Over a year ago

If you place display:none either in style or in a css class, it'll still be rendered. You would want to prevent the div from rendering,

kristianp · Accepted Answer · 2016-11-03 04:13:50Z

4

Your code isn't working, because the hidden attibute is not supported in versions of IE before v11

If you need to support IE before version 11, add a CSS style to hide when the hidden attribute is present:

*[hidden] { display: none; }

edited Nov 3, 2016 at 4:13

answered Nov 3, 2016 at 4:07

kristianp

6,01142 silver badges63 bronze badges

Comments

phn · Accepted Answer · 2021-04-12 15:27:57Z

4

I know the question is specifically about hiding the div but if you don't do anything else with the div (in JavaScript for example) then you can just not include it in the output of the view by using the Razor @if syntax.

@if (Model.IsOwnedByUser && Model.CanEdit)
{
<div>Some Links</div>
}

answered Apr 12, 2021 at 15:27

phn

1,8301 gold badge15 silver badges10 bronze badges

Comments

mosborn1987 · Accepted Answer · 2022-07-22 17:53:47Z

1

This seemed to work for me....

<div style="@(Model.YourBoolean?"":"display: none;")">

answered Jul 22, 2022 at 17:53

mosborn1987

693 bronze badges

Collectives™ on Stack Overflow

How to hide a div element depending on Model value? MVC

5 Answers 5

3 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related