ASP.NET MVC Razor conditional rendering an element

Question

How does one conditionally render an HTML element in Razor 2?

For instance, suppose I had the tag

    <div class="someclass">
         <p>@somevalue</p>
    </div>

And I wanted to suppress the <-div-> tag from rendering if the value of @somevalue was equal to 1. Is there a simple way to do this in Razor similar to how I might "hide" the <-div-> tag with Knockout.js in a browser, where I might :

    <div class="someclass" data-bind="showWhenTrue: someValue != 1">
         <p data-bind="text: someValue"></p>
    </div>

At the moment, the best Razor alternative I have is to do this:

      @if (someValue != 1) {
         <div class="someclass">
               <p>@somevalue</p>
         </div>
      }

Erik Funkenbusch · Accepted Answer · 2019-12-23 16:17:16Z

19

There are many ways to do this. First, it should be noted that your knockout code doesn't actually remove the html from output, it just sets its display to hidden.

The razor code you have actually removes the code from the rendered HTML, so that's a very different thing.

To answer your question, we need to know what it is you're trying to achieve. If you just want to hide the display, you can simply do something like this:

<div class="someclass" style="display: @{ somevalue == 1 ? @:"none" : @:"block" };">
     <p>@somevalue</p>
</div>

You could also do it with a class:

<div class="someclass @{ somevalue == 1 ? @:"HideMe" : @:"ShowMe" }">
     <p>@somevalue</p>
</div>

If you want to remove the code from the output, then you can just do what you've done.. i'm mot sure what you find so objectionable about it... but if you want other alternatives, you could create an Html helper, you could use a razor helper, you could use a Display or EditorTemplate....

The list is actually quite long and i'm just scratching the surface...

edited Dec 23, 2019 at 16:17

answered May 15, 2014 at 3:16

Erik Funkenbusch

93.6k29 gold badges201 silver badges292 bronze badges

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

4 Comments

user18539 Over a year ago

I did it this way: @(string.IsNullOrEmpty(somevalue) ? "hideme" : "")

Brian Lowe Over a year ago

what's objectionable is the @( ...) sometimes screws up auto-formatting for the whole document and intellisense for the remainder of the tag content. knockoutjs has data-bind="if: someBoolean" and angular has *ngIf="someBoolean". I'd have expected razor to have something built-in along those lines to help us keep our mark-up neat

Jack Miller Over a year ago

"hidden" is not a valid value for CSS property "display".

Bender Over a year ago

I had issue with using @: syntax inside of style attribute. My solution was to add a razor string variable @{var displayContent= ViewBag.ShowConditition ? "block" : "hide"} and render html, <div style="display: @displayContent"> <p>content</p> </div>

Andy Blackman · Accepted Answer · 2021-03-10 12:01:56Z

0

An elegant (and re-usable) solution is to write an extension method for Html to do conditional rendering of text ( a bit like IF() in Excel) - e.g.

   public static MvcHtmlString ConditionalRender(this HtmlHelper helper, bool condition, string trueString, string falseString = "")
   {
       return MvcHtmlString.Create((condition) ? trueString : falseString);
   }

You can then use it in your code as such:

   <div class="someclass" style="display: @Html.ConditionalRender(somevalue == 1, "none","block")">
        <p>@somevalue</p>
   </div>

answered Mar 10, 2021 at 12:01

Andy Blackman

1,3251 gold badge11 silver badges14 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Razor conditional rendering an element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related