6

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?

3
  • 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 Commented Nov 7, 2012 at 10:38
  • I am using MVC4. Note that I said that I use Razor 2, which is included in MVC4. Commented Nov 7, 2012 at 12:32
  • 3
    It seems like razor is a bit picky about spaces here, i removed a whitespace between the attribute name and the '=' and it worked. Commented Jan 26, 2013 at 16:28

6 Answers 6

12

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.

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

4 Comments

i'm pretty sure it's deliberate if data attributes are not removed
"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);
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?
@ChristopherKing This is speculation, but I imagine that it's because when built-in attributes are omitted, that is the same as being null. But data- attributes often encode information purely by their presence, so making them disappear if they don't have a value would make it onerous to use them as boolean flags (otherwise we would get the some annoyance as we do with checkboxes, as in checked="checked").
7

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>

2 Comments

Is this applicable to Html.Helpers as well?
if the value of the attribute is null, attribute will not render
1

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

3 Comments

I expect <li>...</li> as output. Edited my question to clarify that.
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
indeed, that work's for top level views, but seems not to work for partial views.
1

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.

Comments

1

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"

Comments

-1

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>

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.