Razor conditional attribute not working

Question

In a tag I want to conditionally output the style attribute, e.g.: <li style="@styleVar" >...</li> When styleVar is null it should not be written by razor (just the supposed standard functionality in Razor 2), but for some strange reason it is outputted as <li style="">...</li>, while I expect <li>...</li>.

This is in a partial view. In a normal view it is working. So is this a bug in partial views?

Anybody the same experience?

Ingrowing

Assuming you're using MVC3 here, if you are able to upgrade to MVC4, then you get this behaviour for free: beletsky.net/2012/04/new-in-aspnet-mvc4-razor-changes.html – Correction

I am using MVC4. Note that I said that I use Razor 2, which is included in MVC4. – Ingrowing

It seems like razor is a bit picky about spaces here, i removed a whitespace between the attribute name and the '=' and it worked. – Oona

Answer 1

This does not seem to work in partial views and for custom html attributes such as data-test="@test". This is not omitted, instead it still puts in the data-test="". So the MVC team has to fix this asap.

Cleaves

i'm pretty sure it's deliberate if data attributes are not removed – Hershey

"data-" can't use conditional attribute, you can find this reference in the source code // First, determine if this is a 'data-' attribute (since those can't use conditional attributes) LocationTagged<string> name = nameSymbols.GetContent(Span.Start); bool attributeCanBeConditional = !name.Value.StartsWith("data-", StringComparison.OrdinalIgnoreCase); – Peripatetic

And I see that this is still the case today as of .Net 6 -- that assigning null for a data- attribute won't exclude the attribute from the element. Can anyone explain to me why this is the behavior that they have implemented? – Boston

Answer 2

If the styleVar is equal to null (not the string.Empty) mvc4 will automatically do this.

Conditional attribute rendering

If you have an attribute that might be null, in the past you've needed to do a null check to avoid writing out an empty attribute, like this:

<div @{if (myClass != null) { <text>class="@myClass"</text> } }>Content</div>

Now Razor is able to handle that automatically, so you can just write out the attribute. If it's null, the attribute isn't written:

<div class="@myClass">Content</div>

So if @myClass is null, the output is just this:

<div>Content</div>

Millenary

Is this applicable to Html.Helpers as well? – Suffer

if the value of the attribute is null, attribute will not render – Millenary

Answer 3

Don't see any error in your code: you "hard code" markup and vary only style value. To achieve what you are trying to do, you need code similar to this:

@if(!string.IsNullOrEmpty(styleVar))
{
  <li style="@styleVar" >...</li>
}

Repertory

I expect <li>...</li> as output. Edited my question to clarify that. – Ingrowing

According to your changes. If string evaluates to NULL it will remove empty attribute, but if string evaluates to empty string, it will render empty attribute. This is an algorithm of Razor v2 – Repertory

indeed, that work's for top level views, but seems not to work for partial views. – Ingrowing

Answer 4

I have just had a situation where a space between an attribute name and the equals sign broke boolean conditional rendering:

So

<input type="checkbox" name="fieldname" id ="fieldname" checked="@Model.MyBool" />

rendered with checked="True", whereas

<input type="checkbox" name="fieldname" id="fieldname" checked="@Model.MyBool" />

rendered correctly with checked="checked"

The conditional rendering appears fairly brittle.

This isn't exactly an answer to the detail of the OP's question, but it's definitely a possibility for people who are looking for help with "Razor conditional attribute not working"

Keratin

Answer 5

Another possible cause is a Razor comment within the HTML tag.

// This renders <div>Hello world</div>
<div class="@null">Hello world</div>

// Renders <div  class="">Hello world</div>
<div @**@ class="@null">Hello world</div>

I ran into this when I had commented out a single attribute for testing purposes and all of the sudden my conditional attributes were broken.

Bucaramanga

Answer 6

When styleVar == null you will get <li style="">... (at least with mvc3) in partial and normal views.

I guess you have to use the conditional operator:

<li @(styleVar == null ? "" : "style=\"" + styleVar + "\"")>...</li>

Backwardation

I am working with Razor 2, as I said in my question, which is used in MVC4. So this answer does not apply – Ingrowing