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

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?

Solution

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