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?

Answer 1

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> } 

Answer 2

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.